From cfdc2a8f1b8d073b26bcfb407ebfcd8573ed51dd Mon Sep 17 00:00:00 2001
From: James Doyle <james2doyle@gmail.com>
Date: Sun, 1 Dec 2024 12:32:26 -0800
Subject: [PATCH] Changed: run build

---
 docs/android/jellybean-nexuss/index.html      |    2 +-
 .../light-weight/privacy-policy/index.html    |    1 +
 docs/atom.xml                                 | 8523 -----------------
 docs/demo/flexbox-demo/index.html             |    2 +-
 docs/demo/generated-content-title/index.html  |    4 +-
 docs/demo/godaddy-digital-ocean/index.html    |    2 +-
 docs/demo/index.html                          |    2 +-
 .../demo/letterpress-loader-in-css/index.html |    2 +-
 docs/demo/mozilla-dev-derby/index.html        |    2 +-
 docs/demo/no-javascript-accordion/index.html  |    2 +-
 docs/demo/socketio-works-howto/index.html     |    2 +-
 docs/fiddle/css-date-card/index.html          |    2 +-
 docs/fiddle/css3-pagebend/index.html          |    2 +-
 .../generated-content-in-css/index.html       |    4 +-
 docs/fiddle/index.html                        |    2 +-
 docs/fiddle/no-js-image-preview/index.html    |    2 +-
 docs/index.html                               |    2 +-
 .../april-2013-redesign/index.html            |    2 +-
 .../assemble-starter/index.html               |    2 +-
 .../atom-monokai-dark/index.html              |    4 +-
 .../canadian-provinces-field/index.html       |    2 +-
 .../chrome-reverse-geocode/index.html         |    2 +-
 .../clean-css-in-office-hours/index.html      |    2 +-
 .../clean-css-updated/index.html              |    2 +-
 .../docracy-logo-svg/index.html               |    2 +-
 .../git-website-workflow/index.html           |    2 +-
 .../github-wiki-to-html/index.html            |    4 +-
 .../grunt-highlight/index.html                |    4 +-
 .../personal-project/grunt-sundown/index.html |    6 +-
 docs/personal-project/index.html              |    2 +-
 .../jquery-doodal-js/index.html               |    4 +-
 .../koding-interview/index.html               |    2 +-
 .../kube-in-stylrework/index.html             |    2 +-
 .../kube-node-express/index.html              |    2 +-
 .../lico-luvit-cms/index.html                 |    2 +-
 .../minimal-raspberry-pi-os/index.html        |    6 +-
 docs/personal-project/npm-logo-svg/index.html |    2 +-
 docs/personal-project/nudeproject/index.html  |    2 +-
 .../phalcon-micro-starter/index.html          |    2 +-
 docs/personal-project/phile-cms/index.html    |    2 +-
 .../phile-intro-video/index.html              |    2 +-
 .../php-websocket-chat/index.html             |    2 +-
 .../pico-download-plugin/index.html           |    2 +-
 .../pico-get-by-filename-plugin/index.html    |    2 +-
 .../pico-slider-plugin/index.html             |    2 +-
 .../pico-useragent/index.html                 |    4 +-
 .../pyro-blurb-field/index.html               |    2 +-
 .../pyro-github-markdown/index.html           |    6 +-
 .../pyro-image-select-field/index.html        |    2 +-
 .../pyro-image-widget/index.html              |    2 +-
 .../pyro-list-field/index.html                |    2 +-
 .../pyro-module-generator-2/index.html        |    2 +-
 .../pyro-module-generator/index.html          |    2 +-
 .../pyro-swipe-js-module/index.html           |    2 +-
 .../pyro-twitter-widget/index.html            |    2 +-
 .../pyrocms-pagewidgets-field-type/index.html |    2 +-
 .../pyrocms-ua-sniffer-plugin/index.html      |    2 +-
 docs/personal-project/rework-math/index.html  |    2 +-
 docs/personal-project/rework-shade/index.html |    2 +-
 .../personal-project/simple-binder/index.html |    4 +-
 .../startup-canada-svg/index.html             |    2 +-
 .../sublime-node-snippets/index.html          |    6 +-
 .../index.html                                |    4 +-
 docs/personal-project/vim-svg/index.html      |    2 +-
 .../zepto-drag-swap/index.html                |    2 +-
 docs/portfolio/grey-nimbus-website/index.html |    2 +-
 docs/portfolio/index.html                     |    2 +-
 docs/portfolio/my-old-website/index.html      |    2 +-
 docs/portfolio/new-business-cards/index.html  |    2 +-
 docs/sitemap.xml                              |    4 +
 .../animation-events-in-javascript/index.html |    2 +-
 docs/snippets/apax-in-htdocs/index.html       |    2 +-
 .../autocomplete-tailwind-classes/index.html  |    4 +-
 .../backup-mysql-and-email-it/index.html      |    2 +-
 .../index.html                                |    2 +-
 docs/snippets/bash-select-example/index.html  |    2 +-
 .../index.html                                |    4 +-
 .../copy-file-path-clipboard-osx/index.html   |    4 +-
 .../index.html                                |    2 +-
 .../easy-ffmpeg-video-posters/index.html      |    2 +-
 .../grunt-terminal-notifier-setup/index.html  |    2 +-
 .../snippets/hostmonster-phpmailer/index.html |    2 +-
 docs/snippets/index.html                      |    2 +-
 .../jquery-plugin-snippets/index.html         |    2 +-
 .../list-file-permission-numbers/index.html   |    2 +-
 .../lodash-memo-with-timeout/index.html       |    2 +-
 .../lodash-translation-function/index.html    |    2 +-
 .../modernizr-svg-fallback-to-png/index.html  |    2 +-
 docs/snippets/nodelist-each/index.html        |    2 +-
 .../index.html                                |    4 +-
 .../phalconphp-crop-to-fit/index.html         |    2 +-
 .../purge-file-from-github/index.html         |    4 +-
 .../raspberry-pi-php-and-lighttpd/index.html  |    6 +-
 docs/snippets/render-php-with-data/index.html |    2 +-
 docs/snippets/running-go-in-docker/index.html |    2 +-
 .../salt-js-mirco-selector-library/index.html |    4 +-
 .../simple-php-json-response/index.html       |    4 +-
 .../tailwind-screens-in-js/index.html         |    4 +-
 .../target-mozilla-only-in-css/index.html     |    2 +-
 .../index.html                                |    2 +-
 .../using-node-in-applescript/index.html      |    4 +-
 .../validate-email-with-lua/index.html        |    2 +-
 .../index.html                                |    2 +-
 .../vue-stateful-form-component/index.html    |    2 +-
 docs/snippets/vuex-crosstab/index.html        |    4 +-
 docs/snippets/vuex-stateful-url/index.html    |    4 +-
 .../wysiwyg-in-pyrocms-widgets/index.html     |    2 +-
 .../snippets/zsh-new-open-function/index.html |    2 +-
 .../index.html                                |    2 +-
 .../disallowed-characters-in-uri/index.html   |    2 +-
 .../index.html                                |    6 +-
 docs/tricks/hammerspoon-hyper-key/index.html  |    2 +-
 .../index.html                                |    2 +-
 docs/tricks/index.html                        |    2 +-
 .../index.html                                |    2 +-
 .../openssl-passwd-without-prompt/index.html  |    2 +-
 .../index.html                                |    4 +-
 .../index.html                                |    2 +-
 .../add-getstylesheet-to-jquery/index.html    |    2 +-
 docs/web/angular-through-iframe/index.html    |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 docs/web/checkboxes-options/index.html        |    2 +-
 docs/web/cms-watch-list/index.html            |    2 +-
 .../index.html                                |    6 +-
 docs/web/css3-badge-logo-in-svg/index.html    |    2 +-
 docs/web/custom-google-forms/index.html       |    2 +-
 .../index.html                                |    6 +-
 docs/web/flexible-svg-placeholders/index.html |    2 +-
 docs/web/font-awesome-svg-icons/index.html    |    2 +-
 .../index.html                                |    2 +-
 docs/web/index.html                           |    2 +-
 docs/web/kijiji-vector-logo/index.html        |    2 +-
 .../web/laravel-scout-sonic-driver/index.html |    2 +-
 docs/web/laravel-sqlite-cache/index.html      |    2 +-
 docs/web/nuxt-firebase-starter/index.html     |    4 +-
 docs/web/phalconphp-completions/index.html    |    2 +-
 docs/web/radio-checkboxes/index.html          |    4 +-
 .../index.html                                |    2 +-
 docs/web/simple-slash-commands/index.html     |    2 +-
 docs/web/simple-spam-stopper/index.html       |    2 +-
 docs/web/slack-url-meta-data/index.html       |    6 +-
 docs/web/source-code-pro-sublime/index.html   |    2 +-
 docs/web/sql-as-an-api/index.html             |    6 +-
 docs/web/styling-input-redux/index.html       |    2 +-
 docs/web/the-100-dollar-website/index.html    |    2 +-
 docs/web/tips-for-using-svgs/index.html       |    2 +-
 docs/web/typeform-vector-logo/index.html      |    2 +-
 .../index.html                                |    2 +-
 .../index.html                                |    2 +-
 docs/web/use-nginx-for-a-b-testing/index.html |    2 +-
 docs/web/using-digitalocean-spaces/index.html |    2 +-
 docs/web/using-slots-in-vue-js/index.html     |    4 +-
 docs/web/varnish-for-static-sites/index.html  |    4 +-
 .../index.html                                |    2 +-
 docs/web/vue-omnibar-component/index.html     |    4 +-
 docs/web/vue-toggle-component/index.html      |    4 +-
 .../wordpress-browser-body-class/index.html   |    2 +-
 docs/web/wordpress-plugin-swipe-js/index.html |    2 +-
 .../index.html                                |    4 +-
 .../zapier-webhooks-for-html-forms/index.html |    4 +-
 161 files changed, 213 insertions(+), 8729 deletions(-)
 create mode 100644 docs/apps/light-weight/privacy-policy/index.html
 delete mode 100644 docs/atom.xml

diff --git a/docs/android/jellybean-nexuss/index.html b/docs/android/jellybean-nexuss/index.html
index 1a1fa63..02d347e 100644
--- a/docs/android/jellybean-nexuss/index.html
+++ b/docs/android/jellybean-nexuss/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Installing Android 4.1.1 Jelly Bean for Nexus S | OhDoyleRules</title><meta content="Installing Android 4.1.1 Jelly Bean for Nexus S | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Installing Android 4.1.1 Jelly Bean for Nexus S" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/android/jellybean-nexuss/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/android/jellybean-nexuss/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Installing Android 4.1.1 Jelly Bean for Nexus S" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to flash jelly bean onto a nexus s" name=description><meta content="How to flash jelly bean onto a nexus s" itemprop=description><meta content="How to flash jelly bean onto a nexus s" property=og:description><meta content="How to flash jelly bean onto a nexus s" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Installing Android 4.1.1 Jelly Bean for Nexus S | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="jelly bean, nexus, s, android, root, hack, ROM, flash" itemprop=keywords><meta content="jelly bean, nexus, s, android, root, hack, ROM, flash" property=article:tag><meta content="jelly bean, nexus, s, android, root, hack, ROM, flash" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/android/jellybean-nexuss/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Installing Android 4.1.1 Jelly Bean for Nexus S</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 20, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>So I have been flashing ROMs for a while now. I recently installed Jelly Bean 4.1. I used the OTA(Over The Air) version from <a href="http://forum.xda-developers.com/showthread.php?t=1784497" title=here>here</a>. Just make sure you also flash the Simple-Root.zip file. I did not. So I had to root my phone again and then install it. Which wasn't too bad but still annoying.<p>As with flashing any kind of ROM there is always the thought and reality that you could break something. I had a custom ROM on before I switched to a Jelly Bean based ROM. It had the nice notification power controls which was awesome. But Jelly Bean (or at least any of the ROMs so far) do not. So with a bit of searching I found <a href="https://play.google.com/store/apps/details?id=com.painless.pc" title="Power Controls">Power Controls</a>.<p>It works well and has a lot of customizable features. It is a recommend.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Installing Android 4.1.1 Jelly Bean for Nexus S | OhDoyleRules</title><meta content="Installing Android 4.1.1 Jelly Bean for Nexus S | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Installing Android 4.1.1 Jelly Bean for Nexus S" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/android/jellybean-nexuss/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/android/jellybean-nexuss/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Installing Android 4.1.1 Jelly Bean for Nexus S" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to flash jelly bean onto a nexus s" name=description><meta content="How to flash jelly bean onto a nexus s" itemprop=description><meta content="How to flash jelly bean onto a nexus s" property=og:description><meta content="How to flash jelly bean onto a nexus s" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Installing Android 4.1.1 Jelly Bean for Nexus S | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="jelly bean, nexus, s, android, root, hack, ROM, flash" itemprop=keywords><meta content="jelly bean, nexus, s, android, root, hack, ROM, flash" property=article:tag><meta content="jelly bean, nexus, s, android, root, hack, ROM, flash" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/android/jellybean-nexuss/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Installing Android 4.1.1 Jelly Bean for Nexus S</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 20, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>So I have been flashing ROMs for a while now. I recently installed Jelly Bean 4.1. I used the OTA(Over The Air) version from <a href="http://forum.xda-developers.com/showthread.php?t=1784497" rel="noopener nofollow noreferrer" target=_blank title=here>here</a>. Just make sure you also flash the Simple-Root.zip file. I did not. So I had to root my phone again and then install it. Which wasn't too bad but still annoying.<p>As with flashing any kind of ROM there is always the thought and reality that you could break something. I had a custom ROM on before I switched to a Jelly Bean based ROM. It had the nice notification power controls which was awesome. But Jelly Bean (or at least any of the ROMs so far) do not. So with a bit of searching I found <a href="https://play.google.com/store/apps/details?id=com.painless.pc" rel="noopener nofollow noreferrer" title="Power Controls" target=_blank>Power Controls</a>.<p>It works well and has a lot of customizable features. It is a recommend.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/apps/light-weight/privacy-policy/index.html b/docs/apps/light-weight/privacy-policy/index.html
new file mode 100644
index 0000000..635e360
--- /dev/null
+++ b/docs/apps/light-weight/privacy-policy/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Light Weight Privacy Policy | OhDoyleRules</title><meta content="Light Weight Privacy Policy | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Light Weight Privacy Policy" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/apps/light-weight/privacy-policy/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/apps/light-weight/privacy-policy/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Light Weight Privacy Policy" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The Privacy Policy for the Light Weight mobile app" name=description><meta content="The Privacy Policy for the Light Weight mobile app" itemprop=description><meta content="The Privacy Policy for the Light Weight mobile app" property=og:description><meta content="The Privacy Policy for the Light Weight mobile app" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Light Weight Privacy Policy | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="light weight, legal, privacy, app" itemprop=keywords><meta content="light weight, legal, privacy, app" property=article:tag><meta content="light weight, legal, privacy, app" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/apps/light-weight/privacy-policy/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><div><div class=container><header class="grid center"><div class="cell menu"><h1>Light Weight Privacy Policy</h1></div></header><main class=the-loop><div class=main-content><h1 id=privacy-policy-for-light-weight>Privacy Policy for Light Weight</h1><p><strong>Last Updated:</strong> 2024-12-01<h2 id=1-introduction>1. Introduction</h2><p>Welcome to Light Weight ("App"). This Privacy Policy explains our commitment to protecting your privacy. Our app is designed to function entirely offline and does not collect, store, or transmit any personal data.<h2 id=2-data-collection>2. Data Collection</h2><p>Our app does NOT collect:<ul><li>Personal information<li>Usage statistics<li>Device data<li>Location information<li>Any form of user tracking</ul><h2 id=3-offline-functionality>3. Offline Functionality</h2><p>Light Weight is designed to work completely offline:<ul><li>No internet connection required<li>No data sent to external servers<li>All functionality occurs locally on your device</ul><h2 id=4-permissions>4. Permissions</h2><p>The app may request minimal device permissions necessary for core functionality. These permissions do not involve data collection or transmission.<h2 id=5-user-privacy-commitment>5. User Privacy Commitment</h2><p>We are committed to:<ul><li>Protecting your privacy<li>Ensuring complete data confidentiality<li>Providing a secure, offline experience</ul><h2 id=6-data-storage>6. Data Storage</h2><p>Any data created within the app is:<ul><li>Stored locally on your device<li>Completely under your control<li>Not accessible by any third parties</ul><h2 id=7-updates-to-privacy-policy>7. Updates to Privacy Policy</h2><p>While our privacy practices remain consistent, we may update this policy periodically.<h2 id=8-contact-information>8. Contact Information</h2><p>For any privacy-related questions, contact:<ul><li>Email: <a href="mailto:james2doyle@gmail.com?subject=Light+Weight">james2doyle@gmail.com</a></ul><h2 id=9-consent>9. Consent</h2><p>By using Light Weight, you acknowledge our commitment to your privacy and offline functionality.<hr><p><strong>Note:</strong> This privacy policy confirms our commitment to user privacy and offline operation.</div></main></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/atom.xml b/docs/atom.xml
deleted file mode 100644
index 56511c7..0000000
--- a/docs/atom.xml
+++ /dev/null
@@ -1,8523 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
-    <title>James Doyle</title>
-    <subtitle>The personal blog of James Doyle (james2doyle) Web Developer in Canada.</subtitle>
-    <link rel="self" type="application/atom+xml" href="https://ohdoylerules.com/atom.xml"/>
-    <link rel="alternate" type="text/html" href="https://ohdoylerules.com"/>
-    <generator uri="https://www.getzola.org/">Zola</generator>
-    <updated>2024-04-21T00:00:00+00:00</updated>
-    <id>https://ohdoylerules.com/atom.xml</id>
-    <entry xml:lang="en">
-        <title>Hammerspoon hyper key</title>
-        <published>2024-04-21T00:00:00+00:00</published>
-        <updated>2024-04-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/hammerspoon-hyper-key/"/>
-        <id>https://ohdoylerules.com/tricks/hammerspoon-hyper-key/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/hammerspoon-hyper-key/">&lt;p&gt;If you aren&#x27;t using &lt;a href=&quot;https:&#x2F;&#x2F;www.hammerspoon.org&#x2F;&quot;&gt;Hammerspoon&lt;&#x2F;a&gt; on OSX, you are missing out!&lt;&#x2F;p&gt;
-&lt;p&gt;It has some great features that you can use to control your desktop, automate tasks, build small UIs and toolbar apps. It can also trigger key presses and modifiers like shift, alt, etc.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the script I use to create &amp;quot;hyper&amp;quot; key shortcuts. If you aren&#x27;t aware, the hyper key is a modifier key that combines the Shift, Control, Alt, and Command&#x2F;Windows keys simultaneously. Then you can press a regular key and use that for shortcuts.&lt;&#x2F;p&gt;
-&lt;p&gt;I wrote an article a while back to &lt;a href=&quot;&#x2F;tricks&#x2F;hammerspoon-number-pad-shortcuts&#x2F;&quot;&gt;&amp;quot;Use Your Numberpad To Control Google Hangouts&#x2F;Meet&amp;quot;&lt;&#x2F;a&gt; which is pretty handy. It uses a similar trick to play out a combination of keys and trigger actions in Chrome.&lt;&#x2F;p&gt;
-&lt;p&gt;The script below watches the keyboard for the hyper key + another key. In the script below, I just bind the hyper key + some letter keys to trigger apps to focus.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;lua&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-lua &quot;&gt;&lt;code class=&quot;language-lua&quot; data-lang=&quot;lua&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- verbose logging
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- hs.logger.setGlobalLogLevel(5)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;local &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyperKeyLogger &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.logger.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;new&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;hyperkey&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;debug&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- a table of mapping single keys to the apps they open&#x2F;switch to
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;local &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyper_key_shortcuts &lt;&#x2F;span&gt;&lt;span&gt;= {}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyper_key_shortcuts&lt;&#x2F;span&gt;&lt;span&gt;[&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;C&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;] = &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Google Chrome&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyper_key_shortcuts&lt;&#x2F;span&gt;&lt;span&gt;[&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;F&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;] = &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Finder&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyper_key_shortcuts&lt;&#x2F;span&gt;&lt;span&gt;[&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;S&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;] = &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Sublime Text&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyper_key_shortcuts&lt;&#x2F;span&gt;&lt;span&gt;[&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;T&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;] = &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WezTerm&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyper_key_shortcuts&lt;&#x2F;span&gt;&lt;span&gt;[&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;W&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;] = &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WhatsApp&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyper_key_shortcuts&lt;&#x2F;span&gt;&lt;span&gt;[&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Z&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;] = &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Zed&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- you can add some more apps here
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- sort through all the items in the table and add the listeners for them
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;in &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.fnutils.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sortByKeys&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyper_key_shortcuts&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;do
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.hotkey.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span&gt;({&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;ctrl&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;option&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;shift&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyperKeyLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;v&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[hyper &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;..&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;..&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;] pressed&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyperKeyLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;v&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[hyper &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;..&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;..&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;] released&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- @see https:&#x2F;&#x2F;www.hammerspoon.org&#x2F;docs&#x2F;hs.application.html#open
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- this will open the app if it is closed, or focus it if it is open
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.application.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;open&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hyperKeyLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;v&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[hyper &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;..&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;..&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;] repeated&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Use Your Numberpad To Control Google Hangouts&#x2F;Meet</title>
-        <published>2023-03-10T00:00:00+00:00</published>
-        <updated>2023-03-10T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/"/>
-        <id>https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/">&lt;h3 id=&quot;the-number-pad&quot;&gt;The number pad&lt;&#x2F;h3&gt;
-&lt;p&gt;Number pads can be pretty handy. Not just for accountants or spreadsheet junkies. Did you know that the keys on a number pad register in their own way? If your number pad is setup right, pressing a &lt;code&gt;1&lt;&#x2F;code&gt; on your keyboard number row and pressing &lt;code&gt;1&lt;&#x2F;code&gt; on your number pad, will be different keys. I have a bunch of my number keys on my number pad set to control the window positions on my desktop.&lt;&#x2F;p&gt;
-&lt;p&gt;I also use the &lt;code&gt;0&lt;&#x2F;code&gt; key and the &lt;code&gt;.&lt;&#x2F;code&gt; key to control Google Hangouts&#x2F;Meet. Read more to find out how.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;hammerspoon&quot;&gt;Hammerspoon&lt;&#x2F;h3&gt;
-&lt;p&gt;If you aren&#x27;t using &lt;a href=&quot;https:&#x2F;&#x2F;www.hammerspoon.org&#x2F;&quot;&gt;Hammerspoon&lt;&#x2F;a&gt; on OSX, you are missing out! It has some great features! I will write some more articles on using Hammerspoon to control your Apple trackpad and also tricks with &amp;quot;hyper&amp;quot; keys to control your desktop.&lt;&#x2F;p&gt;
-&lt;p&gt;Back on track. These are all the keys on the number pad that Hammerspoon will treat as &amp;quot;unique&amp;quot;:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;pad., pad*, pad+, pad&#x2F;, pad-, pad=,
-&lt;&#x2F;span&gt;&lt;span&gt;pad0, pad1, pad2,
-&lt;&#x2F;span&gt;&lt;span&gt;pad3, pad4, pad5,
-&lt;&#x2F;span&gt;&lt;span&gt;pad6, pad7, pad8, pad9,
-&lt;&#x2F;span&gt;&lt;span&gt;padclear, padenter
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This means you can bind functionality to those keys without them also applying to the number row. Cool, right?&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;switch-to-google-hangouts-meet&quot;&gt;Switch to Google Hangouts&#x2F;Meet&lt;&#x2F;h3&gt;
-&lt;p&gt;The following code is used to focus Chrome and then switch to the hangouts tab when &lt;code&gt;pad0&lt;&#x2F;code&gt; is pressed:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;lua&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-lua &quot;&gt;&lt;code class=&quot;language-lua&quot; data-lang=&quot;lua&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;local &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;shortcutsLogger &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.logger.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;new&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;shortcuts&#x2F;shortcuts&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;debug&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- &amp;quot;pad0&amp;quot; -- focus the Chrome, switch to the hangouts tab
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.hotkey.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span&gt;({}, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pad0&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Focus Hangouts&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;shortcutsLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;d&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[pad0] pressed&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;shortcutsLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;d&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[pad0] released&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;local &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.appfinder.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;appFromName&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Google Chrome&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;activate&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- @see https:&#x2F;&#x2F;www.hammerspoon.org&#x2F;docs&#x2F;hs.eventtap.html#keyStroke
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.eventtap.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;keyStroke&lt;&#x2F;span&gt;&lt;span&gt;({&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;shift&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;}, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;A&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;300&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- needed in order to use the tab search
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.timer.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;doAfter&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.3&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.eventtap.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;keyStrokes&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;meet&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.timer.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;doAfter&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.2&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.eventtap.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;keyStroke&lt;&#x2F;span&gt;&lt;span&gt;({}, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Return&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;100&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;shortcutsLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;d&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[pad0] repeated&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can see that we do need to &amp;quot;wait&amp;quot; a bit between key presses in order to make sure we are triggering things properly.&lt;&#x2F;p&gt;
-&lt;p&gt;One of the great things about using &lt;code&gt;cmd+shift+A&lt;&#x2F;code&gt; is that it will find &lt;strong&gt;tabs across windows&lt;&#x2F;strong&gt;. This means you can have multiple windows open or even multiple desktops and it should still work!&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;switch-to-google-hangouts-meet-1&quot;&gt;Switch to Google Hangouts&#x2F;Meet&lt;&#x2F;h3&gt;
-&lt;p&gt;I have another shortcut setup on &lt;code&gt;pad.&lt;&#x2F;code&gt; that will switch to the hangouts tab and toggle &amp;quot;mute&amp;quot;:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;lua&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-lua &quot;&gt;&lt;code class=&quot;language-lua&quot; data-lang=&quot;lua&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- &amp;quot;pad.&amp;quot; -- focus the Chrome, switch to the hangouts tab, toggle mute
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.hotkey.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span&gt;({}, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pad.&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Toggle Hangouts Mute&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;shortcutsLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;d&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[pad.] pressed&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;shortcutsLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;d&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[pad.] released&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;local &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.appfinder.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;appFromName&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Google Chrome&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;activate&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- @see https:&#x2F;&#x2F;www.hammerspoon.org&#x2F;docs&#x2F;hs.eventtap.html#keyStroke
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.eventtap.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;keyStroke&lt;&#x2F;span&gt;&lt;span&gt;({&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;shift&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;}, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;A&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;300&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- needed in order to use the tab search
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.timer.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;doAfter&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.3&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.eventtap.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;keyStrokes&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;meet&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.timer.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;doAfter&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.2&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.eventtap.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;keyStroke&lt;&#x2F;span&gt;&lt;span&gt;({}, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Return&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;100&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;mark style=&quot;background-color:#65737e30;&quot;&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- presses this combo after the tab is in focus
-&lt;&#x2F;span&gt;&lt;&#x2F;mark&gt;&lt;mark style=&quot;background-color:#65737e30;&quot;&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.timer.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;doAfter&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.3&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;&#x2F;mark&gt;&lt;mark style=&quot;background-color:#65737e30;&quot;&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hs&lt;&#x2F;span&gt;&lt;span&gt;.eventtap.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;keyStroke&lt;&#x2F;span&gt;&lt;span&gt;({&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;}, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;D&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;100&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;win&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;&#x2F;mark&gt;&lt;mark style=&quot;background-color:#65737e30;&quot;&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;&#x2F;mark&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;shortcutsLogger&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;d&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[pad.] repeated&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Those added lines trigger the keyboard shortcut that will toggle mute in hangouts.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;different-browsers&quot;&gt;Different browsers?&lt;&#x2F;h3&gt;
-&lt;p&gt;If you want to modify the code above to work in other browsers, just change the line for &lt;code&gt;hs.appfinder.appFromName(&amp;quot;Google Chrome&amp;quot;)&lt;&#x2F;code&gt; to your browser. You will also need to figure out what the key combo is for finding tabs in that browser.&lt;&#x2F;p&gt;
-&lt;p&gt;In Firefox, for example, you can search the open tabs using &lt;code&gt;%&lt;&#x2F;code&gt; in the search bar. So you would need to do something like the following:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;1. cmd+L (activate the search bar)
-&lt;&#x2F;span&gt;&lt;span&gt;2. % (start the tab search)
-&lt;&#x2F;span&gt;&lt;span&gt;3. &amp;quot;meet&amp;quot; (type meet into the bar)
-&lt;&#x2F;span&gt;&lt;span&gt;4. Return (press enter to go to the tab)
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This is just a list of possible steps. Try it yourself and report back to me!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Using Browser Devtools To Improve Your Bug Reports</title>
-        <published>2023-03-09T00:00:00+00:00</published>
-        <updated>2023-03-09T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/"/>
-        <id>https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/">&lt;h3 id=&quot;good-bug-reports&quot;&gt;Good bug reports&lt;&#x2F;h3&gt;
-&lt;p&gt;Reporting bugs can be very difficult when you are not a developer. How do you make sure the bug can be recreated? How do you avoid the &amp;quot;it works on my machine&amp;quot; rebuttal?&lt;&#x2F;p&gt;
-&lt;p&gt;Well, we can greatly improve bug reports on web apps by using some simple tools built into the browsers we use every day.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;easy-screenshots&quot;&gt;Easy Screenshots&lt;&#x2F;h3&gt;
-&lt;p&gt;Did you know you can &lt;a href=&quot;https:&#x2F;&#x2F;developer.chrome.com&#x2F;blog&#x2F;new-in-devtools-62&#x2F;#node-screenshots&quot;&gt;take screenshots of DOM nodes&lt;&#x2F;a&gt; right from the browser?&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;1-devtools.png&quot; target=&quot;_blank&quot; title=&quot;take a node screenshot in devtools&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;1-devtools.png&quot; alt=&quot;take a node screenshot in devtools&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Handy right? Use this to easy capture a smaller area of the screen and attach that to your bug report. Easy!&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;saving-console-output&quot;&gt;Saving &amp;quot;console output&amp;quot;&lt;&#x2F;h3&gt;
-&lt;p&gt;Have you ever seen a blast of red in the console that states an error? You can try to explain what happened and where the error occurs. Or, you can export your console output to a log file and send it along to a developer!&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;2-devtools.png&quot; target=&quot;_blank&quot; title=&quot;save console output to a file&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;2-devtools.png&quot; alt=&quot;save console output to a file&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;The output will look something like the following:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;index&lt;&#x2F;span&gt;&lt;span&gt;):233 Uncaught Error: Oh no! Something happened
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;at&lt;&#x2F;span&gt;&lt;span&gt; (index)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;:233:9
-&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;anonymous&lt;&#x2F;span&gt;&lt;span&gt;) @ (index)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;:233
-&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;index&lt;&#x2F;span&gt;&lt;span&gt;):265 on localhost - not loading service worker. Query: http:&#x2F;&#x2F;localhost:1313&#x2F;sw.js 2023-03-09
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This will make it much easier for the developer to track down the area where the error occurred.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;save-har-content&quot;&gt;Save &amp;quot;HAR&amp;quot; content&lt;&#x2F;h3&gt;
-&lt;p&gt;The ultimate way to report an error with a network call is to use a HAR file to capture the state of the network when the file is created.&lt;&#x2F;p&gt;
-&lt;p&gt;What is a HAR file?&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;HAR (HTTP Archive) is a file format used by several HTTP session tools to export the captured data. The format is basically a JSON object with a particular set of fields. Note that not all the fields in the HAR format are mandatory, and in many cases, some information won&#x27;t be saved to the file.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;You can capture a HAR file from the network tab in your devtools and then save that file to be attached to your bug report:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;3-devtools.png&quot; target=&quot;_blank&quot; title=&quot;save network requests to a HAR file&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;3-devtools.png&quot; alt=&quot;save network requests to a HAR file&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;A HAR file is just JSON that follows the &amp;quot;HTTP Archive&amp;quot; specification that allows it to be read in various tools. Here is an example of the error above:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;version&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;1.2&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;creator&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WebInspector&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;version&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;537.36&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pages&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [
-&lt;&#x2F;span&gt;&lt;span&gt;      {
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;startedDateTime&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;2023-03-10T04:23:47.227Z&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;page_10&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;title&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;tricks&#x2F;using-browser-devtools-to-improve-your-bug-reports&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pageTimings&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;onContentLoad&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;282.40099999675294&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;onLoad&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;511.1339999930351
-&lt;&#x2F;span&gt;&lt;span&gt;        }
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    ],
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;entries&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [
-&lt;&#x2F;span&gt;&lt;span&gt;      {
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;_initiator&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;stack&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;            &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;callFrames&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [
-&lt;&#x2F;span&gt;&lt;span&gt;              {
-&lt;&#x2F;span&gt;&lt;span&gt;                &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;functionName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;                &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;scriptId&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;700&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;                &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;url&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;                &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;lineNumber&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;                &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;columnNumber&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0
-&lt;&#x2F;span&gt;&lt;span&gt;              }
-&lt;&#x2F;span&gt;&lt;span&gt;            ]
-&lt;&#x2F;span&gt;&lt;span&gt;          }
-&lt;&#x2F;span&gt;&lt;span&gt;        },
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;_priority&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;High&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;_resourceType&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cache&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {},
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;connection&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;121426&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pageref&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;page_10&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;method&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;GET&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;url&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;missing-file.json&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;httpVersion&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;HTTP&#x2F;1.1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;headers&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Accept&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;*&#x2F;*&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Accept-Encoding&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;gzip, deflate, br&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Accept-Language&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;en-CA,en;q=0.9,en-GB;q=0.8,en-US;q=0.7,nb;q=0.6,ar;q=0.5,fr;q=0.4,la;q=0.3&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Cache-Control&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;no-cache&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Connection&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;keep-alive&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Host&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;localhost:1313&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Pragma&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;no-cache&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Referer&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;tricks&#x2F;using-browser-devtools-to-improve-your-bug-reports&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Sec-Fetch-Dest&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;empty&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Sec-Fetch-Mode&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cors&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Sec-Fetch-Site&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;same-origin&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;User-Agent&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Mozilla&#x2F;5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit&#x2F;537.36 (KHTML, like Gecko) Chrome&#x2F;110.0.0.0 Safari&#x2F;537.36&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sec-ch-ua&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Chromium&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;;v=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;110&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Not A(Brand&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;;v=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;24&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Google Chrome&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;;v=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;110&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sec-ch-ua-mobile&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;?0&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sec-ch-ua-platform&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;macOS&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sec-gpc&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            }
-&lt;&#x2F;span&gt;&lt;span&gt;          ],
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;queryString&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [],
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cookies&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [],
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;headersSize&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;701&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;bodySize&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0
-&lt;&#x2F;span&gt;&lt;span&gt;        },
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;response&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;status&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;404&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;statusText&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Not Found&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;httpVersion&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;HTTP&#x2F;1.1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;headers&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Content-Type&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;text&#x2F;html; charset=utf-8&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Date&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Fri, 10 Mar 2023 04:23:55 GMT&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            },
-&lt;&#x2F;span&gt;&lt;span&gt;            {
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Transfer-Encoding&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;              &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;chunked&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            }
-&lt;&#x2F;span&gt;&lt;span&gt;          ],
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cookies&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [],
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;            &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;size&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;8321&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;            &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;mimeType&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;text&#x2F;html&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;            &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;compression&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;-20&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;            &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;text&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;html lang=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;en&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;no-js&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;head&amp;gt;&amp;lt;script src=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;livereload.js?mindelay=10&amp;amp;amp;v=2&amp;amp;amp;port=1313&amp;amp;amp;path=livereload&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; data-no-instant defer&amp;gt;&amp;lt;&#x2F;script&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta charset=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;utf-8&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta http-equiv=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Cache-control&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;public&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta http-equiv=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;X-UA-Compatible&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;IE=edge&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;viewport&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;width=device-width,initial-scale=1,maximum-scale=5&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n  \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;title&amp;gt;James Doyle | OhDoyleRules&amp;lt;&#x2F;title&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:title&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;James Doyle | OhDoyleRules&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;meta property=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:title&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;James Doyle | OhDoyleRules&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n  \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;google-site-verification&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; &#x2F;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;https:&#x2F;&#x2F;plus.google.com&#x2F;109231487156400680487&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;author publisher&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; &#x2F;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n  \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;meta property=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:type&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;website&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; &#x2F;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;meta property=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:title&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;James Doyle&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n  \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta itemprop=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;James Doyle&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta property=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:site_name&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;OhDoyleRules&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta itemprop=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;url&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;404.html&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta itemprop=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;email&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;james2doyle@gmail.com&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta property=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:url&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;404.html&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta itemprop=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;image logo&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;logo.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta property=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:image&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;logo.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;57x57&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-57x57.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;60x60&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-60x60.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;72x72&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-72x72.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;76x76&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-76x76.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;114x114&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-114x114.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;120x120&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-120x120.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;144x144&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-144x144.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;152x152&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-152x152.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;apple-touch-icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;180x180&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;apple-icon-180x180.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; type=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;image&#x2F;png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;192x192&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;android-icon-192x192.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; type=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;image&#x2F;png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;32x32&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;favicon-32x32.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; type=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;image&#x2F;png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;96x96&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;favicon-96x96.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; type=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;image&#x2F;png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; sizes=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;16x16&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;favicon-16x16.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;manifest&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;manifest.json&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;msapplication-TileColor&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;#ffffff&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;msapplication-TileImage&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;ms-icon-144x144.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;theme-color&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;#333333&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:card&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;summary&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:site&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;@james2doyle&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n  \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:creator&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;@james2doyle&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:image&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;logo.png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:domain&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;icons&#x2F;logo.svg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n  \n  \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;dns-prefetch&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;https:&#x2F;&#x2F;www.google-analytics.com&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;shortcut icon&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;favicon.ico&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; &#x2F;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;canonical&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;404.html&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sitemap&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; type=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;application&#x2F;xml&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; title=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Sitemap&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;sitemap.xml&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; &#x2F;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;meta id=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;themes&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; name=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;themes&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; content=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;css&#x2F;new.light.css,http:&#x2F;&#x2F;localhost:1313&#x2F;css&#x2F;new.dark.css&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;link id=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;stylesheet&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; rel=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;stylesheet&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;css&#x2F;new.light.css&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;style type=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;text&#x2F;css&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    body {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      font-feature-settings: &amp;#39;lnum&amp;#39; 1;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      font-variant-numeric: slashed-zero;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      text-rendering: geometricPrecision;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      -webkit-font-smoothing: antialiased;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      -moz-osx-font-smoothing: grayscale;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      -webkit-text-size-adjust: 100%;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      -ms-text-size-adjust: 100%;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      opacity: 0;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      transition: opacity 0.2s ease;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      will-change: opacity;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    body.light, body.dark {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      opacity: 1;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .show-on-light,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .show-on-dark {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      display: none;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .light .show-on-light,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .dark .show-on-dark {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      display: block;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .post-info {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      margin-bottom: 1rem;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    a.none {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      color: inherit;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      border: none;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      opacity: 1;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    a.none:hover {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      background: none;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      opacity: 0.6;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .center {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      text-align: center;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .center img {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      max-width: 100%;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      height: auto;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    pre {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      color: #f8f8f2;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      background-color: #282a36;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      -moz-tab-size: 4;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      -o-tab-size: 4;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      tab-size: 4;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    pre code.language-diff span:nth-child(1n + 7) {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      color: #50fa7b;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .switch-wrapper {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      display: flex;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      align-items: center;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      position: absolute;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      top: 1rem;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      right: 2rem;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      font-size: 80%;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .switch {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      position: relative;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      margin: 0 0.4rem;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .switch input {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      position: absolute;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      width: 100%;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      height: 100%;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      z-index: 1;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      opacity: 0;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      cursor: pointer;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .switch label {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      display: flex;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      border-radius: 9999px;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      height: 0.8rem;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      width: 1.8rem;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      background-color: rgba(0, 0, 0, .1);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      border: 1px solid rgba(0, 0, 0, .3);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .switch input:checked + label {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      background-color: #357edd;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      border: 1px solid #357edd;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      justify-content: flex-end;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    .switch div {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      width: calc(0.8rem - 2px);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      height: calc(0.8rem - 2px);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      border-radius: 9999px;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      border: 1px solid rgba(0, 0, 0, .3);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      background-color: #FFF;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n     \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    body.dark table.highlight tr:nth-child(even) {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      background-color: rgb(246, 248, 250);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    body.dark table.highlight td,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    body.dark table.highlight th {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      border-color: rgba(27,31,35,.3);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;&#x2F;style&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;script type=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;text&#x2F;javascript&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; charset=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;utf-8&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; defer&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    document.addEventListener(&amp;#39;DOMContentLoaded&amp;#39;, function() {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n      \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      const defaultIndex = window.matchMedia(&amp;#39;(prefers-color-scheme)&amp;#39;).media !== &amp;#39;not all&amp;#39; ? &amp;#39;1&amp;#39; : &amp;#39;0&amp;#39;;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n      \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      const activeIndex = JSON.parse(window.localStorage.getItem(&amp;#39;activeIndex&amp;#39;) || defaultIndex);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      const themes = document.getElementById(&amp;#39;themes&amp;#39;).content.split(&amp;#39;,&amp;#39;);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      const stylesheet = document.getElementById(&amp;#39;stylesheet&amp;#39;);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      if (stylesheet.href !== themes[activeIndex]) {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;        stylesheet.href = themes[activeIndex];&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      document.body.className = activeIndex === 0 ? &amp;#39;light&amp;#39; : &amp;#39;dark&amp;#39;;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      const theSwitch = document.getElementById(&amp;#39;switch&amp;#39;);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      theSwitch.checked = Boolean(activeIndex);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      theSwitch.addEventListener(&amp;#39;change&amp;#39;, function() {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;        const newIndex = Number(this.checked);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;        stylesheet.href = themes[newIndex];&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;        document.body.className = newIndex === 0 ? &amp;#39;light&amp;#39; : &amp;#39;dark&amp;#39;;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;        window.localStorage.setItem(&amp;#39;activeIndex&amp;#39;, newIndex);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      });&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    });&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;&#x2F;script&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;&#x2F;head&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;body&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;div class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;switch-wrapper&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;div&amp;gt;Light&amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;div class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;switch&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;input id=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;switch&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; type=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;checkbox&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; style=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;display: none&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; &#x2F;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;label for=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;switch&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      &amp;lt;div&amp;gt;&amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;&#x2F;label&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;div&amp;gt;Dark&amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;div class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;container&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;header class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;grid -middle -center&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;p&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      &amp;lt;a href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; title=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;James Doyle&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;none&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;        &amp;lt;img class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;show-on-light&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; src=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;icons&#x2F;logo-light.svg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; alt=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;James Doyle Logo&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; width=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;113&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; height=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;57&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;        &amp;lt;img class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;show-on-dark&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; src=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;icons&#x2F;logo-dark.svg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; alt=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;James Doyle Logo&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; width=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;113&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; height=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;57&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      &amp;lt;&#x2F;a&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;&#x2F;p&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;&#x2F;header&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;div class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;the-loop&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;    &amp;lt;article&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      &amp;lt;h2&amp;gt;404 Page Not Found&amp;lt;&#x2F;h2&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      &amp;lt;div class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;post-intro&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;        &amp;lt;p&amp;gt;The page you are looking for cannot be found. Please &amp;lt;a href=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; title=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Homepage&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;gt;return to the homepage&amp;lt;&#x2F;a&amp;gt;.&amp;lt;&#x2F;p&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;      &amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;   &amp;lt;&#x2F;article&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n\n\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;script defer&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n  \n  \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  console.info(&amp;#39;on localhost - not loading service worker. Query: http:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;localhost:1313&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;sw.js 2023-03-09&amp;#39;);&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n  \n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;&#x2F;script&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;&#x2F;body&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;&#x2F;html&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n\n&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;          },
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;redirectURL&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;headersSize&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;131&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;bodySize&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;8341&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;_transferSize&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;8472&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;_error&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;null
-&lt;&#x2F;span&gt;&lt;span&gt;        },
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;serverIPAddress&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;127.0.0.1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;startedDateTime&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;2023-03-10T04:23:55.706Z&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;time&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;5.828000001201872&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;timings&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;blocked&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3.4279999995124526&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;dns&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;-1&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;ssl&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;-1&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;connect&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;-1&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.08699999999999997&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;wait&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.28199999806331477&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;receive&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2.0310000036261044&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;_blocked_queueing&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1.5889999995124526
-&lt;&#x2F;span&gt;&lt;span&gt;        }
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    ]
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;To read a HAR file that has already been exported, you can just &lt;strong&gt;drag it into the network panel&lt;&#x2F;strong&gt; of your devtools:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;video width=&quot;100%&quot; autoplay loop muted preload=&quot;auto&quot; poster=&quot;&#x2F;images&#x2F;5-devtools-poster.jpg&quot;&gt;
-    &lt;source src=&quot;&#x2F;images&#x2F;5-devtools.mp4&quot; type=&quot;video&#x2F;mp4&quot;&gt;
-    &lt;p&gt;Sorry, your browser doesn&#x27;t support embedded videos, but don&#x27;t worry, you can &lt;a href=&quot;&#x2F;images&#x2F;5-devtools.mp4&quot; download&gt;download it&lt;&#x2F;a&gt; and watch it with your favourite video player!&lt;&#x2F;p&gt;
-  &lt;&#x2F;video&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;This will recreate the state of the world when the HAR file was captured.&lt;&#x2F;p&gt;
-&lt;p&gt;You can also use a tool like the &lt;a href=&quot;https:&#x2F;&#x2F;toolbox.googleapps.com&#x2F;apps&#x2F;har_analyzer&#x2F;&quot;&gt;Google Admin Toolbox HAR Analyzer&lt;&#x2F;a&gt; to view HAR files on a webpage:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;4-devtools.png&quot; target=&quot;_blank&quot; title=&quot;save console output to a file&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;4-devtools.png&quot; alt=&quot;save console output to a file&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;If you want to read more about capturing HAR files, just check out &lt;a href=&quot;https:&#x2F;&#x2F;www.ibm.com&#x2F;support&#x2F;pages&#x2F;how-generate-har-file-troubleshoot-issues&quot;&gt;this great list of steps on the IBM site&lt;&#x2F;a&gt; - of all places.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;in-summation&quot;&gt;In Summation&lt;&#x2F;h3&gt;
-&lt;p&gt;Hopefully these simple tips help improve your bug reports and make it easier for your team members to report them but also recreate them. Happy bug hunting!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Versioning Service Workers In Hugo</title>
-        <published>2022-08-21T00:00:00+00:00</published>
-        <updated>2022-08-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/"/>
-        <id>https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/">&lt;p&gt;I have been running this blog on &lt;a href=&quot;https:&#x2F;&#x2F;gohugo.io&#x2F;&quot;&gt;Hugo&lt;&#x2F;a&gt; for quite some time. It is fast, well supported, and full of features. Until recently, one of the features I was not taking advantage of was the &lt;a href=&quot;https:&#x2F;&#x2F;gohugo.io&#x2F;hugo-pipes&#x2F;introduction&#x2F;&quot;&gt;pipes feature&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;For all intents and purposes, pipes are used for processing strings and templates. They are &amp;quot;assets&amp;quot; that are used on your site. They live outside your theme at the top level &lt;code&gt;&#x2F;assets&lt;&#x2F;code&gt; folder in your Hugo project. But you can also pull in remote assets via a URL and Hugo will pull that in when you build your site.&lt;&#x2F;p&gt;
-&lt;p&gt;From the day I switched to Hugo, I was always &lt;a href=&quot;https:&#x2F;&#x2F;developer.chrome.com&#x2F;docs&#x2F;workbox&#x2F;caching-strategies-overview&#x2F;#cache-only&quot;&gt;using a service worker to cache my sites static assets&lt;&#x2F;a&gt;. The challenge I had was how to bust the cache. The old way I was doing this was to add a query string on the end of my &lt;code&gt;sw.js&lt;&#x2F;code&gt; URL. Something like this:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span&gt;navigator.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;serviceWorker&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;register&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sw.js?{{ now.Format &amp;quot;2006-01-02&amp;quot; }}&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This seemed to work &lt;em&gt;just OK&lt;&#x2F;em&gt;. I think maybe in the last couple years the browser&#x27;s changed and they would still cache this file even when the URL was different. It would not reload the service worker and therefore update the cache with new articles making my site seem stale even though there was new content.&lt;&#x2F;p&gt;
-&lt;p&gt;I can&#x27;t say for sure but it used to work in the past and then one day it did not...&lt;&#x2F;p&gt;
-&lt;p&gt;Now that this is a known issue in my site, I need a way to bust the cache in the service worker file itself instead of relying on the file&#x27;s URL.&lt;&#x2F;p&gt;
-&lt;p&gt;What I need to do is treat the &lt;code&gt;sw.js&lt;&#x2F;code&gt; file as a template so I can pass in a variable and tell the file it is new each time I deploy.&lt;&#x2F;p&gt;
-&lt;p&gt;In this case, it is pipes to the rescue! Here is the code that runs in my &lt;code&gt;footer.html&lt;&#x2F;code&gt; file:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;handlebars&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-handlebars &quot;&gt;&lt;code class=&quot;language-handlebars&quot; data-lang=&quot;handlebars&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- Get the file in &amp;quot;assets&#x2F;service-worker.js&amp;quot; --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$jsTemplate&lt;&#x2F;span&gt;&lt;span&gt; := &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;resources.Get &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;service-worker.js&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; }}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- We are making a new file called &amp;quot;sw.js&amp;quot; --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$js&lt;&#x2F;span&gt;&lt;span&gt; := $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;jsTemplate&lt;&#x2F;span&gt;&lt;span&gt; | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;resources.ExecuteAsTemplate &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sw.js&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; . }}
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt; defer&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; register the service worker only when not in development
-&lt;&#x2F;span&gt;&lt;span&gt;{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;eq &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;printf &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%v&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;.Site.BaseURL) &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; }}
-&lt;&#x2F;span&gt;&lt;span&gt;  console.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;info&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;on localhost - not loading service worker. Query: {{ $js.Permalink }} {{ now.Format &amp;quot;2006-01-02&amp;quot; }}&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;else &lt;&#x2F;span&gt;&lt;span&gt;}}
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;serviceWorker&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; in navigator) {
-&lt;&#x2F;span&gt;&lt;span&gt;    navigator.serviceWorker.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;register&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{{ $js.Permalink }}&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;end &lt;&#x2F;span&gt;&lt;span&gt;}}
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;That is all you need to read that asset file and create a URL so a &amp;quot;compiled&amp;quot; version. If you want to see this file, you can just visit the URL it creates: &lt;code&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;sw.js&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;And here is the code in &lt;code&gt;assets&#x2F;service-worker.js&lt;&#x2F;code&gt; that gets parsed as a go html template:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;handlebars&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-handlebars &quot;&gt;&lt;code class=&quot;language-handlebars&quot; data-lang=&quot;handlebars&quot;&gt;&lt;span&gt;&#x2F;&#x2F; cache name will change to the date of my last deploy
-&lt;&#x2F;span&gt;&lt;span&gt;const CACHE_NAME = &amp;#39;ODR-{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;now.Format &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;2006-01-02&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; }}&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;const expectedCaches = [CACHE_NAME];
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&#x2F; the list of files that need to be cached
-&lt;&#x2F;span&gt;&lt;span&gt;const staticFiles = [
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;.&#x2F;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;.&#x2F;css&#x2F;site.css&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;.&#x2F;icons&#x2F;logo.svg&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;.&#x2F;manifest.json&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;.&#x2F;favicon.ico&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;];
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;**
-&lt;&#x2F;span&gt;&lt;span&gt; * Performs install steps.
-&lt;&#x2F;span&gt;&lt;span&gt; *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;addEventListener(&amp;#39;install&amp;#39;, (event) =&amp;gt; {
-&lt;&#x2F;span&gt;&lt;span&gt;  &#x2F;&#x2F; install this service worker as soon as a new one is available
-&lt;&#x2F;span&gt;&lt;span&gt;  skipWaiting();
-&lt;&#x2F;span&gt;&lt;span&gt;  event.waitUntil(caches.open(CACHE_NAME).then(cache =&amp;gt; cache.addAll(staticFiles)));
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;**
-&lt;&#x2F;span&gt;&lt;span&gt; * Handles requests: responds with cache or else network.
-&lt;&#x2F;span&gt;&lt;span&gt; *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;addEventListener(&amp;#39;fetch&amp;#39;, (event) =&amp;gt; {
-&lt;&#x2F;span&gt;&lt;span&gt;  event.respondWith(caches.match(event.request).then(response =&amp;gt; response || fetch(event.request)));
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;**
-&lt;&#x2F;span&gt;&lt;span&gt; * Cleans up static cache and activates the Service Worker.
-&lt;&#x2F;span&gt;&lt;span&gt; *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;addEventListener(&amp;#39;activate&amp;#39;, (event) =&amp;gt; {
-&lt;&#x2F;span&gt;&lt;span&gt;  event.waitUntil(caches.keys().then(keys =&amp;gt; Promise.all(keys.map((key) =&amp;gt; {
-&lt;&#x2F;span&gt;&lt;span&gt;    if (!expectedCaches.includes(key)) {
-&lt;&#x2F;span&gt;&lt;span&gt;      return caches.delete(key);
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }))).then(() =&amp;gt; {
-&lt;&#x2F;span&gt;&lt;span&gt;    console.log(`${CACHE_NAME} now ready to handle fetches!`);
-&lt;&#x2F;span&gt;&lt;span&gt;    return clients.claim();
-&lt;&#x2F;span&gt;&lt;span&gt;  }));
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you will be able to see if you visited the file that gets generated at &lt;code&gt;http:&#x2F;&#x2F;localhost:1313&#x2F;sw.js&lt;&#x2F;code&gt;, the &lt;code&gt;CACHE_NAME&lt;&#x2F;code&gt; is now being defined with a value that includes todays date!&lt;&#x2F;p&gt;
-&lt;p&gt;Something like this:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; you should see a real string being assigned now and not a go template interpolation
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;CACHE_NAME &lt;&#x2F;span&gt;&lt;span&gt;= &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;ODR-2022-08-21&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;expectedCaches &lt;&#x2F;span&gt;&lt;span&gt;= [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;CACHE_NAME&lt;&#x2F;span&gt;&lt;span&gt;];
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F;... the rest of the file...
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now when you build the site, this new piped&#x2F;resource file will generated too and properly linked in your templates.&lt;&#x2F;p&gt;
-&lt;p&gt;Once I got this all setup, I can now deploy my site and know for sure that my service worker cache will be busted since it will be created with a key that includes the date of my deploy.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Using Laravel `when` Method To Support Multiple Queries</title>
-        <published>2022-08-14T00:00:00+00:00</published>
-        <updated>2022-08-14T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/"/>
-        <id>https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/">&lt;p&gt;There is a method on Laravel collections called &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&#x2F;docs&#x2F;8.x&#x2F;collections#method-when&quot;&gt;&lt;code&gt;when&lt;&#x2F;code&gt;&lt;&#x2F;a&gt; that allows you to create a condition on your code without using an &lt;code&gt;if&lt;&#x2F;code&gt; statement. This can be really handy given we often have conditions on queries to deal with missing or present data, the session-specific environment, or even information in the config.&lt;&#x2F;p&gt;
-&lt;p&gt;Let&#x27;s look at the common pattern I was using in the past to put conditions on my queries:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;** &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@var&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; \Illuminate\Database\Eloquent\Builder|\App\Models\User *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;User&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get the filter from the request
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter &lt;&#x2F;span&gt;&lt;span&gt;= $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;role&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;blank&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;)) {
-&lt;&#x2F;span&gt;&lt;span&gt;    $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;role&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;basic&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;else &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;role&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This is a contrived example but it should remind you of code you have seen or written in the past. Now we can rewrite it using the &lt;code&gt;when&lt;&#x2F;code&gt; method:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;** &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@var&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; \Illuminate\Database\Eloquent\Builder|\App\Models\User *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;User&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get the filter from the request
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter &lt;&#x2F;span&gt;&lt;span&gt;= $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;role&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;when&lt;&#x2F;span&gt;&lt;span&gt;(
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;blank&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;),
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; case when the condition is true (the filter is blank)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;void &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;        $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;role&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;basic&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; case when condition is false (the filter is NOT blank)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;use&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;void &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;        $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;role&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    });
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This is a lot nicer in my mind. It will allow us to encapsulate code under the closure and not pollute the top level workspace. Sweet!&lt;&#x2F;p&gt;
-&lt;p&gt;How about a more complicated example?&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;** &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@var&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; \Illuminate\Database\Eloquent\Builder|\App\Models\User *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;User&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get the search query from the request
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search &lt;&#x2F;span&gt;&lt;span&gt;= $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; when the database is not postgresql, use &amp;quot;like&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;database.default&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) !== &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pgsql&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; replace any spaces with the SQL wildcard `%` character
-&lt;&#x2F;span&gt;&lt;span&gt;    $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;likeReady &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Str&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;replace&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39; &amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;append&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;prepend&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;    $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;like&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;likeReady&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; use advanced postgresql features for searching text
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;database.default&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) === &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pgsql&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; use the function from the pg_trgm extension that adds special text search features
-&lt;&#x2F;span&gt;&lt;span&gt;    $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;whereRaw&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;SIMILARITY(&amp;quot;name&amp;quot;::text, ?) &amp;gt; 0.07&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, [$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;]);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This is actual code a wrote for an app that uses &lt;code&gt;sqlite&lt;&#x2F;code&gt; when testing but uses &lt;code&gt;postgresql&lt;&#x2F;code&gt; when running locally. This means some features just don&#x27;t work unless the right code is running.&lt;&#x2F;p&gt;
-&lt;p&gt;Let&#x27;s rewrite this one as well to clean-up the top level:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;** &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@var&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; \Illuminate\Database\Eloquent\Builder|\App\Models\User *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;User&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get the search query from the request
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search &lt;&#x2F;span&gt;&lt;span&gt;= $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; nicer way without using if statements
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;when&lt;&#x2F;span&gt;&lt;span&gt;(
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;database.default&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) === &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pgsql&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;use &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;void &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; use the function from the pg_trgm extension that adds special text search features
-&lt;&#x2F;span&gt;&lt;span&gt;        $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;whereRaw&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;SIMILARITY(&amp;quot;name&amp;quot;::text, ?) &amp;gt; 0.07&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, [$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;]);
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;use &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;void &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; replace any spaces with the SQL wildcard `%` character
-&lt;&#x2F;span&gt;&lt;span&gt;        $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;likeReady &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Str&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;replace&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39; &amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;append&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;prepend&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;        $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;like&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;likeReady&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    });
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Great! Now we have the &lt;code&gt;pgsql&lt;&#x2F;code&gt; query nicely wrapped up.&lt;&#x2F;p&gt;
-&lt;p&gt;This pattern is not just great for controllers. It works well in scoped queries too. I&#x27;ve used this in a scoped query to change the conditions based on the data in the model. Very handy!&lt;&#x2F;p&gt;
-&lt;p&gt;If we use chaining, we can make a very nice flow:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;** &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@var&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; \Illuminate\Database\Eloquent\Builder|\App\Models\User *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;User&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search &lt;&#x2F;span&gt;&lt;span&gt;= $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter &lt;&#x2F;span&gt;&lt;span&gt;= $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;role&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;basic&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ordering &lt;&#x2F;span&gt;&lt;span&gt;= [$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;order_by&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;), $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;direction&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)];
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;role&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;    -&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;when&lt;&#x2F;span&gt;&lt;span&gt;(
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;database.default&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) === &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;pgsql&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;use &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;void &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;            &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; use the function from the pg_trgm extension that adds special text search features
-&lt;&#x2F;span&gt;&lt;span&gt;            $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;whereRaw&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;SIMILARITY(&amp;quot;name&amp;quot;::text, ?) &amp;gt; 0.07&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, [$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;]);
-&lt;&#x2F;span&gt;&lt;span&gt;        },
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;use &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;void &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;            &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; replace any spaces with the SQL wildcard `%` character
-&lt;&#x2F;span&gt;&lt;span&gt;            $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;likeReady &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Str&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span&gt;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;replace&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39; &amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;append&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;prepend&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;            $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;like&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;likeReady&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;        }
-&lt;&#x2F;span&gt;&lt;span&gt;    )-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;when&lt;&#x2F;span&gt;&lt;span&gt;(
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;empty&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ordering&lt;&#x2F;span&gt;&lt;span&gt;),
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;void &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;            $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;orderBy&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;        },
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;use &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ordering&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;void &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;            $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;q&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;orderBy&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ordering&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;], $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ordering&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;]);
-&lt;&#x2F;span&gt;&lt;span&gt;        }
-&lt;&#x2F;span&gt;&lt;span&gt;    );
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Hopefully this inspires you to find some code and wrap it up to be a little clearer or cleaner.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Bitbucket Weekly Reports Using Make (Integromat)</title>
-        <published>2022-08-06T00:00:00+00:00</published>
-        <updated>2022-08-06T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/"/>
-        <id>https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/">&lt;p&gt;At my job, we like to keep our team updated with all the dev work we do each week. This means we have meetings every Monday to review the work that has happened since the previous week.&lt;&#x2F;p&gt;
-&lt;p&gt;I often like to review the work done over that time frame by looking at the projects git log for all the pull-requests merged during that previous week.&lt;&#x2F;p&gt;
-&lt;p&gt;Now, I could open up the &lt;code&gt;develop&lt;&#x2F;code&gt; branch and run a &lt;code&gt;git shortlog --since &amp;quot;1 week ago&amp;quot;&lt;&#x2F;code&gt; every Monday, but I would much rather automate this task so I don&#x27;t have to remember to do anything and it stays consistent. I can just wake up on Monday and see a pretty little report printed in the project Slack channel.&lt;&#x2F;p&gt;
-&lt;p&gt;The way I accomplished this is using &lt;a href=&quot;https:&#x2F;&#x2F;www.make.com&#x2F;en?pc=jamesdoyle&amp;amp;fromImt=1&quot;&gt;Make.com (formerly Integromat)&lt;&#x2F;a&gt;. This is a &amp;quot;no-code&amp;quot; tool that allows you to use visual programming to build tools and apps.&lt;&#x2F;p&gt;
-&lt;p&gt;Let&#x27;s break down the solution I came up with:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-01.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 01&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-01.png&quot; alt=&quot;Bitbucket integromat make 01&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;With a final output something like this:&lt;&#x2F;p&gt;
-&lt;pre&gt;
-&lt;h5&gt;&lt;strong&gt;BitBucket Reporter  [APP]  9:01 AM&lt;&#x2F;strong&gt;&lt;&#x2F;h5&gt;
-&lt;strong&gt;List of BitBucket PRs since 2022-07-25 [1 of 2]&lt;&#x2F;strong&gt;
-#824 - Feature&#x2F;events [MERGED] by James Doyle
-#825 - Bugfix&#x2F;appointments and invoices [MERGED] by Sr. Developer
-#826 - Feature&#x2F;auto submit changes [MERGED] by Sr. Developer
-#827 - Feature&#x2F;events [MERGED] by James Doyle
-#828 - Fixed: case where missing was not correct [MERGED] by James Doyle
-#829 - Fixed: another issue with the wrong conditions showing up [MERGED] by James Doyle
-#830 - Bugfix&#x2F;appointment and admin notes [MERGED] by Sr. Developer
-#831 - Feature&#x2F;user-profile-header [MERGED] by Jr. Developer
-#832 - Feature&#x2F;user profile treatment plan [OPEN] by Sr. Developer
-#833 - Fixed: loading wrong classes and incorrect state [MERGED] by James Doyle
-&lt;strong&gt;List of BitBucket PRs since 2022-07-25 [2 of 2]&lt;&#x2F;strong&gt;
-#834 - Fix&#x2F;users documents style tweaks [MERGED] by Jr. Developer
-#835 - Feature&#x2F;insurance claims [OPEN] by Jr. Developer
-#836 - Feature&#x2F;forms [MERGED] by James Doyle
-#837 - Bugfix&#x2F;user tickets [OPEN] by Jr. Developer
-&lt;&#x2F;pre&gt;
-&lt;p&gt;Here is the overall solution laid out. As you can see, it wasn&#x27;t as simple as it might seem.&lt;&#x2F;p&gt;
-&lt;p&gt;I will go through the solution step-by-step and explain each node. I will assume you already have Slack and BitBucket connected.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-1&quot;&gt;Step 1&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-02.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 02&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-02.png&quot; alt=&quot;Bitbucket integromat make 02&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;First we need set the schedule to run each Monday. Nothing fancy here. I set it to 9:01 just because I am usually on the computer by then so I will see the channel notification.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-2&quot;&gt;Step 2&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-03.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 03&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-03.png&quot; alt=&quot;Bitbucket integromat make 03&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Here is the reason this is so complicated: the BitBucket API is paginated and there is no way to easily page through the results. So we need to loop through each page from the results and append them to a variable we eventually send to Slack.&lt;&#x2F;p&gt;
-&lt;p&gt;In this request, we ask BitBucket for the &amp;quot;merged&amp;quot; and &amp;quot;open&amp;quot; pull-requests that happened last week. There was no nice way to calculate the previous weeks date, so we have this fun code to get the date of the previous Monday.&lt;&#x2F;p&gt;
-&lt;p&gt;You can copy the text below for the query:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;(state=&amp;quot;merged&amp;quot; OR state=&amp;quot;open&amp;quot;) AND created_on&amp;gt;=&amp;quot;{{formatDate(setDay(parseDate(timestamp - 604800; &amp;quot;X&amp;quot;); &amp;quot;monday&amp;quot;); &amp;quot;YYYY-MM-DD&amp;quot;)}}&amp;quot;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The only reason we run this first request just so we can get the page count that we will then use to create a loop to make the real requests.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-3&quot;&gt;Step 3&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-04.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 04&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-04.png&quot; alt=&quot;Bitbucket integromat make 04&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Here is the loop that we use to iterate over the pages in the results. We check the page size and make sure we repeat the right amount of times.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-04a.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 04 A&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-04a.png&quot; alt=&quot;Bitbucket integromat make 04 A&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Our first route (the top one) is the condition that the loop continues to run in. You can see the condition is a basic for loop that repeats for each page in the loop.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-4&quot;&gt;Step 4&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-05.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 05&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-05.png&quot; alt=&quot;Bitbucket integromat make 05&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Here is the request that happens within the loop. It is identical to the first one but we have a page parameter so that we can get each page of the results.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-5&quot;&gt;Step 5&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-06.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 06&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-06.png&quot; alt=&quot;Bitbucket integromat make 06&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;All we are doing in this node is sorting the pull requests by their title. We do this because the PR number is in the title and not sorting it would look off.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-6&quot;&gt;Step 6&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-07.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 07&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-07.png&quot; alt=&quot;Bitbucket integromat make 07&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Here we are defining the string template for the PR titles that will go into our bulleted list. The output of this will be a single variable that contains all the row strings.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-7&quot;&gt;Step 7&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-08.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 08&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-08.png&quot; alt=&quot;Bitbucket integromat make 08&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Nothing fancy here. Just getting the variable the we will be pushing the results of our text aggregation to.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-8&quot;&gt;Step 8&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-09.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 09&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-09.png&quot; alt=&quot;Bitbucket integromat make 09&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Here we are updating our actual results that will be sent to Slack. We break up the list with a nice header that is chunked by page.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the code in the box for setting the variable:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;{{21.results}}{{newline}}*List of Project PRs since {{formatDate(setDay(parseDate(timestamp - 604800; &amp;quot;X&amp;quot;); &amp;quot;monday&amp;quot;); &amp;quot;YYYY-MM-DD&amp;quot;)}} [{{13.i}} of {{ceil(1.body.size &#x2F; 1.body.pagelen)}}]*{{newline}}{{11.text}}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;step-9&quot;&gt;Step 9&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-10.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 10&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-10.png&quot; alt=&quot;Bitbucket integromat make 10&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Here is the other condition in the router that will run at the end of the loop. It checks that the loop variable is larger that the page count.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-10a.png&quot; target=&quot;_blank&quot; title=&quot;Bitbucket integromat make 10 A&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-10a.png&quot; alt=&quot;Bitbucket integromat make 10 A&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Our first step in the end case is to get the variable. We are passing this to the Slack body.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;step-10&quot;&gt;Step 10&lt;&#x2F;h3&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;bb-integromat-make-11.png&quot; target=&quot;_blank&quot; title=&quot;bb integromat make 11&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;bb-integromat-make-11.png&quot; alt=&quot;bb integromat make 11&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Our last step is to just shoot off that text to Slack. We have already formatted the text we are sending so we just slap it in.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;all-done&quot;&gt;All Done!&lt;&#x2F;h3&gt;
-&lt;p&gt;That is it! Hopefully this helps anyone that is trying to use the BitBucket in &lt;a href=&quot;https:&#x2F;&#x2F;www.make.com&#x2F;en?pc=jamesdoyle&amp;amp;fromImt=1&quot;&gt;Make.com (Integromat)&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Autocomplete TailwindCSS In Custom Attributes&#x2F;Strings</title>
-        <published>2022-06-06T00:00:00+00:00</published>
-        <updated>2022-06-06T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/"/>
-        <id>https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/">&lt;p&gt;If you are using &lt;a href=&quot;https:&#x2F;&#x2F;tailwindcss.com&#x2F;&quot;&gt;TailwindCSS&lt;&#x2F;a&gt; along with &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;tailwindlabs&#x2F;tailwindcss-intellisense&quot;&gt;their extension for completing tailwind classes&lt;&#x2F;a&gt; but you are using styled components, custom attributes&#x2F;props for class names, or packages like &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ben-rogerson&#x2F;twin.macro&quot;&gt;twin.macro&lt;&#x2F;a&gt;, then autocomplete for class names might not work properly for you.&lt;&#x2F;p&gt;
-&lt;p&gt;There is a setting inside the language server for tailwind that let&#x27;s you provide a custom regex for when&#x2F;where you want the tailwind autocomplete to work. By default it works inside &lt;code&gt;class&lt;&#x2F;code&gt; and &lt;code&gt;className&lt;&#x2F;code&gt;. But what if we want to change that? For, say, a tagged template literal?&lt;&#x2F;p&gt;
-&lt;p&gt;You can use the following config for various types&#x2F;styles of solutions for writing tailwind classes:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;tailwindCSS.experimental.classRegex&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [
-&lt;&#x2F;span&gt;&lt;span&gt;  [&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;classnames&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(([^)]*)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;#39;([^&amp;#39;]*)&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;],
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;class=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;([^&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;]*)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; &amp;lt;div class=&amp;quot;...&amp;quot; &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;tw`([^`]*)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; tw`...`
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;tw=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;([^&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;]*)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; &amp;lt;div tw=&amp;quot;...&amp;quot; &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;tw={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;([^&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}]*)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; &amp;lt;div tw={&amp;quot;...&amp;quot;} &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;tw&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;w+`([^`]*)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; tw.xxx`...`
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;tw&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(.*?&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)`([^`]*)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; tw(Component)`...`
-&lt;&#x2F;span&gt;&lt;span&gt;],
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The above rules are what I am using with React and the twin.macro package. I can complete under various &lt;code&gt;tw&lt;&#x2F;code&gt; props or tagged templates which is exactly what I need for the project I&#x27;m on.&lt;&#x2F;p&gt;
-&lt;p&gt;If you would like to see some of the other use cases for this setting, &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;tailwindlabs&#x2F;tailwindcss-intellisense&#x2F;search?q=classRegex&amp;amp;type=issues&quot;&gt;you can browse the issues on Github&lt;&#x2F;a&gt;. As you can see, it is a common feature that is reached for when you need to customize the location of the autocomplete trigger.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Setup A Raspberry Pi with PHP And Lighttpd</title>
-        <published>2022-06-05T00:00:00+00:00</published>
-        <updated>2022-06-05T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/"/>
-        <id>https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/">&lt;p&gt;I recently got a Raspberry Pi model 4+. I&#x27;m using it to &lt;a href=&quot;https:&#x2F;&#x2F;pimylifeup.com&#x2F;raspberrypi-minidlna&#x2F;&quot;&gt;run a minidlna server&lt;&#x2F;a&gt; that loads music and movies from an old external hard drive that I have. On top of that, I wanted to run a local web server so that I can write scripts and pages that I can access locally on my network without having to have my laptop open and running.&lt;&#x2F;p&gt;
-&lt;p&gt;I wanted to setup &lt;code&gt;lighttpd&lt;&#x2F;code&gt; as it is much more efficient than the default installed &lt;code&gt;apache2&lt;&#x2F;code&gt;. Since I&#x27;m already running &lt;code&gt;minidlna&lt;&#x2F;code&gt;, I wanted a web server that was more performant and used less memory&#x2F;resources.&lt;&#x2F;p&gt;
-&lt;p&gt;Finally, I wanted the latest PHP installed given I use it a lot in my day job and it will be great for writing small websites that are only ever accessed through my local network. Unfortunately, the default installed PHP version is quite a bit behind and you need to setup new sources in order to install the latest version of PHP.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is a short list of all the steps you need to setup a newer version of PHP 8.1 as well as the &lt;code&gt;lighttpd&lt;&#x2F;code&gt; server.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;instructions&quot;&gt;Instructions&lt;&#x2F;h4&gt;
-&lt;p&gt;&lt;em&gt;These instructions assume you&#x27;re using the default debian-based raspberry pi operating system!&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Update the local packages already installed:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; apt-get update
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Install the dependencies needed to add the additional services:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; apt-get install lsb-release apt-transport-https ca-certificates
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Add the repository for installing the latest version of PHP:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; wget&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -O&lt;&#x2F;span&gt;&lt;span&gt; &#x2F;etc&#x2F;apt&#x2F;trusted.gpg.d&#x2F;php.gpg https:&#x2F;&#x2F;origin.sury.org&#x2F;php&#x2F;apt.gpg
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;deb https:&#x2F;&#x2F;packages.sury.org&#x2F;php&#x2F; &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;lsb_release -sc&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;) main&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; tee &#x2F;etc&#x2F;apt&#x2F;sources.list.d&#x2F;php.list
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now we can install all the PHP packages we will need for basic PHP applications:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; apt-get update
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; apt-get install&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -y&lt;&#x2F;span&gt;&lt;span&gt; php8.1 php8.1-cli php8.1-cgi php8.1-intl php8.1-zip
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;If you need additional PHP extensions then the above command is where you would add those in.&lt;&#x2F;p&gt;
-&lt;p&gt;Since we now have the latest PHP version, we can setup &lt;code&gt;composer&lt;&#x2F;code&gt;. The &lt;code&gt;sha384&lt;&#x2F;code&gt; code may different for your installation based on whatever version is out when you are following these instructions. &lt;a href=&quot;https:&#x2F;&#x2F;getcomposer.org&#x2F;download&#x2F;&quot;&gt;You can find the latest download&#x2F;install instructions on the Composer download page&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;php -r &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;copy(&amp;#39;https:&#x2F;&#x2F;getcomposer.org&#x2F;installer&amp;#39;, &amp;#39;composer-setup.php&amp;#39;);&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;php -r &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;if (hash_file(&amp;#39;sha384&amp;#39;, &amp;#39;composer-setup.php&amp;#39;) === &amp;#39;55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae&amp;#39;) { echo &amp;#39;Installer verified&amp;#39;; } else { echo &amp;#39;Installer corrupt&amp;#39;; unlink(&amp;#39;composer-setup.php&amp;#39;); } echo PHP_EOL;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;php&lt;&#x2F;span&gt;&lt;span&gt; composer-setup.php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; mv composer.phar &#x2F;usr&#x2F;local&#x2F;bin&#x2F;composer
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;php -r &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;unlink(&amp;#39;composer-setup.php&amp;#39;);&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We can remove &lt;code&gt;apache2&lt;&#x2F;code&gt;, given we are not going to use it:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; systemctl stop apache2.service
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; apt remove apache2
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The last thing to install will be &lt;code&gt;lighttpd&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; apt-get install lighttpd lighttpd-doc
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We also want to enable the PHP modules inside &lt;code&gt;lighttpd&lt;&#x2F;code&gt; so that we can process &lt;code&gt;.php&lt;&#x2F;code&gt; files:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; lighttpd-enable-mod fastcgi fastcgi-php
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;In order for the web server to properly run, serve our files, and store logs and caches, we need to make sure the folders have the right ownership rules:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; chown&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -R&lt;&#x2F;span&gt;&lt;span&gt; www-data:www-data &#x2F;var&#x2F;log&#x2F;lighttpd
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; chown&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -R&lt;&#x2F;span&gt;&lt;span&gt; www-data:www-data &#x2F;var&#x2F;cache&#x2F;lighttpd
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; chown&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -R&lt;&#x2F;span&gt;&lt;span&gt; www-data:www-data &#x2F;var&#x2F;www&#x2F;html
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;To test out the server once we are finished, we can setup this simple project that emulates the apache directory listing module. This will just list everything in our &lt;code&gt;&#x2F;var&#x2F;www&#x2F;html&lt;&#x2F;code&gt; folder in a nice display:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; clone https:&#x2F;&#x2F;github.com&#x2F;halgatewood&#x2F;file-directory-list &#x2F;var&#x2F;www&#x2F;html&#x2F;listing
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;If you are looking for a more efficient directory browser, or you don&#x27;t want to use PHP for this, you can &lt;a href=&quot;https:&#x2F;&#x2F;redmine.lighttpd.net&#x2F;projects&#x2F;lighttpd&#x2F;wiki&#x2F;Docs_ModDirlisting&quot;&gt;use the built-in &lt;code&gt;dirlisting&lt;&#x2F;code&gt; module&lt;&#x2F;a&gt; that comes with &lt;code&gt;lighttpd&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;We can now make sure the &lt;code&gt;lighttpd&lt;&#x2F;code&gt; service is running so it will always start when we restart our pi:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sudo&lt;&#x2F;span&gt;&lt;span&gt; systemctl start lighttpd.service
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;If you want to test the server on the command line, you can just &lt;code&gt;curl&lt;&#x2F;code&gt; your localhost and see what happens. You should get the source code for the listing page we installed:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;curl&lt;&#x2F;span&gt;&lt;span&gt; http:&#x2F;&#x2F;localhost&#x2F;listing
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Done! That should be all you need to have PHP 8.1 and a light weight web server setup!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Vue stateful form component</title>
-        <published>2021-10-24T00:00:00+00:00</published>
-        <updated>2021-10-24T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/vue-stateful-form-component/"/>
-        <id>https://ohdoylerules.com/snippets/vue-stateful-form-component/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/vue-stateful-form-component/">&lt;p&gt;Recently, I needed to create a app that could recreate a form from static JSON and then fill it with values from another source. This was pretty difficult as storing a form in JSON is very hard. You can&#x27;t add handlers or events given you only can store string, numbers, booleans, and arrays. No functions.&lt;&#x2F;p&gt;
-&lt;p&gt;I ended up coming up with &lt;a href=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;vue-stateful-form&#x2F;&quot;&gt;a component that uses a render function in order to recreate the form stored in JSON&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;vue-stateful-form-demo.gif&quot; target=&quot;_blank&quot; &gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;vue-stateful-form-demo.gif&quot; width=&quot;720&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;h4 id=&quot;features&quot;&gt;Features&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  uses event delegation from the top level &lt;code&gt;form&lt;&#x2F;code&gt; element&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  2 way binding with proper &lt;code&gt;v-model&lt;&#x2F;code&gt; support&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  unstyled but includes lots of classes to target&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  built-in debounce function&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  still allows &lt;code&gt;submit&lt;&#x2F;code&gt; handler&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  encodes &amp;quot;multiple&amp;quot; inputs (&lt;code&gt;select[multiple]&lt;&#x2F;code&gt;, &lt;code&gt;radio&lt;&#x2F;code&gt;, &lt;code&gt;checkbox&lt;&#x2F;code&gt;)&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  no hacky &amp;quot;mounted&amp;quot; calls&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  supports most input elements (no &lt;code&gt;file&lt;&#x2F;code&gt;&#x2F;&lt;code&gt;image&lt;&#x2F;code&gt; support)&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  sets &lt;code&gt;ref&lt;&#x2F;code&gt; for each input automatically&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; checked readonly &#x2F;&gt;  supports custom components and passing props&#x2F;attrs&lt;&#x2F;label&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;I made a whole site on this and posted the code to NPM. It currently only works in Vue 2. So keep that in mind. You can &lt;a href=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;vue-stateful-form&#x2F;&quot;&gt;find the source code and instructions here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Lodash i18n (translation) function</title>
-        <published>2021-10-22T00:00:00+00:00</published>
-        <updated>2021-10-22T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/lodash-translation-function/"/>
-        <id>https://ohdoylerules.com/snippets/lodash-translation-function/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/lodash-translation-function/">&lt;p&gt;One of the great things about &lt;a href=&quot;https:&#x2F;&#x2F;lodash.com&#x2F;&quot;&gt;lodash&lt;&#x2F;a&gt; is that it gives you all the building blocks to create some really powerful functions.&lt;&#x2F;p&gt;
-&lt;p&gt;I was working on a site that needed to use dynamic translations. The way this is done today is usually through a function that is loaded in your components and called with a key that then gets mapped to whatever language you are using.&lt;&#x2F;p&gt;
-&lt;p&gt;You can pass in variables to the function in order to translate sentences that include placeholders. For example, you might want to have a welcome message like &amp;quot;Hello {name_of_user}!&amp;quot;. Pretty common use case as you can imagine.&lt;&#x2F;p&gt;
-&lt;p&gt;I managed to get a simple version of an &lt;code&gt;intl&lt;&#x2F;code&gt; function working by using a combination of &lt;code&gt;get&lt;&#x2F;code&gt;, &lt;code&gt;template&lt;&#x2F;code&gt;, and &lt;code&gt;memoize&lt;&#x2F;code&gt; functions in lodash.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;d00e06a5f4963a539e3aa0b2d5283d11.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;d00e06a5f4963a539e3aa0b2d5283d11.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;What we are doing here is using first getting a value from our translation file. We use the &lt;code&gt;template&lt;&#x2F;code&gt; function to parse the value we find from our translation function using a pattern that looks for single words wrapped with curly braces. Like &lt;code&gt;{this}&lt;&#x2F;code&gt;. We can then pass in any variables we wanted to replace in that string. Finally, we use &lt;code&gt;memoize&lt;&#x2F;code&gt; to avoid recompiling the template on each additional call. This will just return the cached results of any translations instead of grabbing the value and parsing the string again.&lt;&#x2F;p&gt;
-&lt;p&gt;If you find yourself needing a simple translation function, this could be a good option if you already have lodash in your project.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Lodash memoize with a timeout</title>
-        <published>2021-10-20T00:00:00+00:00</published>
-        <updated>2021-10-20T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/lodash-memo-with-timeout/"/>
-        <id>https://ohdoylerules.com/snippets/lodash-memo-with-timeout/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/lodash-memo-with-timeout/">&lt;p&gt;If you are familiar with &lt;a href=&quot;https:&#x2F;&#x2F;lodash.com&#x2F;docs&#x2F;4.17.15&quot;&gt;lodash&lt;&#x2F;a&gt; you may also be familiar with one of the very handy functions called &lt;code&gt;[memoize](https:&#x2F;&#x2F;lodash.com&#x2F;docs&#x2F;4.17.15#memoize)&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;The definition of &lt;code&gt;memoize&lt;&#x2F;code&gt; on the lodash site is quite verbose. So I will use the &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Memoization&quot;&gt;definition on wikipedia&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;In computing, &amp;quot;memoization&amp;quot; or &amp;quot;memoisation&amp;quot; is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;The default &lt;code&gt;memo&lt;&#x2F;code&gt; function in lodash uses a local Map to cache the results of each call. This means the results of the calls to &lt;code&gt;memo&lt;&#x2F;code&gt; will be cached for the entire browser session. The way you would clear the cache is to refresh or trigger a full navigation.&lt;&#x2F;p&gt;
-&lt;p&gt;A function that returns the same result given the same input, is called a &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Pure_function&quot;&gt;pure function&lt;&#x2F;a&gt;. So if you have a &amp;quot;pure function&amp;quot; that gets called a lot with the same arguments, and should have the same output given the same arguments, then this is a perfect candidate for memoization. Of course, it is perfectly fine to reach for memoization in order to keep things like expensive HTTP requests from being repeated.&lt;&#x2F;p&gt;
-&lt;p&gt;But is a &amp;quot;session&amp;quot; based cache really the best cache for &lt;code&gt;memo&lt;&#x2F;code&gt;? Personally, I think that a time-based caching mechanism is better. What I mean is that the cache will only live for a specific amount of time and then expire.&lt;&#x2F;p&gt;
-&lt;p&gt;Imagine a case where you just fetched a users account from your API. If for some reason your code calls that endpoint again just a few seconds later, is it worth redoing the request or should you return cached results given you just called that endpoint earlier?&lt;&#x2F;p&gt;
-&lt;p&gt;If you are using the default cache, the request will never be run again unless you refresh. But there may have been changes to the results of the call but you can&#x27;t rerun it. This is where a TTL cache comes in.&lt;&#x2F;p&gt;
-&lt;p&gt;TTL (time to live) is the amount of time that needs to elapse before the cache needs to be refreshed. If you are familiar with the HTTP protocol, you may have come across this term when learning about cache headers.&lt;&#x2F;p&gt;
-&lt;p&gt;So how do you implement a custom cache backend for lodash &lt;code&gt;memoize&lt;&#x2F;code&gt;? Easy! The &lt;code&gt;memoize&lt;&#x2F;code&gt; function allows you to write your own resolver function that lets you decide when to fetch from the cache or run the function again.&lt;&#x2F;p&gt;
-&lt;p&gt;I&#x27;ve done the work for you and made a simple version in TypeScript that uses the current minute as a tracker for when the last call was:&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;2a7428e6e740279f8cc7fbd2dd7b4f75.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;2a7428e6e740279f8cc7fbd2dd7b4f75.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;You can see in this function that we take in the arguments and add a time to the end. We then serialize that object as JSON and use that as our cache key. When lodash runs our new &lt;code&gt;memo&lt;&#x2F;code&gt; function, it will first compare the cached keys and see if they are different. If they are, then the function will actually run and the cached results will not be used and instead our original function will run, and the result of that run, will be cached. Subsequent calls repeat the whole process.&lt;&#x2F;p&gt;
-&lt;p&gt;In this case, we only cache the results for one minute. So any calls to our new &lt;code&gt;memo&lt;&#x2F;code&gt; function that are over a minute old will run. This will allow some inefficient code that calls an endpoint too often to only make those calls if at least a minute has passed.&lt;&#x2F;p&gt;
-&lt;p&gt;In this case, our new &lt;code&gt;memo&lt;&#x2F;code&gt; is almost like the &lt;code&gt;throttle&lt;&#x2F;code&gt; function in lodash except we get the results back when we call our &lt;code&gt;memo&lt;&#x2F;code&gt;. But if you need to control the mechanism of caching (maybe you want to use localstorage, the URL, or global state) then you can write your own &lt;code&gt;memoize&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Fastmod Codemod For Refactoring</title>
-        <published>2021-02-06T00:00:00+00:00</published>
-        <updated>2021-02-06T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/"/>
-        <id>https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/">&lt;p&gt;If you have ever encounter a big refactor, you were probably dreading the steps it would take to get all the changes done. You have to find patterns, replace them, remove old code, rename variables, so much work! Well, like most things in the development world, there are tools to help you do this. Yes, you can use find-and-replace, but that approach is very naïve (as in simple) and doesn&#x27;t take in some of the more nuanced cases that you will come across.&lt;&#x2F;p&gt;
-&lt;p&gt;The tool that I have been using for the last couple of years is &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;facebookincubator&#x2F;fastmod&quot;&gt;fastmod&lt;&#x2F;a&gt;. &lt;code&gt;fastmod&lt;&#x2F;code&gt; is a flavour of &lt;code&gt;codemod&lt;&#x2F;code&gt; but written in Rust - so it has to be cool right? Here is a description from the &lt;code&gt;codemod&lt;&#x2F;code&gt; repo:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;codemod is a tool&#x2F;library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;What you do is write a &amp;quot;match pattern&amp;quot; and then a &amp;quot;replace pattern&amp;quot;. When you run the tool you get a prompt for each match and you can decide what you want to do with the proposed changes. This is a lot like &lt;code&gt;git add -p&lt;&#x2F;code&gt; (which is also a great trick) where you only accept the changes you know are valid.&lt;&#x2F;p&gt;
-&lt;p&gt;One of the best things about this tool is how it provides the interface to the changes you need to apply:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-filter files by extension&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-use regex to create matches&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-named matches so they can be reordered&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-preview of the changes before you commit them&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-ability to accept or decline any single change&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-ability to edit the changes using &lt;code&gt;$EDITOR&lt;&#x2F;code&gt; (like &lt;code&gt;git commit --verbose&lt;&#x2F;code&gt;)&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-accept all changes without previews (&amp;quot;fast mode&amp;quot;)&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;&lt;strong&gt;Help With Regex&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;If you are terrible at written regex patterns, you&#x27;re not alone. There are lots of people who despise regex but it isn&#x27;t going anyway. I actually made a conscious effort a few years ago to acquire a better understanding of how regex works and what the patterns and special characters do. I used &lt;a href=&quot;https:&#x2F;&#x2F;regexr.com&#x2F;&quot;&gt;this tool call regexr&lt;&#x2F;a&gt; to help practice as well as learn new patterns. Check it out if you need help building and testing regex patterns.&lt;&#x2F;p&gt;
-&lt;p&gt;Like most purpose-built tools, there is some learning curve to finding how to best use the interface provided. You really need to consider your match strategy and your replace strategy. Let&#x27;s write some examples based on some real world examples I&#x27;ve come across.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;css&quot;&gt;CSS&lt;&#x2F;h4&gt;
-&lt;p&gt;Here we have a CSS example for a button component. This component can be grouped or have an icon inside it. The naming of the component in CSS is kinda redundant.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;button-group-component &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  display: flex;
-&lt;&#x2F;span&gt;&lt;span&gt;  align-items: center;
-&lt;&#x2F;span&gt;&lt;span&gt;  justify-content: space-between;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;button-component &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  color: white;
-&lt;&#x2F;span&gt;&lt;span&gt;  background-color: black;
-&lt;&#x2F;span&gt;&lt;span&gt;  display: inline-block;
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1rem 2rem&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;button-component &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;button-icon-component &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;svg &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  fill: currentColor;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Let&#x27;s remove the &lt;code&gt;-component&lt;&#x2F;code&gt; part of the CSS declaration. We don&#x27;t need it. So we are going to turn &lt;code&gt;.button-group-component&lt;&#x2F;code&gt; into &lt;code&gt;.button-group&lt;&#x2F;code&gt; and so on for the other 2 class declarations. All we need to do is find &lt;code&gt;-component&lt;&#x2F;code&gt; and replace it with nothing&#x2F;null&#x2F;empty string.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;fastmod -m --extensions&lt;&#x2F;span&gt;&lt;span&gt; css &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(\-component)&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; &amp;#39;&amp;#39;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Running the above code on in our target folder will prompt us with this:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;.&#x2F;example.css:1
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;- .button-group-component {
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+ .button-group {
-&lt;&#x2F;span&gt;&lt;span&gt;    display: flex;
-&lt;&#x2F;span&gt;&lt;span&gt;    align-items: center;
-&lt;&#x2F;span&gt;&lt;span&gt;Accept change (y = yes [default], n = no, e = edit, A = yes to all, E = yes+edit, q = quit)?
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here you can see all the options for the code that is going to be changed as well as a nice diff too. If we move from left to right in the options we get the following choices:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;code&gt;y&lt;&#x2F;code&gt; or &lt;code&gt;enter&lt;&#x2F;code&gt; accepts the changes being shown&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;n&lt;&#x2F;code&gt; will not change anything and will go to the next change&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;e&lt;&#x2F;code&gt; will open your &lt;code&gt;$EDITOR&lt;&#x2F;code&gt; &lt;em&gt;without&lt;&#x2F;em&gt; any changes applied&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;A&lt;&#x2F;code&gt; will accept this change and all of the future changes with reprompting you&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;E&lt;&#x2F;code&gt; will open your &lt;code&gt;$EDITOR&lt;&#x2F;code&gt; &lt;em&gt;with&lt;&#x2F;em&gt; any changes applied&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;q&lt;&#x2F;code&gt; will no accept the changes and stop the process&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;In this case we can hit &lt;code&gt;enter&lt;&#x2F;code&gt; for each change. We will be prompted 4 times: once for each occurrence of the string &lt;code&gt;-component&lt;&#x2F;code&gt; or we can skip all that and just hit &lt;code&gt;A&lt;&#x2F;code&gt; and everything will be changed.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;webpack-magic-comments&quot;&gt;Webpack Magic Comments&lt;&#x2F;h4&gt;
-&lt;p&gt;Recently I was working on a Vue project that had a lot of components in it. I wanted to start using &lt;a href=&quot;https:&#x2F;&#x2F;router.vuejs.org&#x2F;guide&#x2F;advanced&#x2F;lazy-loading.html#grouping-components-in-the-same-chunk&quot;&gt;webpack chunking&lt;&#x2F;a&gt; in order to split the components up and have single chunks for each component instead of them being wrapped up together. In order to do that, I need to rewrite all my &lt;code&gt;import&lt;&#x2F;code&gt; statements to use &amp;quot;dynamic imports&amp;quot; with a special magic comment that webpack picks up.&lt;&#x2F;p&gt;
-&lt;p&gt;You can see the example below:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# old code: `import MyComponent from &amp;#39;Components&#x2F;MyComponent.vue&amp;#39;;`
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# new code: `const MyComponent = () =&amp;gt; import(&#x2F;* webpackChunkName: &amp;quot;MyComponent&amp;quot; *&#x2F; &amp;#39;Components&#x2F;MyComponent.vue&amp;#39;);`
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# note: you may need to reorder your imports when using a dynamic import
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;fastmod -m -d&lt;&#x2F;span&gt;&lt;span&gt; .&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; --extensions&lt;&#x2F;span&gt;&lt;span&gt; vue \
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;import (.*?) from \&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;(.*?)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;  &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;} = () =&amp;gt; import(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;&#x2F;*&lt;&#x2F;span&gt;&lt;span&gt; webpackChunkName: &amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; *&#x2F; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;);&amp;#39;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here you can see the snippet I wrote to do the refactor. The great thing about using &lt;code&gt;fastmod&lt;&#x2F;code&gt; over find-and-replace, is that it allowed me to accept or deny the changes. I didn&#x27;t want all the components updated this way. Especially imports that were not Vue components. So this approach was ideal.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;more-use-cases&quot;&gt;More Use Cases&lt;&#x2F;h4&gt;
-&lt;p&gt;Those are two decent examples but I have used this tool quite a lot for refactoring code. Here are some more examples of what I used it for:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;add&#x2F;remove classes in HTML&lt;&#x2F;li&gt;
-&lt;li&gt;rename bad variable names on multiple projects&lt;&#x2F;li&gt;
-&lt;li&gt;quickly fix the misspelling of various words in multiple projects&lt;&#x2F;li&gt;
-&lt;li&gt;ran a replace on an exported SQL database backup to change some values in the data (faster than running a query)&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;a94542b8ef6f07a689f23698424d1763&quot;&gt;refactor &lt;code&gt;isset&lt;&#x2F;code&gt; into &lt;code&gt;array_get&lt;&#x2F;code&gt;&lt;&#x2F;a&gt; on a Laravel (PHP) project&lt;&#x2F;li&gt;
-&lt;li&gt;merge down multiple &lt;code&gt;use&lt;&#x2F;code&gt; statement in PHP to a single &lt;code&gt;use&lt;&#x2F;code&gt; line&lt;&#x2F;li&gt;
-&lt;li&gt;rewrite &lt;code&gt;{{ var }}&lt;&#x2F;code&gt; interpolation to &lt;code&gt;v-text=&amp;quot;var&amp;quot;&lt;&#x2F;code&gt; directives in a Vue project&lt;&#x2F;li&gt;
-&lt;li&gt;replace imports with other versions&lt;&#x2F;li&gt;
-&lt;li&gt;upgrade old code to new methods or APIs&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;As you can probably already tell, the possibilities are endless! I have used this on database exports and even CSV files. It is a much nicer alternative to find-and-replace. Best of all? It&#x27;s editor agnostic. So you can use it with any other tools.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Vue Omnibar Component</title>
-        <published>2020-12-05T00:00:00+00:00</published>
-        <updated>2020-12-05T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/vue-omnibar-component/"/>
-        <id>https://ohdoylerules.com/web/vue-omnibar-component/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/vue-omnibar-component/">&lt;p&gt;I&#x27;m working on a project right now that requires us to have a search modal. The feature is actually inspired by the &lt;a href=&quot;https:&#x2F;&#x2F;www.notion.so&#x2F;Searching-with-Quick-Find-af945b6e69b64437afba2d143e4b546f&quot;&gt;&amp;quot;Quick Search&amp;quot; experience in Notion&lt;&#x2F;a&gt;. I looked around for a component that was already created that would do this for me. I couldn&#x27;t find one, so I wrote my own!&lt;&#x2F;p&gt;
-&lt;p&gt;This component allows you to create modal popups that emulate omnibar, command palette, open anywhere, or other &amp;quot;search and act&amp;quot; functions&#x2F;features. It is really simple and uses slots to make it easier to customize. It comes with some basic styling so you don&#x27;t have to fight with it too much.&lt;&#x2F;p&gt;
-&lt;p&gt;One of the cool things about the search box in the modal is that it is using &lt;a href=&quot;https:&#x2F;&#x2F;fusejs.io&#x2F;&quot;&gt;Fuse.js&lt;&#x2F;a&gt; for the filtering part. This means you can search complex objects really easy. You can even rank-order properties that are being searched! Pretty slick, right?&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;demo&quot;&gt;Demo&lt;&#x2F;h2&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;vue-omnibar&quot; target=&quot;_blank&quot; title=&quot;demo of the omnibar modal&quot;&gt;&lt;img src=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;vue-omnibar&#x2F;demo.gif&quot; alt=&quot;demo of the omnibar modal&quot;&gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Check out the &lt;a href=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;vue-omnibar&quot;&gt;website for the component&lt;&#x2F;a&gt; in order to view the demo.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;features&quot;&gt;Features&lt;&#x2F;h2&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-built-in filtering using &lt;a href=&quot;https:&#x2F;&#x2F;fusejs.io&#x2F;&quot;&gt;Fuse.js&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-custom key combo support&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-listens for &lt;code&gt;esc&lt;&#x2F;code&gt; key&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-bring your own styling (basic styles included)&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-arrow key support&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-uses slots for best flexibility&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot; checked=&quot;&quot;&#x2F;&gt;
-&amp;quot;off-click&amp;quot; closes the modal&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h2 id=&quot;installation&quot;&gt;Installation&lt;&#x2F;h2&gt;
-&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;npm&lt;&#x2F;span&gt;&lt;span&gt; install vue-omnibar
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;global-usage&quot;&gt;Global Usage&lt;&#x2F;h3&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Vue &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;vue&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Omnibar &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;vue-omnibar&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Vue&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;omnibar&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Omnibar&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;in-single-file-components&quot;&gt;In Single File Components&lt;&#x2F;h3&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Omnibar &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;vue-omnibar&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;  components: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Omnibar&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;To learn more, check out the &lt;a href=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;vue-omnibar&quot;&gt;website for the component&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Vue Toggle Component</title>
-        <published>2020-12-04T00:00:00+00:00</published>
-        <updated>2020-12-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/vue-toggle-component/"/>
-        <id>https://ohdoylerules.com/web/vue-toggle-component/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/vue-toggle-component/">&lt;p&gt;Have you ever created a switch component that just shows and hides an element? How about an accordion? Or maybe a slider? If you distill down these components into their core offering, it is really just a simple state toggle that is either a &lt;code&gt;boolean&lt;&#x2F;code&gt; or a index&#x2F;key value that is being used.&lt;&#x2F;p&gt;
-&lt;p&gt;I created this component because it is something I use all the time. I wanted to share it with other people so I released it as a package. The state can be either a &lt;code&gt;boolean&lt;&#x2F;code&gt; or a &lt;code&gt;string&lt;&#x2F;code&gt;. This means you can use it to create experiences that are not just on&#x2F;off and show&#x2F;hide.&lt;&#x2F;p&gt;
-&lt;p&gt;With a simple toggle, you can build almost any UI experience. Think about experiences like show&#x2F;hide, accordions, nested menus, and even sliders, they mostly revolve around a single piece of state.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;demo&quot;&gt;Demo&lt;&#x2F;h2&gt;
-&lt;p&gt;Check out &lt;a href=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;vue-toggle&quot;&gt;the website for demos&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;installation&quot;&gt;Installation&lt;&#x2F;h2&gt;
-&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;npm&lt;&#x2F;span&gt;&lt;span&gt; install&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -S&lt;&#x2F;span&gt;&lt;span&gt; vue-ui-toggle
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Toggle &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;vue-ui-toggle&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; es5&#x2F;node
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; import Toggle from &amp;#39;vue-ui-toggle&amp;#39;; &#x2F;&#x2F; es6
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Vue&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;toggle&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Toggle&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Toggle &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;vue-ui-toggle&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;  components: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Toggle&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;To learn more, check out the &lt;a href=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;vue-toggle&quot;&gt;website for the component&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Tailwind Screens In JS</title>
-        <published>2020-09-05T00:00:00+00:00</published>
-        <updated>2020-09-05T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/tailwind-screens-in-js/"/>
-        <id>https://ohdoylerules.com/snippets/tailwind-screens-in-js/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/tailwind-screens-in-js/">&lt;p&gt;If you haven&#x27;t heard of &lt;a href=&quot;https:&#x2F;&#x2F;tailwindcss.com&#x2F;&quot;&gt;Tailwindcss&lt;&#x2F;a&gt; before, what is going on? It is the hot new CSS framework for building custom designs.&lt;&#x2F;p&gt;
-&lt;p&gt;From the site:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;One of the things Tailwindcss gives you is a configuration file (named &lt;code&gt;tailwind.config.js&lt;&#x2F;code&gt;) for setting the configuration of the output CSS. This may be a little strange to people who have never used this before but there are some advantages. The output CSS can be configured based on the build environment or your own specifications.&lt;&#x2F;p&gt;
-&lt;p&gt;One of the configuration settings is for what screen sizes and breakpoints are supported. One of the benefits of these values being defined in JS is that you can then use them in JS as well. You can &lt;a href=&quot;https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;breakpoints&quot;&gt;read more about them in the docs&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;So why might you want to use these values in JS? Well, if you are building components that have conditional content based on the screen size, having access to these values can be super handy. You can check the screen size and show&#x2F;hide different content, conditional load different sizes elements, or even disable an entire swath of features&#x2F;functionality. All while keep your JS code in sync with your CSS code. You can reuse the variable names.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the code I used to accomplish this:&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;c1306ace82cfe9e22a4ecfff13c6595b.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;c1306ace82cfe9e22a4ecfff13c6595b.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;You can use the function like so:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; es6
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; import screenIs from &amp;#39;screenIs&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; commonjs
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;screenIs &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;screenIs&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;screenIs&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;md&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; we are on an &amp;quot;md&amp;quot; screen...
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span&gt;{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;md&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;lg &lt;&#x2F;span&gt;&lt;span&gt;} = &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;screenIs&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;md &lt;&#x2F;span&gt;&lt;span&gt;|| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;lg&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; we are on an &amp;quot;md&amp;quot; or an &amp;quot;lg&amp;quot; screen...
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Basically, we load up the config, use &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Window&#x2F;matchMedia&quot;&gt;&lt;code&gt;window.matchMedia&lt;&#x2F;code&gt;&lt;&#x2F;a&gt; to test all the media queries in the config, then check if the key we pass in matches an existing key in our config and return the results.&lt;&#x2F;p&gt;
-&lt;p&gt;Pretty simple but a nice way to share the config into your JS code.&lt;&#x2F;p&gt;
-&lt;p&gt;If you are familiar with Tailwind, you might be asking, &lt;em&gt;why not just use CSS with md:show and md:hide?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;While that does work perfectly for visual content, it does not stop the browser from creating the DOM for the hidden content or stop and event listeners from being created or removed. If you are using the detection of the screen in JS, you can make sure to not render or add events for code that is not used. The opposite is true for when the screen changes and you need to cleanup any listeners or DOM elements you don&#x27;t want to be there.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Vuex Crosstab Plugin</title>
-        <published>2020-09-03T00:00:00+00:00</published>
-        <updated>2020-09-03T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/vuex-crosstab/"/>
-        <id>https://ohdoylerules.com/snippets/vuex-crosstab/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/vuex-crosstab/">&lt;p&gt;Did you know that you can use localstorage as an event bus between same-origin tabs?&lt;&#x2F;p&gt;
-&lt;p&gt;Yep! Local storage is shared across same-origin domains. Which means you can share information between tabs on the same domain. Other cool thing is that the &lt;code&gt;storage&lt;&#x2F;code&gt; event that is fired on the &lt;code&gt;window&lt;&#x2F;code&gt; when localstorage changes, it &lt;em&gt;only fired on non-focused tabs&lt;&#x2F;em&gt;. This means you can write an event bus to sync the tabs you don&#x27;t have focused with the one you do! Neat.&lt;&#x2F;p&gt;
-&lt;p&gt;When browsing around GitHub, like I do, I found this project called &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;storeon&#x2F;storeon&quot;&gt;storeon&lt;&#x2F;a&gt;. It is a framework agnostic state manager. It&#x27;s aim is to be small and flexible and provide additional functionality through plugins. One such plugin is called &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;storeon&#x2F;crosstab&quot;&gt;crosstab&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I am a Vue.js user who likes VueX. So I wanted to recreate this plugin in VueX. VueX also provides a &lt;a href=&quot;https:&#x2F;&#x2F;vuex.vuejs.org&#x2F;guide&#x2F;plugins.html&quot;&gt;plugin API&lt;&#x2F;a&gt; so you can write plugins as well. So I wrote the plugin for VueX, published it to &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;vuex-crosstab&quot;&gt;npm&lt;&#x2F;a&gt;, and posted the source on &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;vuex-crosstab&quot;&gt;GitHub&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the demo of the plugin working:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;vuex-crosstab.gif&quot; target=&quot;_blank&quot; title=&quot;vuex crosstab demo&quot;&gt;&lt;img alt=&quot;laravel multi-lingual site demo&quot; src=&quot;&#x2F;images&#x2F;vuex-crosstab.gif&quot;&gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;You can use the plugin like so:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; es6
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; import CrossTab from &amp;#39;vuex-crosstab&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; commonjs
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;CrossTab &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;vuex-crosstab&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span&gt;new Vuex.Store({
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;  plugins: [
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; your other plugins...
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;CrossTab&lt;&#x2F;span&gt;&lt;span&gt;({ recover: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;true &lt;&#x2F;span&gt;&lt;span&gt;})
-&lt;&#x2F;span&gt;&lt;span&gt;  ],
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;There is a simple config object you can pass to control some things like the &amp;quot;recovery&amp;quot; which will check the localstorage to see if there was state already in there. You can &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;vuex-crosstab#options&quot;&gt;read more on the Github page&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Vuex Stateful URL Plugin</title>
-        <published>2020-09-03T00:00:00+00:00</published>
-        <updated>2020-09-03T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/vuex-stateful-url/"/>
-        <id>https://ohdoylerules.com/snippets/vuex-stateful-url/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/vuex-stateful-url/">&lt;p&gt;Have you ever used permalinks on a site? These links store the state of the page in the URL. They can be super useful for simple single-page-apps (SPAs) for bringing users back to where they were when they left the page or just adding the ability to share that page state with someone else without requiring logins or anything like that.&lt;&#x2F;p&gt;
-&lt;p&gt;I&#x27;m a Vue.js user who likes VueX. So I wanted to create a plugin in VueX that would send the state of the store into the URL.&lt;&#x2F;p&gt;
-&lt;p&gt;VueX provides a &lt;a href=&quot;https:&#x2F;&#x2F;vuex.vuejs.org&#x2F;guide&#x2F;plugins.html&quot;&gt;plugin API&lt;&#x2F;a&gt; so you can write plugins that can extend the basic functionality. So I wrote the plugin for VueX that would sync the store to the URL.&lt;&#x2F;p&gt;
-&lt;p&gt;I used a great package called &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;masotime&#x2F;json-url&quot;&gt;json-url&lt;&#x2F;a&gt; which allows you to encode&#x2F;compress JSON objects in a URL-safe way.&lt;&#x2F;p&gt;
-&lt;p&gt;It is now published to &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;vuex-stateful-url&quot;&gt;npm&lt;&#x2F;a&gt; and the source is on &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;vuex-stateful-url&quot;&gt;GitHub&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the demo of the plugin working:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;vuex-stateful-url.gif&quot; target=&quot;_blank&quot; title=&quot;vuex stateful url demo&quot;&gt;&lt;img alt=&quot;laravel multi-lingual site demo&quot; src=&quot;&#x2F;images&#x2F;vuex-stateful-url.gif&quot;&gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;You can use the plugin like so:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; es6
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; import StatefulURL from &amp;#39;vuex-stateful-url&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; commonjs
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;StatefulURL &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;vuex-stateful-url&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span&gt;new Vuex.Store({
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;  plugins: [
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; your other plugins...
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;StatefulURL&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;  ],
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;vuex-crosstab&quot;&gt;read more on the Github page&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Using slots in Vue js</title>
-        <published>2020-05-18T00:00:00+00:00</published>
-        <updated>2020-05-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/using-slots-in-vue-js/"/>
-        <id>https://ohdoylerules.com/web/using-slots-in-vue-js/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/using-slots-in-vue-js/">&lt;p&gt;If you are working with server-rendered apps (your view is compiled on the server down to HTML), and you are a &lt;a href=&quot;https:&#x2F;&#x2F;vuejs.org&#x2F;&quot;&gt;Vue.js&lt;&#x2F;a&gt; user, then you should definitely learn to use a &lt;a href=&quot;https:&#x2F;&#x2F;vuejs.org&#x2F;v2&#x2F;guide&#x2F;components-slots.html&quot;&gt;Vue feature called slots&lt;&#x2F;a&gt;! Not only will it allow you to make more reusable and flexible components, but you will also improve the rendering performance of your apps as well.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;basic-example&quot;&gt;Basic Example&lt;&#x2F;h2&gt;
-&lt;p&gt;Here is the example we will be refactoring later. It is a &amp;quot;profile list&amp;quot; which takes in an array of users from a prop, and then creates &amp;quot;profile cards&amp;quot; for each one. Finally, it adds a button in each card that emits an event with the user data when someone clicks on it.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!--
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;  This is the way you might typically build a component like this
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;profile-list&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ul&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- loop over all the users and create cards for them --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;li &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;profile-card&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-for&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;user in users&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;:key&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;user.id&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;profile-details&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;img &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;:src&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;user.profile_image&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;:alt&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;`${user.username}` profile image&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h4 &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-text&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;user.username&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h4&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- we have a button event here --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;@click.prevent&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;buttonHandler(user)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;View&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;li&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ul&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  name: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;ProfileList&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  props: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; we take in our list of users
-&lt;&#x2F;span&gt;&lt;span&gt;    users: {
-&lt;&#x2F;span&gt;&lt;span&gt;      type: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Array&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;      required: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  methods: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;buttonHandler&lt;&#x2F;span&gt;&lt;span&gt;(user) {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$emit&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;profile-change&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;user&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This is how you might use this component in your server-rendered templates:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- liquid or twig example --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;profile-list &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-bind:users&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{{ users | json | escape }}&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;profile-list&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- plain php, short echo --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;profile-list &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-bind:users&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;?= htmlspecialchars(json_encode($users), ENT_QUOTES, &amp;#39;UTF-8&amp;#39;) ?&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;profile-list&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- laravel blade example, note single quotes --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;profile-list &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-bind:users&lt;&#x2F;span&gt;&lt;span&gt;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;@json($users)&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;profile-list&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you can see the main approach here is to encode the users as JSON and pass them to the components &lt;code&gt;users&lt;&#x2F;code&gt; prop. This can create quite a mess of JSON if you look at the source of your pages if you have lots of components that do this.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;why-use-slots&quot;&gt;Why Use Slots?&lt;&#x2F;h2&gt;
-&lt;p&gt;As I mentioned, with slots you can create more reusable and flexible components and improve the rendering performance of your apps. I&#x27;ll outline some of the details below.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;on-reusability-and-flexibility&quot;&gt;On Reusability and Flexibility&lt;&#x2F;h4&gt;
-&lt;p&gt;Normally, you would send data to your Vue component using props, events, or a store. But using slots, you can essentially skip a rendering step and send your pre-compiled Vue into your Vue components template. This allows you to create components with &lt;em&gt;flexible templates&lt;&#x2F;em&gt; instead of adding tons of props and lots of switches in the templates.&lt;&#x2F;p&gt;
-&lt;p&gt;What I&#x27;ve typically seen in the past with larger apps, developers end up creating super-components with tons and tons of props. The reason this happens is usually because the components require flexibility. If you have lots of props, that is &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Code_smell&quot;&gt;probably a code smell&lt;&#x2F;a&gt;. A way to reduce the number of props is to use events, new components, and of course, slots, to split things up!&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;on-passing-data&quot;&gt;On Passing Data&lt;&#x2F;h4&gt;
-&lt;p&gt;Since a slot is rendered on the server, you can also do some handy things with the template. Say you want to show or hide different content based on whether the user is authenticated. Well, this is super easy when working in server-rendered templates since the session is so easy to access. You might even have entire blocks of the UI that are not shown if the user is not logged in or is logged out.&lt;&#x2F;p&gt;
-&lt;p&gt;This can help to dramatically reduce the work you need to do on your frontend to access data or building token-based APIs.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;on-rendering&quot;&gt;On Rendering&lt;&#x2F;h4&gt;
-&lt;p&gt;Since a slot is prerended HTML, your component ends up changing to really only encapsulating &lt;em&gt;the logic&lt;&#x2F;em&gt; of your component and less &amp;quot;template&amp;quot; of your component. You&#x27;ll notice that when using slots instead of props, your page with show the content inside the slot even before Vue has finished loading. This is great because it can help reduce &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Flash_of_unstyled_content&quot;&gt;flashes of unstyled content&lt;&#x2F;a&gt; that make your app look a little janky.&lt;&#x2F;p&gt;
-&lt;p&gt;Although &lt;a href=&quot;https:&#x2F;&#x2F;developers.google.com&#x2F;search&#x2F;docs&#x2F;guides&#x2F;javascript-seo-basics&quot;&gt;browers will run your javascript&lt;&#x2F;a&gt;, a by-product of using slots is that you could improve the SEO of your site, as you are trying to fill the page with the most HTML possible.&lt;&#x2F;p&gt;
-&lt;p&gt;Mostly slots are good for making more flexible components. The performance benefit is super helpful though.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;refactored-to-slots&quot;&gt;Refactored to Slots&lt;&#x2F;h2&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!--
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;  All we need to do is cut that inside layout and replace it with a &amp;quot;default&amp;quot; slot
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;profile-list&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ul&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- this is a default slot with a binding to the `buttonHandler` function --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slot &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;:buttonHandler&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;buttonHandler&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slot&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ul&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  name: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;ProfileList&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  methods: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;buttonHandler&lt;&#x2F;span&gt;&lt;span&gt;(user) {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$emit&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;profile-change&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;user&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can now see how we completely remove our inner template and props and replace it with the &lt;code&gt;slot&lt;&#x2F;code&gt; tag. We don&#x27;t need the props now since we won&#x27;t be passing in any data. We are going to be passing in the entire block of rendered HTML on our server, and when Vue loads on the client side, the functionality will be hooked up!&lt;&#x2F;p&gt;
-&lt;p&gt;This is how you might use this component in your server-rendered templates:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;profile-list &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-slot&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;slotProps&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  @foreach ($users as $user)
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;li &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;profile-card&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{{ $user.id }}&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;profile-details&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;img &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;src&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{{ $user.profile_image }}&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;alt&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{{ $user.username }} profile image&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h4&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;{{ $user.username }}&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h4&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- we have a button event here --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;@click.prevent&lt;&#x2F;span&gt;&lt;span&gt;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;slotProps.buttonHandler(@json($user))&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&amp;gt;View&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;li&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  @endforeach
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;profile-list&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now if you view the source of your page in your browser, you will see that the HTML looks more like Vue is &lt;em&gt;decorating&lt;&#x2F;em&gt; your HTML instead of generating it.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;another-example&quot;&gt;Another Example&lt;&#x2F;h4&gt;
-&lt;p&gt;Let&#x27;s create a modal with slots!&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;modal-wrapper&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;@click.prevent&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;toggle&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-text&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;openLabel&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;modal-overlay&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-if&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;open&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;modal-header&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h3&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;          &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- here is a named slot, we can force content right into this spot as long as we use named slots --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;          &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slot &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;header&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slot&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h3&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;modal-body&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slot &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;body&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slot&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;modal-footer&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;@click.prevent&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;toggle&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-text&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;closeLabel&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  name: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Modal&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;  props: {
-&lt;&#x2F;span&gt;&lt;span&gt;    openLabel: {
-&lt;&#x2F;span&gt;&lt;span&gt;      type: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;String&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;      required: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;      default: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Open&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    closeLabel: {
-&lt;&#x2F;span&gt;&lt;span&gt;      type: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;String&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;      required: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;      default: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Close&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;      open: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false
-&lt;&#x2F;span&gt;&lt;span&gt;    };
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  methods: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;toggle&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;.open = !&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;.open;
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here we have a component that has 2 slots! One for the header of the modal and another for the body. We are still using props though. We don&#x27;t want to overwrite the main button that opens the modal, or the &lt;code&gt;modal-footer&lt;&#x2F;code&gt; content that includes our button and the handler.&lt;&#x2F;p&gt;
-&lt;p&gt;Now we can use this component as follows:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- set our custom labels --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;modal &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;openLabel&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;View Details&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;closeLabel&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Dismiss&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- pass in our title --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-slot:header&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Details&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- pass in our body content that will be displayed --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;v-slot:body&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h3&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;This is my title&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h3&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare ipsum ligula, id pharetra neque lobortis nec. Mauris varius, felis eget interdum ultricies, libero nulla varius tortor, nec semper tortor leo id nisl. Fusce a est augue. In hac habitasse platea dictumst. Sed pretium egestas vestibulum. Nunc pellentesque aliquam justo, eu rutrum nunc vehicula ac. Nunc feugiat sed ipsum in dapibus. Quisque finibus, dolor at consequat.&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;modal&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can actually conditionally show slots as well. Let&#x27;s add that:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;@@ -2,7 +2,7 @@
-&lt;&#x2F;span&gt;&lt;span&gt;   &amp;lt;div class=&amp;quot;modal-wrapper&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;     &amp;lt;button type=&amp;quot;button&amp;quot; @click.prevent=&amp;quot;toggle&amp;quot; v-text=&amp;quot;openLabel&amp;quot;&amp;gt;&amp;lt;&#x2F;button&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;     &amp;lt;div class=&amp;quot;modal-overlay&amp;quot; v-if=&amp;quot;open&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;-      &amp;lt;div class=&amp;quot;modal-header&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+      &amp;lt;div class=&amp;quot;modal-header&amp;quot; v-if=&amp;quot;hasHeaderSlot&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;         &amp;lt;h3&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;           &amp;lt;!-- here is a named slot, we can force content right into this spot as long as we use named slots --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;           &amp;lt;slot name=&amp;quot;header&amp;quot;&amp;gt;&amp;lt;&#x2F;slot&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -38,6 +38,11 @@
-&lt;&#x2F;span&gt;&lt;span&gt;       open: false
-&lt;&#x2F;span&gt;&lt;span&gt;     };
-&lt;&#x2F;span&gt;&lt;span&gt;   },
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+  computed: {
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    hasHeaderSlot() {
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+      return !this.$slots[&amp;quot;header&amp;quot;];
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    }
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+  },
-&lt;&#x2F;span&gt;&lt;span&gt;   methods: {
-&lt;&#x2F;span&gt;&lt;span&gt;     toggle() {
-&lt;&#x2F;span&gt;&lt;span&gt;       this.open = !this.open;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;What we&#x27;ve done here is hide a slot (the &lt;code&gt;header&lt;&#x2F;code&gt; one) if the slot is not filled in. This allows us to use the &lt;code&gt;body&lt;&#x2F;code&gt; slot even more effectively! We can provide a full content replacement if we want. Nice!&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;accordion-example&quot;&gt;Accordion Example&lt;&#x2F;h4&gt;
-&lt;p&gt;Here are a couple more example but done in the Codesandbox editor. They have code comments as well as some more organization:&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;Accordion&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;iframe
-   src=&quot;https:&#x2F;&#x2F;codesandbox.io&#x2F;embed&#x2F;slots-accordion-32c18?fontsize=14&amp;hidenavigation=1&amp;theme=dark&quot;
-   style=&quot;width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;&quot;
-   title=&quot;Slots - Accordion&quot;
-   allow=&quot;accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr&quot;
-   sandbox=&quot;allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts&quot;
- &gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;&lt;strong&gt;Image Picker&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;iframe
-   src=&quot;https:&#x2F;&#x2F;codesandbox.io&#x2F;embed&#x2F;slots-image-picker-3yvlh?fontsize=14&amp;hidenavigation=1&amp;initialpath=%2Fsrc%2Fcomponents%2FImagePicker.vue&amp;theme=dark&quot;
-   style=&quot;width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden; margin-bottom: 1rem&quot;
-   title=&quot;Slots - Image Picker&quot;
-   allow=&quot;accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr&quot;
-   sandbox=&quot;allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts&quot;
- &gt;&lt;&#x2F;iframe&gt;
-&lt;h2 id=&quot;in-conclusion&quot;&gt;In Conclusion&lt;&#x2F;h2&gt;
-&lt;p&gt;So next time you find yourself making tons of props or duplicating component just because they have slightly different templates, just reach for slots!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Create JSON Sections In Shopify</title>
-        <published>2020-01-05T00:00:00+00:00</published>
-        <updated>2020-01-05T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/create-json-sections-in-shopify/"/>
-        <id>https://ohdoylerules.com/web/create-json-sections-in-shopify/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/create-json-sections-in-shopify/">&lt;p&gt;If you&#x27;re like me, you&#x27;re probably constantly running into issues with the flexibility of Shopify themes. There are a lot of issues that come up when trying to squeeze in features and functionality that are &amp;quot;shop-adjacent&amp;quot;. Shopify does a good job at running a store but it can be difficult to reach beyond that and make some more interactive experiences.&lt;&#x2F;p&gt;
-&lt;p&gt;Recently, I wanted to share the content from one section on one page to another section on another page. This isn&#x27;t really possible using liquid because you can&#x27;t pass variables to sections. So even including them both on the same page wouldn&#x27;t work. You also can&#x27;t include sections in other sections. So that also won&#x27;t work.&lt;&#x2F;p&gt;
-&lt;p&gt;So how can you pass data between sections? Well, I managed to get this done by using the &lt;a href=&quot;https:&#x2F;&#x2F;help.shopify.com&#x2F;en&#x2F;themes&#x2F;development&#x2F;sections&#x2F;section-rendering-api&quot;&gt;Section Rendering API&lt;&#x2F;a&gt;. Now, this is not something in liquid, but it can be used as a JS API. Specifically, you can render a section in isolation and without the surrounding page content.&lt;&#x2F;p&gt;
-&lt;p&gt;Now, since you can call this API in JS, how would you use this content? You can just go ahead and use it as HTML, but I wanted to use it as JSON. How do we do that? How can we make sure the section works normally when rendered on a page but returns &amp;quot;JSON&amp;quot; when rendered through the section API?&lt;&#x2F;p&gt;
-&lt;p&gt;Well, this is possible by taking advantage of the &amp;quot;page state&amp;quot; when being called via the API.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is an example of the if statement required:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;jinja2&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-jinja2 &quot;&gt;&lt;code class=&quot;language-jinja2&quot; data-lang=&quot;jinja2&quot;&gt;&lt;span&gt;{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;comment &lt;&#x2F;span&gt;&lt;span&gt;%}https:&#x2F;&#x2F;help.shopify.com&#x2F;en&#x2F;themes&#x2F;development&#x2F;sections&#x2F;section-rendering-api{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endcomment &lt;&#x2F;span&gt;&lt;span&gt;%}
-&lt;&#x2F;span&gt;&lt;span&gt;{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;comment &lt;&#x2F;span&gt;&lt;span&gt;%}request.page_type will be &amp;quot;index&amp;quot; when using the section rendering API{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endcomment &lt;&#x2F;span&gt;&lt;span&gt;%}
-&lt;&#x2F;span&gt;&lt;span&gt;{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;comment &lt;&#x2F;span&gt;&lt;span&gt;%}content_for_header will contain the query string in the request{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endcomment &lt;&#x2F;span&gt;&lt;span&gt;%}
-&lt;&#x2F;span&gt;&lt;span&gt;{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;request&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;page_type &lt;&#x2F;span&gt;&lt;span&gt;== &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;index&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;and &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;content_for_header contains &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;section_id&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; -%}
-&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  {%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for block &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;in section&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;blocks &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;    {%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;assign &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slug &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;block&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;settings&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;downcase &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slug &lt;&#x2F;span&gt;&lt;span&gt;}}&amp;quot;: {{- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;block&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;settings &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;json &lt;&#x2F;span&gt;&lt;span&gt;-}}{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;unless &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;forloop&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;last &lt;&#x2F;span&gt;&lt;span&gt;-%},{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endunless &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;  {%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endfor &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;else &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;  {%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for block &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;in section&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;blocks &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;    {%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;assign &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slug &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;block&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;settings&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;downcase &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;div id=&amp;quot;{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slug &lt;&#x2F;span&gt;&lt;span&gt;}}&amp;quot;&amp;gt;{{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;block&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;settings&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title &lt;&#x2F;span&gt;&lt;span&gt;}}&amp;lt;&#x2F;div&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  {%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endfor &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endif &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you can see from the comment, &lt;code&gt;request.page_type&lt;&#x2F;code&gt; will be equal to &lt;code&gt;&amp;quot;index&amp;quot;&lt;&#x2F;code&gt; and &lt;code&gt;content_for_header&lt;&#x2F;code&gt; will contain &lt;code&gt;&amp;quot;section_id&amp;quot;&lt;&#x2F;code&gt; when rendered via the API. This means, we can use that state to return a string of JSON.&lt;&#x2F;p&gt;
-&lt;p&gt;When this is returned from the section API, it will still be treated as HTML and wrapped with markup. It will look something like this:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;my-section-id&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;shopify-section&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;my-block-title&amp;quot;: {&amp;quot;title&amp;quot;: &amp;quot;My Block Title&amp;quot;, &amp;quot;subtitle&amp;quot;: &amp;quot;This is my subtitle&amp;quot;},
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;second-block-title&amp;quot;: {&amp;quot;title&amp;quot;: &amp;quot;Second Block Title&amp;quot;, &amp;quot;subtitle&amp;quot;: &amp;quot;This is my second subtitle&amp;quot;}
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you can tell, you can&#x27;t just &lt;code&gt;JSON.parse&lt;&#x2F;code&gt; this. It has text inside that will bust up our JSON parser. How can we confidently parse the content inside the &lt;code&gt;div&lt;&#x2F;code&gt; and get that sweet schema in the center?&lt;&#x2F;p&gt;
-&lt;p&gt;Let me introduce the &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;DOMParser&quot;&gt;DOMParser API&lt;&#x2F;a&gt;. This is a &lt;a href=&quot;https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=xml-serializer&quot;&gt;well-supported&lt;&#x2F;a&gt; API that will allow you to parse different types of structured documents.&lt;&#x2F;p&gt;
-&lt;p&gt;In this case we are going to treat this content as &lt;code&gt;text&#x2F;html&lt;&#x2F;code&gt; (which it is) and then use other DOM APIs to extract the JSON from the wrapper &lt;code&gt;div&lt;&#x2F;code&gt; surrounding it.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the little function I came up with to fetch the rendered section, parse the content as HTML, extract the JSON inside, and return the object it contains.&lt;&#x2F;p&gt;
-&lt;p&gt;See below:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;**
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * Get section from the rendering API
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@see &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;https:&#x2F;&#x2F;help.shopify.com&#x2F;en&#x2F;themes&#x2F;development&#x2F;sections&#x2F;section-rendering-api
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@param &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;{string} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;section
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@returns &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;{Promise&amp;lt;Object&amp;gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;async function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;getSection&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;section&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;try &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; call the rendering API
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;data &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;await &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;await &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span&gt;(`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;?section_id=${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;section&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;`)).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;text&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; create a DOMParser and get the inside content of the section
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;parser &lt;&#x2F;span&gt;&lt;span&gt;= new DOMParser();
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;node &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;parser&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;parseFromString&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;toString&lt;&#x2F;span&gt;&lt;span&gt;(), &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;text&#x2F;html&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;querySelector&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.shopify-section&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(!&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;node&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;No node found in&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;{};
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;content &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;node&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;textContent &lt;&#x2F;span&gt;&lt;span&gt;|| &amp;#39;&amp;#39;).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;trim&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; parse that content as JSON
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;JSON.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;parse&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;  } &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;catch &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;e&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;e&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;{};
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Nice, right? Pretty simple! We pass a string that represents the file name of the section we want to render, pass that to our DOMParser parse method, fetch the wrapper &lt;code&gt;div&lt;&#x2F;code&gt;, grab the text content inside, and pass that all to &lt;code&gt;JSON.parse&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;This seems strange &lt;em&gt;but it really works!&lt;&#x2F;em&gt; It works really really well!&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; usage:
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;getSection&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name-of-section-template-file&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; do stuff with the object...
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;That is how you use this function. Just pass in the filename of the section template (without the &lt;code&gt;.liquid&lt;&#x2F;code&gt; on the end) and you will get JSON back! The best part about this is that it still works with the normal HTML. So you can use this in both cases without any issues. This whole setup allows website admins to visually design JSON output for your more complex features.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;Side Note&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Shopify likes to change things up every once in a while. They recently &lt;a href=&quot;https:&#x2F;&#x2F;developers.shopify.com&#x2F;changelog&#x2F;deprecating-the-include-liquid-tag-and-introducing-the-render-tag&quot;&gt;deprecated the &lt;code&gt;include&lt;&#x2F;code&gt; tag in favour of a new &lt;code&gt;render&lt;&#x2F;code&gt; tag&lt;&#x2F;a&gt;. So there is no promise this will work forever.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;You have been warned!&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Detect Theme Editor In Shopify Liquid Templates</title>
-        <published>2020-01-04T00:00:00+00:00</published>
-        <updated>2020-01-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/"/>
-        <id>https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/">&lt;p&gt;So you may already know that you cannot detect if an liquid page is running in the theme editor. You can however, &lt;a href=&quot;https:&#x2F;&#x2F;help.shopify.com&#x2F;en&#x2F;themes&#x2F;development&#x2F;theme-editor&#x2F;other-theme-files#detecting-the-theme-editor-with-javascript&quot;&gt;detect this in Javascript&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;But what if you want conditional content? What if you want to use this &amp;quot;switch&amp;quot; in a liquid template?&lt;&#x2F;p&gt;
-&lt;p&gt;There are a couple good reasons to do this. The first one being that sometimes you need to show the content the website admin is editing in a different way.&lt;&#x2F;p&gt;
-&lt;p&gt;I needed this feature when I had a repeating section of blocks that only showed when certain filters where applied to a form. This made it really hard to edit the content. You couldn&#x27;t see all the blocks at once while you were editing. I wanted to just show all the blocks, with no filtering applied, but only when the theme editor was being used to create and edit blocks.&lt;&#x2F;p&gt;
-&lt;p&gt;Shopify says you can&#x27;t do this though. I&#x27;m here to tell you they are incorrect.&lt;&#x2F;p&gt;
-&lt;p&gt;Before I continue, you will need to understand &lt;a href=&quot;http:&#x2F;&#x2F;freakdesign.com.au&#x2F;blogs&#x2F;news&#x2F;get-the-url-querystring-values-with-liquid-in-shopify&quot;&gt;this hack used to detect query strings in liquid&lt;&#x2F;a&gt;. Once read up on that snippet, you&#x27;ll see how we build on that to detect the theme editor.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;jinja2&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-jinja2 &quot;&gt;&lt;code class=&quot;language-jinja2&quot; data-lang=&quot;jinja2&quot;&gt;&lt;span&gt;{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;comment &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;  http:&#x2F;&#x2F;freakdesign.com.au&#x2F;blogs&#x2F;news&#x2F;get-the-url-querystring-values-with-liquid-in-shopify
-&lt;&#x2F;span&gt;&lt;span&gt;  Capture the content for header containing the tracking data
-&lt;&#x2F;span&gt;&lt;span&gt;{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endcomment &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;capture &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;contentForQuerystring &lt;&#x2F;span&gt;&lt;span&gt;-%}{{- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;content_for_header &lt;&#x2F;span&gt;&lt;span&gt;-}}{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endcapture &lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;comment &lt;&#x2F;span&gt;&lt;span&gt;%}Use string splitting to pull the value from content_for_header and apply some string clean up{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endcomment &lt;&#x2F;span&gt;&lt;span&gt;%}
-&lt;&#x2F;span&gt;&lt;span&gt;{%- &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;assign &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pageUrl &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;contentForQuerystring &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;split&lt;&#x2F;span&gt;&lt;span&gt;:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;quot;pageurl&amp;quot;:&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;last
-&lt;&#x2F;span&gt;&lt;span&gt;  | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;split&lt;&#x2F;span&gt;&lt;span&gt;:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;first
-&lt;&#x2F;span&gt;&lt;span&gt;  | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;split&lt;&#x2F;span&gt;&lt;span&gt;:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.myshopify.com&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;last
-&lt;&#x2F;span&gt;&lt;span&gt;  | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;replace&lt;&#x2F;span&gt;&lt;span&gt;:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;\&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;replace&lt;&#x2F;span&gt;&lt;span&gt;:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%20&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,&amp;#39; &amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;replace&lt;&#x2F;span&gt;&lt;span&gt;:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\u0026&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;amp;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;strip
-&lt;&#x2F;span&gt;&lt;span&gt;-%}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The code above is a snippet of the &lt;a href=&quot;http:&#x2F;&#x2F;freakdesign.com.au&#x2F;blogs&#x2F;news&#x2F;get-the-url-querystring-values-with-liquid-in-shopify&quot;&gt;trick used to detect query strings in liquid&lt;&#x2F;a&gt;. We only need this piece. So let&#x27;s continue.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;jinja2&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-jinja2 &quot;&gt;&lt;code class=&quot;language-jinja2&quot; data-lang=&quot;jinja2&quot;&gt;&lt;span&gt;{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;comment &lt;&#x2F;span&gt;&lt;span&gt;%}When in the theme editor, the pageUrl variable is malformed&#x2F;empty{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endcomment &lt;&#x2F;span&gt;&lt;span&gt;%}
-&lt;&#x2F;span&gt;&lt;span&gt;{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pageUrl contains page&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;handle &lt;&#x2F;span&gt;&lt;span&gt;%}
-&lt;&#x2F;span&gt;&lt;span&gt;  We are in the frontend of the website
-&lt;&#x2F;span&gt;&lt;span&gt;{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;else &lt;&#x2F;span&gt;&lt;span&gt;%}
-&lt;&#x2F;span&gt;&lt;span&gt;  We are in the theme editor of the website
-&lt;&#x2F;span&gt;&lt;span&gt;{% &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;endif &lt;&#x2F;span&gt;&lt;span&gt;%}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;That&#x27;s all we need now. I&#x27;ll explain what is going on.&lt;&#x2F;p&gt;
-&lt;p&gt;Basically, when the liquid template is being accessed in the theme editor, the &lt;code&gt;pageUrl&lt;&#x2F;code&gt; variable will not properly formed. Since that is the case, we just compare that value with the value that is in &lt;code&gt;page.handle&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;When the template is being loaded properly on the frontend of the site, the &lt;code&gt;pageUrl&lt;&#x2F;code&gt; will be equal to the &lt;code&gt;page.handle&lt;&#x2F;code&gt; value.&lt;&#x2F;p&gt;
-&lt;p&gt;In summation, we can now detect if the theme is running in the section editor! Yay!&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;Side Note&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Shopify likes to change things up every once in a while. They recently &lt;a href=&quot;https:&#x2F;&#x2F;developers.shopify.com&#x2F;changelog&#x2F;deprecating-the-include-liquid-tag-and-introducing-the-render-tag&quot;&gt;deprecated the &lt;code&gt;include&lt;&#x2F;code&gt; tag in favour of a new &lt;code&gt;render&lt;&#x2F;code&gt; tag&lt;&#x2F;a&gt;. So there is no promise this will work forever.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;You have been warned!&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Using Zapier Webhooks for HTML forms</title>
-        <published>2019-09-28T00:00:00+00:00</published>
-        <updated>2019-09-28T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/"/>
-        <id>https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/">&lt;p&gt;If you don&#x27;t know about &lt;a href=&quot;https:&#x2F;&#x2F;zapier.com&#x2F;&quot;&gt;Zapier&lt;&#x2F;a&gt;, it&#x27;s a service that allows you to &amp;quot;automate everything&amp;quot;. I&#x27;ve been using it for over 4 years to automate tons of different things like posting daily Trello tasks to Slack, activity in Intercom to Emails, and even a custom scheduled job that gives me task information for the current day.&lt;&#x2F;p&gt;
-&lt;p&gt;One of the best built-in zaps (that&#x27;s what they call the tasks) is the &lt;a href=&quot;https:&#x2F;&#x2F;zapier.com&#x2F;app-directory&#x2F;webhook&#x2F;integrations&quot;&gt;webhook zap&lt;&#x2F;a&gt; which let&#x27;s you send a &lt;code&gt;POST&lt;&#x2F;code&gt; request to Zapier and then connect that with the 100s of other integrations. You can use this for all types of things. One thing I have found it to be good for is handling form submissions on static sites.&lt;&#x2F;p&gt;
-&lt;p&gt;As the concept of static sites and &amp;quot;serverless&amp;quot; keeps getting more and more popular, so do the services surrounding those concepts. But if you know where to look, and how to set things up, most of those &amp;quot;services&amp;quot; that supplement static sites can be replace with some savvy Zapier setups.&lt;&#x2F;p&gt;
-&lt;p&gt;There are tons of &amp;quot;form&amp;quot; apps out there to allow you to create endpoints for your site to submit to. A lot of them even suggest using Zapier to handle the post-submission step. It&#x27;s funny, because you can get a pretty robust setup just using Zapier on it&#x27;s own and not having to use these services. Also, Zapier supports file uploads! So you can even handle attachments in your forms or &lt;code&gt;POST&lt;&#x2F;code&gt; request. Handy!&lt;&#x2F;p&gt;
-&lt;p&gt;Anyway, on to the form. Here is an example of an HTML form that will successfully:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;form &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;action&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;https:&#x2F;&#x2F;hooks.zapier.com&#x2F;hooks&#x2F;catch&#x2F;1234567&#x2F;abcd123&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;method&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;post&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;enctype&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;multipart&#x2F;form-data&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;Name:&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;text&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;email&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;Email:&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;email&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;email&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;email&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;attachment&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;Attachment:&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;file&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;attachment&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;attachment&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;submit&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;submit&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Submit&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;form&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Let&#x27;s break down the content above and talk about the details.&lt;&#x2F;p&gt;
-&lt;h5 id=&quot;action&quot;&gt;Action&lt;&#x2F;h5&gt;
-&lt;p&gt;Pretty straightforward. This is the URL of your webhook. You get this after you create the zap for the first time.&lt;&#x2F;p&gt;
-&lt;h5 id=&quot;method&quot;&gt;Method&lt;&#x2F;h5&gt;
-&lt;p&gt;Obviously, we need this to be a &lt;code&gt;POST&lt;&#x2F;code&gt; since that is what the webhook is expecting. Nothing special here.&lt;&#x2F;p&gt;
-&lt;h5 id=&quot;enctype&quot;&gt;Enctype&lt;&#x2F;h5&gt;
-&lt;p&gt;Here is the weird part. If you are familiar with file uploads, you already know that in order to properly handling files, you need to make sure your request is using the correct encoding. Here is a description from the &lt;a href=&quot;https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;1999&#x2F;REC-html401-19991224&#x2F;interact&#x2F;forms.html#adef-enctype&quot;&gt;HTML Spec&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;This attribute specifies the content type used to submit the form to the server (when the value of method is &amp;quot;post&amp;quot;). The default value for this attribute is &amp;quot;application&#x2F;x-www-form-urlencoded&amp;quot;. The value &amp;quot;multipart&#x2F;form-data&amp;quot; should be used in combination with the INPUT element, type=&amp;quot;file&amp;quot;.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;So there you go. Use this for files.&lt;&#x2F;p&gt;
-&lt;h5 id=&quot;caveats&quot;&gt;Caveats&lt;&#x2F;h5&gt;
-&lt;p&gt;One thing to keep in mind is, like all forms, the &lt;code&gt;name&lt;&#x2F;code&gt; of each field will be assign that value that was used on submission. So you can&#x27;t really handle dynamic fields with Zapier. You also don&#x27;t have any validation other than the HTML validation (or javascript validation, if applied) to rely on. People could submit values you don&#x27;t expect or mess with the rules and submit other things you aren&#x27;t expecting.&lt;&#x2F;p&gt;
-&lt;p&gt;Something to keep in mind. I wouldn&#x27;t use this method for anything other than simple contact forms that send emails or maybe forms that fill rows in a spreadsheet or something. Basic stuff.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Use Laravel Valet for WordPress Multisites</title>
-        <published>2019-09-01T00:00:00+00:00</published>
-        <updated>2019-09-01T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/"/>
-        <id>https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/">&lt;p&gt;Working with WordPress multisites can sometimes be a pain. Especially if you are not using the amazing &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&#x2F;docs&#x2F;6.0&#x2F;valet&quot;&gt;Laravel Valet&lt;&#x2F;a&gt; tool to manage your local sites.&lt;&#x2F;p&gt;
-&lt;p&gt;From the site:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Valet is a Laravel (or any site really) development environment for Mac minimalists. No Vagrant, no &#x2F;etc&#x2F;hosts file.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;I would add that everything can be managed from the command line as well. Very handy.&lt;&#x2F;p&gt;
-&lt;p&gt;I&#x27;m going to make some assumptions for the rest of the post. Firstly, you already have a WordPress multisite setup at &lt;code&gt;~&#x2F;Sites&#x2F;my-blog&lt;&#x2F;code&gt; (or wherever your root folder is) that is already resolving with &lt;code&gt;my-blog.localhost&lt;&#x2F;code&gt;. The TLD (in my case &lt;code&gt;.localhost&lt;&#x2F;code&gt;) is not important either. Just imagine yours there instead.&lt;&#x2F;p&gt;
-&lt;p&gt;We are going to want to add a new domain name that resolves to the exact same folder as our current blog setup. We can do that with &lt;code&gt;valet link&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;So let&#x27;s run some commands:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;code&gt;cd ~&#x2F;Sites&#x2F;my-blog&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;valet link my-other-blog.localhost&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Now we have 2 domains pointing to the same folder:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;code&gt;my-blog.localhost&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;my-other-blog.localhost&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;They are both going to resolve to the same site right now. That&#x27;s OK. We need to tweak our &lt;code&gt;wp-config.php&lt;&#x2F;code&gt; to work properly with the requests.&lt;&#x2F;p&gt;
-&lt;p&gt;If we have multisite already setup, we should see some sites in the &lt;code&gt;wp_blogs&lt;&#x2F;code&gt; table of our database. We want each of these &amp;quot;sites&amp;quot; to reflect the domains on our system. You can update those now and make sure that the domains match the ones we are setting up.&lt;&#x2F;p&gt;
-&lt;p&gt;Then we need to update our &lt;code&gt;wp-config.php&lt;&#x2F;code&gt; with some changes:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; wp-config.php
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; ... there is going to be other stuff in here at the top...
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; check for HTTPS since valet makes it easy to add HTTPS locally...
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;protocol &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;isset&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;_SERVER&lt;&#x2F;span&gt;&lt;span&gt;[&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;HTTPS&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;]) &amp;amp;&amp;amp; $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;_SERVER&lt;&#x2F;span&gt;&lt;span&gt;[&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;HTTPS&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;] === &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;on&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; ? &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;https:&#x2F;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; : &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; set the home vars based on the domain that is being used for this request
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WP_HOME&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;protocol &lt;&#x2F;span&gt;&lt;span&gt;. $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;_SERVER&lt;&#x2F;span&gt;&lt;span&gt;[&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;HTTP_HOST&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;]);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WP_SITEURL&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;WP_HOME&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; multisite settings, should be the same
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WP_ALLOW_MULTISITE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;MULTISITE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; grab the domain from the request and just set it as the current site
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;DOMAIN_CURRENT_SITE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;_SERVER&lt;&#x2F;span&gt;&lt;span&gt;[&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;HTTP_HOST&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;]);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; we get the IDs from `wp_blogs` table
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; and use them here as our domain =&amp;gt; wp_blog.id mappings
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;site &lt;&#x2F;span&gt;&lt;span&gt;= [
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;my-blog.localhost&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;my-other-blog.localhost&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;][$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;_SERVER&lt;&#x2F;span&gt;&lt;span&gt;[&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;HTTP_HOST&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;]];
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; we set the active ID here now that we have the right one
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; based on the domain we are on in this request
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;SITE_ID_CURRENT_SITE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;site&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;BLOG_ID_CURRENT_SITE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;site&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; the rest of the regular stuff
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; up to you what you want here
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WP_DEBUG&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WP_CACHE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;PATH_CURRENT_SITE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;COOKIE_DOMAIN&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;ADMIN_COOKIE_PATH&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;COOKIEPATH&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;define&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;SITECOOKIEPATH&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;So what we are doing here is taking advantage of the way PHP handles requests. Each request runs the entire application. So we can use the request itself as the state of our application. We use the domain to figure out which site we should be loading. Pretty simple.&lt;&#x2F;p&gt;
-&lt;p&gt;Now we don&#x27;t have to make multiple copies of the WordPress setup just to test the basic multisite features.&lt;&#x2F;p&gt;
-&lt;p&gt;I understand that you probably don&#x27;t want to do this as multisite is usually because you want to administrate multiple instances of WordPress at the same time. But when you are just using multisite for managing content. In my case, it was just that the site was multilingual and so we wanted the sites to be identical but the content is swapping in and out. So this is a setup for that instead of having two completely separate folders and copies.&lt;&#x2F;p&gt;
-&lt;p&gt;The nice thing about this is that it also scales nicely. If you have new sites, just &lt;code&gt;valet link&lt;&#x2F;code&gt; the domain, and add to the array of &lt;code&gt;$sites&lt;&#x2F;code&gt;. Done!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Build A Multi-lingual Laravel Site With Subdomains</title>
-        <published>2019-08-25T00:00:00+00:00</published>
-        <updated>2019-08-25T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/"/>
-        <id>https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/">&lt;p&gt;OK, so you want to make Laravel a multi-lingual (or just multi-functional) site based off the subdomain? Cool. Must be an interesting project.&lt;&#x2F;p&gt;
-&lt;p&gt;In order to test this on local development, we are going to use &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&#x2F;docs&#x2F;5.8&#x2F;valet&quot;&gt;Valet&lt;&#x2F;a&gt;. Let&#x27;s say our Laravel project folder is in &lt;code&gt;~&#x2F;Sites&#x2F;multisite&lt;&#x2F;code&gt;. We can use that as our base path moving forward. With Valet, we can set up subdomains with &lt;code&gt;valet link&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I&#x27;m going to pretend that we want to add support for a new subdomain for the French version of our site. I&#x27;m also going to assume that your valet TLD is &lt;code&gt;.localhost&lt;&#x2F;code&gt; and your project is called &lt;code&gt;multisite.localhost&lt;&#x2F;code&gt;. The domain we are adding in this case, it will be &lt;code&gt;fr.multisite.localhost&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;So in order to get that subdomain setup locally, we just go to our site folder and run &lt;code&gt;valet link fr.multisite&lt;&#x2F;code&gt;. This will allow &lt;code&gt;fr.multisite.localhost&lt;&#x2F;code&gt; to route to the same Laravel setup as &lt;code&gt;multisite.localhost&lt;&#x2F;code&gt;. Beauty!&lt;&#x2F;p&gt;
-&lt;p&gt;Well, first things first. Let&#x27;s make a helper to grab the subdomain from the request. This will come in handy for a lot of the future logic switching or setting application state on a per-request basis.&lt;&#x2F;p&gt;
-&lt;p&gt;Let&#x27;s use a &lt;code&gt;macro&lt;&#x2F;code&gt; to add a new method to the &lt;code&gt;Request&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;--- a&#x2F;app&#x2F;Providers&#x2F;AppServiceProvider.php
-&lt;&#x2F;span&gt;&lt;span&gt;+++ b&#x2F;app&#x2F;Providers&#x2F;AppServiceProvider.php
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -3,6 +3,7 @@
-&lt;&#x2F;span&gt;&lt;span&gt; namespace App\Providers;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt; use Illuminate\Support\ServiceProvider;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+use Illuminate\Http\Request;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt; class AppServiceProvider extends ServiceProvider
-&lt;&#x2F;span&gt;&lt;span&gt; {
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -13,7 +14,14 @@ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;class AppServiceProvider extends ServiceProvider
-&lt;&#x2F;span&gt;&lt;span&gt;      *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;     public function register()
-&lt;&#x2F;span&gt;&lt;span&gt;     {
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;-        &#x2F;&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        &#x2F;&#x2F; nice helper for getting the current subdomain
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        Request::macro(&amp;#39;subdomain&amp;#39;, function () {
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            $domain = request()-&amp;gt;server-&amp;gt;get(&amp;#39;HTTP_HOST&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            $split = explode(&amp;#39;.&amp;#39;, $domain, 3);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            &#x2F;&#x2F; get the subdomain or return null
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            return array_get($split, &amp;#39;0&amp;#39;, &amp;#39;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        });
-&lt;&#x2F;span&gt;&lt;span&gt;     }
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now any &amp;quot;request&amp;quot; instance will have a new &lt;code&gt;subdomain&lt;&#x2F;code&gt; method that we can call.&lt;&#x2F;p&gt;
-&lt;p&gt;We need a way to organize the details of each domain. We can use a &lt;code&gt;config&lt;&#x2F;code&gt; for this. So we are going to make a new one and fill it with some details:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;--- &#x2F;dev&#x2F;null
-&lt;&#x2F;span&gt;&lt;span&gt;+++ b&#x2F;config&#x2F;multisite.php
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -0,0 +1,25 @@
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+return [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &#x2F;&#x2F; we are going to set this in a future middleware
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;active&amp;#39; =&amp;gt; null,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;sites&amp;#39; =&amp;gt; [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        &amp;#39;en&amp;#39; =&amp;gt; [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            &amp;#39;default&amp;#39; =&amp;gt; true,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            &amp;#39;locale&amp;#39; =&amp;gt; &amp;#39;en&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            &amp;#39;domain&amp;#39; =&amp;gt; &amp;#39;http:&#x2F;&#x2F;multisite.localhost&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            &amp;#39;label&amp;#39; =&amp;gt; &amp;#39;English&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        ],
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        &amp;#39;fr&amp;#39; =&amp;gt; [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            &amp;#39;locale&amp;#39; =&amp;gt; &amp;#39;fr&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            &amp;#39;domain&amp;#39; =&amp;gt; &amp;#39;http:&#x2F;&#x2F;fr.multisite.localhost&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+            &amp;#39;label&amp;#39; =&amp;gt; &amp;#39;Français&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        ],
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    ],
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+];
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now, we need a way to map the requested domain to the correct locale. We take in our subdomain and then map it to the correct config item. In order to make this happen, we need to make a middleware. A middleware manipulates the request as it moves through our app. We aren&#x27;t going to manipulate the request, we are just going to use the details in the request to set up more config settings.&lt;&#x2F;p&gt;
-&lt;p&gt;Here we go:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;--- &#x2F;dev&#x2F;null
-&lt;&#x2F;span&gt;&lt;span&gt;+++ b&#x2F;app&#x2F;Http&#x2F;Middleware&#x2F;MultisiteMiddleware.php
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -0,0 +1,36 @@
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+namespace App\Http\Middleware;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+use Illuminate\Support\Facades\App;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+use Closure;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+class MultisiteMiddleware
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+{
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &#x2F;**
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+     * Handle an incoming request.
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+     *
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+     * @param  \Illuminate\Http\Request  $request
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+     * @param  \Closure  $next
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+     * @return mixed
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+     *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    public function handle($request, Closure $next)
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    {
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        $sites = collect(config(&amp;#39;multisite.sites&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        $defaultSite = $sites-&amp;gt;firstWhere(&amp;#39;default&amp;#39;, true);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        $currentSite = $sites-&amp;gt;get($request-&amp;gt;subdomain(), $defaultSite);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        &#x2F;&#x2F; put this subdomain in the `env`
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        putenv(&amp;#39;SUBDOMAIN=&amp;#39; . $currentSite[&amp;#39;domain&amp;#39;]);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        &#x2F;&#x2F; make it easier to access the current site config
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        config()-&amp;gt;set(&amp;#39;multisite.active&amp;#39;, $currentSite);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        &#x2F;&#x2F; finally, set the app locale so translations load correctly
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        App::setLocale($currentSite[&amp;#39;locale&amp;#39;]);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        return $next($request);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    }
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We got our new middleware, so we can enable it in the HTTP kernel array:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;--- a&#x2F;app&#x2F;Http&#x2F;Kernel.php
-&lt;&#x2F;span&gt;&lt;span&gt;+++ b&#x2F;app&#x2F;Http&#x2F;Kernel.php
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -14,6 +14,7 @@ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;class Kernel extends HttpKernel
-&lt;&#x2F;span&gt;&lt;span&gt;      * @var array
-&lt;&#x2F;span&gt;&lt;span&gt;      *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;     protected $middleware = [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+        \App\Http\Middleware\MultisiteMiddleware::class,
-&lt;&#x2F;span&gt;&lt;span&gt;         \App\Http\Middleware\TrustProxies::class,
-&lt;&#x2F;span&gt;&lt;span&gt;         \App\Http\Middleware\CheckForMaintenanceMode::class,
-&lt;&#x2F;span&gt;&lt;span&gt;         \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Great! When we make requests now, the &lt;code&gt;config(&#x27;multisite.active&#x27;)&lt;&#x2F;code&gt; is going to return a matched value from the multisite config. If the subdomain doesn&#x27;t match, it will just return the default site config. In our case, the &lt;code&gt;en&lt;&#x2F;code&gt; one.&lt;&#x2F;p&gt;
-&lt;p&gt;Since we are setting the locale, we are going to need to make sure there are translations available for all our text. We do this by adding new language files. These files are PHP files that just return plain arrays. These files go under &lt;code&gt;resources&#x2F;lang&#x2F;{locale}&lt;&#x2F;code&gt;. So for English (locale is &lt;code&gt;en&lt;&#x2F;code&gt;) we put our files under &lt;code&gt;resources&#x2F;lang&#x2F;en&lt;&#x2F;code&gt; and for French (or &lt;code&gt;fr&lt;&#x2F;code&gt;), we put the files under &lt;code&gt;resources&#x2F;lang&#x2F;fr&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;--- &#x2F;dev&#x2F;null
-&lt;&#x2F;span&gt;&lt;span&gt;+++ b&#x2F;resources&#x2F;lang&#x2F;en&#x2F;multisite.php
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -0,0 +1,11 @@
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+return [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;site_title&amp;#39; =&amp;gt; &amp;#39;English Multisite&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;site_label&amp;#39; =&amp;gt; &amp;#39;English&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;welcome&amp;#39; =&amp;gt; &amp;#39;Welcome&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;welcome_message&amp;#39; =&amp;gt; &amp;#39;Welcome to the site. You can change the locale by changing to a supported subdomain.&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;switch_site&amp;#39; =&amp;gt; &amp;#39;Switch site&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+];
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;--- &#x2F;dev&#x2F;null
-&lt;&#x2F;span&gt;&lt;span&gt;+++ b&#x2F;resources&#x2F;lang&#x2F;fr&#x2F;multisite.php
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -0,0 +1,11 @@
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+return [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;site_title&amp;#39; =&amp;gt; &amp;#39;Multisite Français&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;site_label&amp;#39; =&amp;gt; &amp;#39;Français&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;welcome&amp;#39; =&amp;gt; &amp;#39;Bienvenue&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;welcome_message&amp;#39; =&amp;gt; &amp;#39;Bienvenue sur le site. Vous pouvez changer les paramètres régionaux avec le sous-domaine.&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    &amp;#39;switch_site&amp;#39; =&amp;gt; &amp;#39;Changer de site&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+];
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We access these files in a similar way to a &lt;code&gt;config&lt;&#x2F;code&gt; value. We can use the &lt;code&gt;trans&lt;&#x2F;code&gt; function, or we can use the &lt;code&gt;@lang&lt;&#x2F;code&gt; blade directive. Either way, they take a string that represents the path to our array value that we want.&lt;&#x2F;p&gt;
-&lt;p&gt;So, if I want to display the &lt;code&gt;site_title&lt;&#x2F;code&gt; from our &lt;code&gt;resources&#x2F;lang&#x2F;{locale}&#x2F;multisite.php&lt;&#x2F;code&gt;, I would need to run &lt;code&gt;trans(&#x27;multisite.site_title&#x27;)&lt;&#x2F;code&gt;. Laravel will take care of the rest. If we are in a valid locale, great! We will get the correct language. If we are missing a translation for that key, it will fallback to whatever locale we have set in the &lt;code&gt;config&#x2F;app.php&lt;&#x2F;code&gt; under the &lt;code&gt;fallback_locale&lt;&#x2F;code&gt; key. The default is &lt;code&gt;en&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;So how about the javascript side? How do we deal with JSON when working with this setup?&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;javascript-and-json&quot;&gt;JavaScript and JSON&lt;&#x2F;h4&gt;
-&lt;p&gt;Well, if we set things up correctly, the domain should set the locale for us and as long as the URL is correct, we should be good to go!&lt;&#x2F;p&gt;
-&lt;p&gt;We need to add an endpoint to get our JSON from. Let&#x27;s just toss it into &lt;code&gt;routes&#x2F;web.php&lt;&#x2F;code&gt; because we are animals like that:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;diff&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-diff &quot;&gt;&lt;code class=&quot;language-diff&quot; data-lang=&quot;diff&quot;&gt;&lt;span&gt;--- a&#x2F;routes&#x2F;web.php
-&lt;&#x2F;span&gt;&lt;span&gt;+++ b&#x2F;routes&#x2F;web.php
-&lt;&#x2F;span&gt;&lt;span&gt;@@ -14,3 +14,7 @@
-&lt;&#x2F;span&gt;&lt;span&gt; Route::get(&amp;#39;&#x2F;&amp;#39;, function () {
-&lt;&#x2F;span&gt;&lt;span&gt;     return view(&amp;#39;welcome&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt; });
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+Route::get(&amp;#39;&#x2F;locale&amp;#39;, function () {
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+    return response()-&amp;gt;json(config(&amp;#39;multisite.active&amp;#39;), 200);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here, you can see we are just returning whatever the active site is. This will be a JSON object of the active site config. Nice!&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;in-summation&quot;&gt;In Summation&lt;&#x2F;h4&gt;
-&lt;p&gt;Finally, let&#x27;s update the &lt;code&gt;welcome.blade.php&lt;&#x2F;code&gt; just so we can see our changes in progress:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;DOCTYPE &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;html&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;html &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;lang&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{{ str_replace(&amp;#39;_&amp;#39;, &amp;#39;-&amp;#39;, app()-&amp;gt;getLocale()) }}&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;head&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;charset&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;utf-8&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;viewport&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;width=device-width, initial-scale=1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;@lang(&amp;#39;multisite.site_title&amp;#39;)&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;head&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;body&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;            @foreach (config(&amp;#39;multisite.sites&amp;#39;) as $site)
-&lt;&#x2F;span&gt;&lt;span&gt;                &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{{ $site[&amp;#39;domain&amp;#39;] }}&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;{{ $site[&amp;#39;label&amp;#39;] }}&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;            @endforeach
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;@lang(&amp;#39;multisite.welcome&amp;#39;)&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;@lang(&amp;#39;multisite.welcome_message&amp;#39;)&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pre &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;ajax&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pre&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;            document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;DOMContentLoaded&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, () &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;                &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; call that endpoint we created in our route
-&lt;&#x2F;span&gt;&lt;span&gt;                &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;locale&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, {
-&lt;&#x2F;span&gt;&lt;span&gt;                    credentials: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;include&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;                    headers: {
-&lt;&#x2F;span&gt;&lt;span&gt;                        accept: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;application&#x2F;json&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;                        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; make sure we set the language explicitly
-&lt;&#x2F;span&gt;&lt;span&gt;                        &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;accept-language&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;: document.documentElement.lang
-&lt;&#x2F;span&gt;&lt;span&gt;                    }
-&lt;&#x2F;span&gt;&lt;span&gt;                })
-&lt;&#x2F;span&gt;&lt;span&gt;                &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; do the fetch dance...
-&lt;&#x2F;span&gt;&lt;span&gt;                .&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span&gt;((res) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;res&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;json&lt;&#x2F;span&gt;&lt;span&gt;())
-&lt;&#x2F;span&gt;&lt;span&gt;                .&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span&gt;((data) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;                    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ajaxField &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;ajax&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;                    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; prepend this to the output
-&lt;&#x2F;span&gt;&lt;span&gt;                    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ajaxField&lt;&#x2F;span&gt;&lt;span&gt;.innerHTML = &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;&#x2F; loaded via ajax&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;                    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; put our JSON in but format it with 2 spaces
-&lt;&#x2F;span&gt;&lt;span&gt;                    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ajaxField&lt;&#x2F;span&gt;&lt;span&gt;.innerHTML += JSON.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;stringify&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;                });
-&lt;&#x2F;span&gt;&lt;span&gt;            });
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;body&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;html&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We should see something like this when we load up &lt;code&gt;multisite.localhost&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;multisite-demo.gif&quot; target=&quot;_blank&quot; title=&quot;laravel multi-lingual site demo&quot;&gt;&lt;img alt=&quot;laravel multi-lingual site demo&quot; src=&quot;&#x2F;images&#x2F;multisite-demo.gif&quot;&gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Wow! Amazing. So it works! Very nice. We now have the basis for a multilingual site based completely off subdomains and we didn&#x27;t need to install any packages or do any weird magic!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Simple Slack Slash Supplier</title>
-        <published>2019-05-13T00:00:00+00:00</published>
-        <updated>2019-05-13T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/simple-slash-commands/"/>
-        <id>https://ohdoylerules.com/web/simple-slash-commands/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/simple-slash-commands/">&lt;p&gt;&lt;em&gt;This is a reprint of the README from my project &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;simple-slack-slash-supplier&quot;&gt;simple-slack-slash-supplier&lt;&#x2F;a&gt;.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;This examples project showcases a simple way to create new slash commands without having to work too hard.&lt;&#x2F;p&gt;
-&lt;p&gt;This example assumes you have access to &lt;a href=&quot;https:&#x2F;&#x2F;aws.amazon.com&#x2F;lambda&#x2F;&quot;&gt;AWS Lambda&lt;&#x2F;a&gt; as well as have &lt;a href=&quot;https:&#x2F;&#x2F;api.slack.com&#x2F;slash-commands&quot;&gt;created a Slash command in Slack&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;handling-application-x-www-form-urlencoded&quot;&gt;Handling &lt;code&gt;application&#x2F;x-www-form-urlencoded&lt;&#x2F;code&gt;&lt;&#x2F;h3&gt;
-&lt;p&gt;Slack sends their &lt;code&gt;POST&lt;&#x2F;code&gt; requests using &lt;code&gt;Content-Type: application&#x2F;x-www-form-urlencoded&lt;&#x2F;code&gt;. This is not a content type that Lambda supports out-of-the-box. We need to do some legwork in order to map that raw request body to &lt;code&gt;JSON&lt;&#x2F;code&gt; which we can understand more easily in our Node.js handler function.&lt;&#x2F;p&gt;
-&lt;p&gt;Preliminary setup:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;You must create a standalone &lt;code&gt;POST&lt;&#x2F;code&gt; resource action&lt;&#x2F;li&gt;
-&lt;li&gt;Be sure &amp;quot;Integration type&amp;quot; is set to &amp;quot;Lambda Function&amp;quot;&lt;&#x2F;li&gt;
-&lt;li&gt;Make sure &lt;code&gt;Use Lambda Proxy integration&lt;&#x2F;code&gt; is checked&lt;&#x2F;li&gt;
-&lt;li&gt;Remove the original &lt;code&gt;ANY&lt;&#x2F;code&gt; resource action to be sure it doesn&#x27;t conflict&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;mapping-templates&quot;&gt;Mapping templates&lt;&#x2F;h4&gt;
-&lt;p&gt;In order to properly handle &lt;code&gt;application&#x2F;x-www-form-urlencoded&lt;&#x2F;code&gt;, we need to make a mapping template for it.&lt;&#x2F;p&gt;
-&lt;p&gt;Here are the steps:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Click on &amp;quot;Integration Request&amp;quot; when viewing the details of your &lt;code&gt;POST&lt;&#x2F;code&gt; resource action&lt;&#x2F;li&gt;
-&lt;li&gt;Pop open the &amp;quot;Mapping templates&amp;quot; accordion&lt;&#x2F;li&gt;
-&lt;li&gt;Click &amp;quot;Add mapping template&amp;quot;&lt;&#x2F;li&gt;
-&lt;li&gt;Use &lt;code&gt;application&#x2F;x-www-form-urlencoded&lt;&#x2F;code&gt; in the field that appears&lt;&#x2F;li&gt;
-&lt;li&gt;Scroll down and see the new form to enter in your template details&lt;&#x2F;li&gt;
-&lt;li&gt;Select &amp;quot;Method request passthrough&amp;quot; from the &amp;quot;Generate template&amp;quot; dropdown&lt;&#x2F;li&gt;
-&lt;li&gt;Put the following content in the textarea:&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;##  Ripped from &amp;quot;https:&#x2F;&#x2F;stackoverflow.com&#x2F;a&#x2F;52705985&#x2F;1170664&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;body-json&amp;quot; : $input.json(&amp;#39;$&amp;#39;),
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;params&amp;quot; : {
-&lt;&#x2F;span&gt;&lt;span&gt;        #foreach( $token in $input.path(&amp;#39;$&amp;#39;).split(&amp;#39;&amp;amp;&amp;#39;) )
-&lt;&#x2F;span&gt;&lt;span&gt;            #set( $keyVal = $token.split(&amp;#39;=&amp;#39;) )
-&lt;&#x2F;span&gt;&lt;span&gt;            #set( $keyValSize = $keyVal.size() )
-&lt;&#x2F;span&gt;&lt;span&gt;            #if( $keyValSize &amp;gt;= 1 )
-&lt;&#x2F;span&gt;&lt;span&gt;                #set( $key = $util.urlDecode($keyVal[0]) )
-&lt;&#x2F;span&gt;&lt;span&gt;                #if( $keyValSize &amp;gt;= 2 )
-&lt;&#x2F;span&gt;&lt;span&gt;                    #set( $val = $util.urlDecode($keyVal[1]) )
-&lt;&#x2F;span&gt;&lt;span&gt;                #else
-&lt;&#x2F;span&gt;&lt;span&gt;                    #set( $val = &amp;#39;&amp;#39; )
-&lt;&#x2F;span&gt;&lt;span&gt;                #end
-&lt;&#x2F;span&gt;&lt;span&gt;                &amp;quot;$key&amp;quot;: &amp;quot;$util.escapeJavaScript($val)&amp;quot;#if($foreach.hasNext),#end
-&lt;&#x2F;span&gt;&lt;span&gt;            #end
-&lt;&#x2F;span&gt;&lt;span&gt;        #end
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;stage-variables&amp;quot; : {
-&lt;&#x2F;span&gt;&lt;span&gt;        #foreach($key in $stageVariables.keySet())
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;$key&amp;quot; : &amp;quot;$util.escapeJavaScript($stageVariables.get($key))&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;            #if($foreach.hasNext),#end
-&lt;&#x2F;span&gt;&lt;span&gt;        #end
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;context&amp;quot; : {
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;account-id&amp;quot; : &amp;quot;$context.identity.accountId&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;api-id&amp;quot; : &amp;quot;$context.apiId&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;api-key&amp;quot; : &amp;quot;$context.identity.apiKey&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;authorizer-principal-id&amp;quot; : &amp;quot;$context.authorizer.principalId&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;caller&amp;quot; : &amp;quot;$context.identity.caller&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;cognito-authentication-provider&amp;quot; : &amp;quot;$context.identity.cognitoAuthenticationProvider&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;cognito-authentication-type&amp;quot; : &amp;quot;$context.identity.cognitoAuthenticationType&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;cognito-identity-id&amp;quot; : &amp;quot;$context.identity.cognitoIdentityId&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;cognito-identity-pool-id&amp;quot; : &amp;quot;$context.identity.cognitoIdentityPoolId&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;http-method&amp;quot; : &amp;quot;$context.httpMethod&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;stage&amp;quot; : &amp;quot;$context.stage&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;source-ip&amp;quot; : &amp;quot;$context.identity.sourceIp&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;user&amp;quot; : &amp;quot;$context.identity.user&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;user-agent&amp;quot; : &amp;quot;$context.identity.userAgent&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;user-arn&amp;quot; : &amp;quot;$context.identity.userArn&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;request-id&amp;quot; : &amp;quot;$context.requestId&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;resource-id&amp;quot; : &amp;quot;$context.resourceId&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;quot;resource-path&amp;quot; : &amp;quot;$context.resourcePath&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;ul&gt;
-&lt;li&gt;Paste the content above in the textarea&lt;&#x2F;li&gt;
-&lt;li&gt;Click &amp;quot;Save&amp;quot; to confirm the content of the textarea&lt;&#x2F;li&gt;
-&lt;li&gt;From the &amp;quot;Actions&amp;quot; dropdown select &amp;quot;Deploy API&amp;quot;&lt;&#x2F;li&gt;
-&lt;li&gt;Deploy the API changes as you normally would&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Now you should now be able to handle &lt;code&gt;POST&lt;&#x2F;code&gt; requests with content type of &lt;code&gt;application&#x2F;x-www-form-urlencoded&lt;&#x2F;code&gt; and they will be converted right into &lt;code&gt;JSON&lt;&#x2F;code&gt; automatically!&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;testing&quot;&gt;Testing&lt;&#x2F;h3&gt;
-&lt;p&gt;You can edit &lt;code&gt;hello-command.json&lt;&#x2F;code&gt; to add details about your command in order to test the different handlers. Add new files and new tests scripts to &lt;code&gt;package.json&lt;&#x2F;code&gt; to keep going.&lt;&#x2F;p&gt;
-&lt;p&gt;Run the commands with:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;npm install
-&lt;&#x2F;span&gt;&lt;span&gt;npm run test
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>SQL As An API</title>
-        <published>2019-05-12T00:00:00+00:00</published>
-        <updated>2019-05-12T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/sql-as-an-api/"/>
-        <id>https://ohdoylerules.com/web/sql-as-an-api/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/sql-as-an-api/">&lt;p&gt;There has been a lot of fanfare around the idea of &lt;a href=&quot;https:&#x2F;&#x2F;graphql.org&#x2F;&quot;&gt;GraphQL&lt;&#x2F;a&gt; lately. For good reason in my opinion.&lt;&#x2F;p&gt;
-&lt;p&gt;GraphQL allows you to essentially define your API with your query. For example, if you want to only include a single field then you can do that. If you want to nest related items, or not, you can do that as well.&lt;&#x2F;p&gt;
-&lt;p&gt;If you take a quick look at the GraphQL website (as it is today) you can see how they lay this out:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;# Describe your data
-&lt;&#x2F;span&gt;&lt;span&gt;type Project {
-&lt;&#x2F;span&gt;&lt;span&gt;  name: String
-&lt;&#x2F;span&gt;&lt;span&gt;  tagline: String
-&lt;&#x2F;span&gt;&lt;span&gt;  created_at: Int
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;# Ask for what you want
-&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  project(name: &amp;quot;My Project&amp;quot;) {
-&lt;&#x2F;span&gt;&lt;span&gt;    tagline
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;# Get predictable results
-&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;project&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;tagline&amp;quot;: &amp;quot;A query language for APIs&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Pretty straightforward. You create a model of your data that describes it, write a query that matches the model, and get the results.&lt;&#x2F;p&gt;
-&lt;p&gt;Although, this should already look familiar to anyone that has used a relational database before. What if we massage this example so it fits a more classic datastore:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;# Describe your data
-&lt;&#x2F;span&gt;&lt;span&gt;CREATE TABLE &amp;quot;project&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;(
-&lt;&#x2F;span&gt;&lt;span&gt;    [name] NVARCHAR(40),
-&lt;&#x2F;span&gt;&lt;span&gt;    [tagline] NVARCHAR(120),
-&lt;&#x2F;span&gt;&lt;span&gt;    [created_at] INTEGER NOT NULL
-&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;# Ask for what you want
-&lt;&#x2F;span&gt;&lt;span&gt;SELECT `tagline` FROM `projects` WHERE `name` = &amp;quot;My Project&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;# Get predictable results
-&lt;&#x2F;span&gt;&lt;span&gt;[
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;tagline&amp;quot;: &amp;quot;A query language for APIs&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;So this really is just another way to store and query your data. We describe the structure, query it using the specified query language with our expected structure, and print out the results.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;So can we create a GraphQL experience using just SQL?&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;So can we create a GraphQL experience using just SQL? Short answer, yes. This isn&#x27;t a new concept though. There is a tool called &lt;a href=&quot;https:&#x2F;&#x2F;simonwillison.net&#x2F;2017&#x2F;Nov&#x2F;13&#x2F;datasette&#x2F;#Arbitrary_SQL_55&quot;&gt;datasette&lt;&#x2F;a&gt; that does just this.&lt;&#x2F;p&gt;
-&lt;p&gt;So where do we start? Well, we don&#x27;t want users to be able to modify our database. We want to safely expose SQL to the internet. Crazy idea but it just might work.&lt;&#x2F;p&gt;
-&lt;p&gt;So what we want to do is open a Sqlite database using the &amp;quot;ro&amp;quot; (read only) mode (see &lt;a href=&quot;http:&#x2F;&#x2F;www.sqlite.org&#x2F;draft&#x2F;c3ref&#x2F;open.html&quot;&gt;mode details here&lt;&#x2F;a&gt;). This mode means that you &lt;em&gt;cannot modify the database&lt;&#x2F;em&gt;. You can only run queries that are reads. This is a great feature as we need to expose this database to the public internet if we are going to use it as an API.&lt;&#x2F;p&gt;
-&lt;p&gt;Once we have a mounted sqlite database that is set to &amp;quot;read only&amp;quot; mode, we can then pass queries right to it and return the results.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;basic-example&quot;&gt;Basic Example&lt;&#x2F;h3&gt;
-&lt;p&gt;We are going to whip up this example using PHP and the &lt;code&gt;chinook&lt;&#x2F;code&gt; database &lt;a href=&quot;http:&#x2F;&#x2F;www.sqlitetutorial.net&#x2F;sqlite-sample-database&#x2F;&quot;&gt;from this site&lt;&#x2F;a&gt;. It is insanely easy to get this working using the &lt;code&gt;SQLite3&lt;&#x2F;code&gt; class and a single &lt;code&gt;json_encode&lt;&#x2F;code&gt; call.&lt;&#x2F;p&gt;
-&lt;p&gt;Let&#x27;s see how to get this done:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; be sure to open with `SQLITE3_OPEN_READONLY`
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;db &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;new &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;SQLite3&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;chinook.sqlite&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, SQLITE3_OPEN_READONLY);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; pull out the query from the POST request
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;rows &lt;&#x2F;span&gt;&lt;span&gt;= $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;db&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;_POST&lt;&#x2F;span&gt;&lt;span&gt;[&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;]);
-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;results &lt;&#x2F;span&gt;&lt;span&gt;= [];
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;while &lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;row &lt;&#x2F;span&gt;&lt;span&gt;= $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;rows&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;fetchArray&lt;&#x2F;span&gt;&lt;span&gt;(SQLITE3_ASSOC)) {
-&lt;&#x2F;span&gt;&lt;span&gt;    $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;results&lt;&#x2F;span&gt;&lt;span&gt;[] = $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;row&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo json_encode&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;results&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;OK. That was easy. This is all we need to support calls to this &amp;quot;server&amp;quot;. Let&#x27;s save this to &lt;code&gt;index.php&lt;&#x2F;code&gt;. And start a webserver on port &lt;code&gt;8000&lt;&#x2F;code&gt;. If you didn&#x27;t know this, PHP has a built-in server just like the one python has. We can start it like so:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;php -S&lt;&#x2F;span&gt;&lt;span&gt; localhost:8000
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You should see some output information about what the server is doing. Now we can make calls to this API:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;curl --request&lt;&#x2F;span&gt;&lt;span&gt; POST \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --url&lt;&#x2F;span&gt;&lt;span&gt; http:&#x2F;&#x2F;localhost:8000 \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --header &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Content-Type: application&#x2F;x-www-form-urlencoded&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --data &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query=SELECT LastName FROM employees&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We should see the following output in our console:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;[
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Adams&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Edwards&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Peacock&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Park&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Johnson&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Mitchell&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;King&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Callahan&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;getting-fancier&quot;&gt;Getting fancier&lt;&#x2F;h3&gt;
-&lt;p&gt;Nice! So this works. Let&#x27;s try to do something a little more fancy:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;curl --request&lt;&#x2F;span&gt;&lt;span&gt; POST \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --url&lt;&#x2F;span&gt;&lt;span&gt; http:&#x2F;&#x2F;localhost:8000 \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --header &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Content-Type: application&#x2F;x-www-form-urlencoded&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --data &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query=SELECT printf(&amp;quot;%s %s&amp;quot;, FirstName, LastName) AS FullName, FirstName, LastName FROM employees&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Our output:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;[
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FullName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Andrew Adams&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FirstName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Andrew&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Adams&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FullName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Nancy Edwards&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FirstName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Nancy&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Edwards&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FullName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Jane Peacock&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FirstName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Jane&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Peacock&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FullName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Margaret Park&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FirstName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Margaret&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Park&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FullName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Steve Johnson&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FirstName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Steve&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Johnson&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FullName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Michael Mitchell&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FirstName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Michael&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Mitchell&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FullName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Robert King&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FirstName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Robert&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;King&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FullName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Laura Callahan&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;FirstName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Laura&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Callahan&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;How about a little example that searches a users name?&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;curl --request&lt;&#x2F;span&gt;&lt;span&gt; POST \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --url&lt;&#x2F;span&gt;&lt;span&gt; http:&#x2F;&#x2F;localhost:8000 \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --header &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Content-Type: application&#x2F;x-www-form-urlencoded&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --data &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query=SELECT printf (&amp;quot;%s %s&amp;quot;, employees.FirstName, employees.LastName) AS full_name FROM employees WHERE full_name LIKE &amp;quot;an%&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We see that we found the user:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;[
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Andrew Adams&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Let&#x27;s do an even more sophisticated example:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;curl --request&lt;&#x2F;span&gt;&lt;span&gt; POST \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --url&lt;&#x2F;span&gt;&lt;span&gt; http:&#x2F;&#x2F;localhost:8000 \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --header &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Content-Type: application&#x2F;x-www-form-urlencoded&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --data &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query=SELECT e2.EmployeeId AS employee_id, e2.ReportsTo AS reports_to, printf (&amp;quot;%s %s&amp;quot;, e2.FirstName, e2.LastName) AS employee_full_name, printf (&amp;quot;%s %s&amp;quot;, e1.FirstName, e1.LastName) AS reports_to_full_name FROM employees e1 INNER JOIN employees e2 ON e1.EmployeeId = e2.ReportsTo WHERE e1.ReportsTo IS NOT NULL&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;And our output:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;[
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_id&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Jane Peacock&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Nancy Edwards&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_id&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Margaret Park&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Nancy Edwards&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_id&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;5&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Steve Johnson&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Nancy Edwards&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_id&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;7&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;6&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Robert King&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Michael Mitchell&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_id&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;8&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;6&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;employee_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Laura Callahan&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;reports_to_full_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Michael Mitchell&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Awesome! As you can see this is pretty great! We have a basic API that we can use not only to read but to handle relationships as well. Sweet!&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;handling-malicious-queries&quot;&gt;Handling malicious queries&lt;&#x2F;h3&gt;
-&lt;p&gt;Let&#x27;s try to execute a bad command:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;curl --request&lt;&#x2F;span&gt;&lt;span&gt; POST \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --url&lt;&#x2F;span&gt;&lt;span&gt; http:&#x2F;&#x2F;localhost:8000 \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --header &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Content-Type: application&#x2F;x-www-form-urlencoded&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  --data &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query=INSERT INTO &amp;quot;artists&amp;quot; (&amp;quot;Name&amp;quot;) VALUES (&amp;quot;Philip Glass Ensemble&amp;quot;)&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We should see this output from the server:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;br &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Warning&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;:  SQLite3::query(): Unable to execute statement: attempt to write a readonly database in &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&#x2F;Users&#x2F;james&#x2F;Sites&#x2F;sqliteapi&#x2F;index.php&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt; on line &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;6&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;br &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;br &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Fatal error&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;:  Uncaught Error: Call to a member function fetchArray() on bool in &#x2F;Users&#x2F;james&#x2F;Sites&#x2F;sqliteapi&#x2F;index.php:8
-&lt;&#x2F;span&gt;&lt;span&gt;Stack trace:
-&lt;&#x2F;span&gt;&lt;span&gt;#0 {main}
-&lt;&#x2F;span&gt;&lt;span&gt;  thrown in &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&#x2F;Users&#x2F;james&#x2F;Sites&#x2F;sqliteapi&#x2F;index.php&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt; on line &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;8&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;br &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you can see, we try to execute a bad query that would manipulate the data and we get blocked.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;super-example&quot;&gt;Super example&lt;&#x2F;h3&gt;
-&lt;p&gt;Here is a much more robust example with some error handling, proper status codes, parsing of JSON input, and it also allows you to put the &lt;code&gt;query&lt;&#x2F;code&gt; in a &lt;code&gt;GET&lt;&#x2F;code&gt; or a &lt;code&gt;POST&lt;&#x2F;code&gt; request.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;9e4b2b4f17e33bfb236fbdaf96c41a4c.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;9e4b2b4f17e33bfb236fbdaf96c41a4c.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;Try running the example above and giving things a test. Here is our new request that uses JSON instead:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;curl -X&lt;&#x2F;span&gt;&lt;span&gt; POST \
-&lt;&#x2F;span&gt;&lt;span&gt;  http:&#x2F;&#x2F;localhost:8000 \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  -H &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Content-Type: application&#x2F;json&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;  -d &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{ &amp;quot;query&amp;quot;: &amp;quot;SELECT LastName FROM employees&amp;quot; }&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now we have the following output:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: [
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Adams&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Edwards&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Peacock&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Park&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Johnson&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Mitchell&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;King&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LastName&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Callahan&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  ],
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;meta&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;SELECT LastName FROM employees&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;total&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;8
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;So there you go. A pretty robust solution that has excellent performance, a simple and well-known query language, and supports almost any combination of data.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;in-summation&quot;&gt;In summation&lt;&#x2F;h3&gt;
-&lt;p&gt;So this could be a great option for a lot of applications. You can quickly imagine how this could be used for something like a simple search API. You could have an application hook to add data to this special database when your data is changed. Sqlite is a really viable option for a lot of things as it can grow to 140 TB, supports &lt;a href=&quot;https:&#x2F;&#x2F;www.sqlite.org&#x2F;json1.html&quot;&gt;&lt;code&gt;json_&lt;&#x2F;code&gt; functions&lt;&#x2F;a&gt;, and even &lt;a href=&quot;https:&#x2F;&#x2F;effbot.org&#x2F;zone&#x2F;sqlite-blob.htm&quot;&gt;binary data&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Keep in mind that you can&#x27;t really nest the same way you can in GraphQL. But you might be ok with that depending on your use case.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Laravel Scout Sonic Driver</title>
-        <published>2019-04-12T00:00:00+00:00</published>
-        <updated>2019-04-12T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/laravel-scout-sonic-driver/"/>
-        <id>https://ohdoylerules.com/web/laravel-scout-sonic-driver/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/laravel-scout-sonic-driver/">&lt;p&gt;If you haven&#x27;t heard about the cool new search indexer &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;valeriansaliou&#x2F;sonic&quot;&gt;Sonic&lt;&#x2F;a&gt; you must be living under a rock! If you want to read about Sonic directly from the author, &lt;a href=&quot;https:&#x2F;&#x2F;journal.valeriansaliou.name&#x2F;announcing-sonic-a-super-light-alternative-to-elasticsearch&#x2F;&quot;&gt;check out his blog post&lt;&#x2F;a&gt; on why and how they went on building the tool.&lt;&#x2F;p&gt;
-&lt;p&gt;According to the Sonic page, it is:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Fast, lightweight &amp;amp; schema-less search backend. An alternative to Elasticsearch that runs on a few MBs of RAM.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;There are some main points on the site that outline some of the main features:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Search terms are stored in collections, organized in buckets&lt;&#x2F;li&gt;
-&lt;li&gt;Search results return object identifiers&lt;&#x2F;li&gt;
-&lt;li&gt;Search query typos are corrected&lt;&#x2F;li&gt;
-&lt;li&gt;Insert and remove items in the index at the same time&lt;&#x2F;li&gt;
-&lt;li&gt;Auto-complete any word in real-time via the suggest operation&lt;&#x2F;li&gt;
-&lt;li&gt;Full Unicode compatibility on 80+ languages&lt;&#x2F;li&gt;
-&lt;li&gt;Built as a TCP protocol&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;All these items make this an ideal candidate for the &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&#x2F;docs&#x2F;5.8&#x2F;scout&quot;&gt;Laravel Scout search tool&lt;&#x2F;a&gt;. Scout expects your search engine to return IDs that then get mapped to your query builder which will apply further transformations like &lt;code&gt;WHERE&lt;&#x2F;code&gt; clauses and pagination.&lt;&#x2F;p&gt;
-&lt;p&gt;I took it upon myself to write a driver for Sonic. You can find it on my Github at &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;laravel-scout-sonic&quot;&gt;Laravel Scout Sonic Driver&lt;&#x2F;a&gt; and you can also install it via composer with the following command:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;composer require james2doyle&#x2F;laravel-scout-sonic
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You will need to add some extra config information to &lt;code&gt;config&#x2F;scout.php&lt;&#x2F;code&gt; before you can use everything correctly. Just checkout the &lt;code&gt;README.md&lt;&#x2F;code&gt; because all the instructions are in there.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Function Currying To Make Reusable Code</title>
-        <published>2019-02-17T00:00:00+00:00</published>
-        <updated>2019-02-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/function-currying-to-make-reusable-code/"/>
-        <id>https://ohdoylerules.com/web/function-currying-to-make-reusable-code/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/function-currying-to-make-reusable-code/">&lt;p&gt;Function currying. If you haven&#x27;t heard of it before, let me introduce you to this magical pattern that can help reduce duplicate code and improve readability.&lt;&#x2F;p&gt;
-&lt;p&gt;Currying is just a fancy way to describe a &lt;em&gt;function that returns a function&lt;&#x2F;em&gt;. Pretty simple right? I mean this literally. There are no gotchas here. A &lt;em&gt;function that returns a function&lt;&#x2F;em&gt; is a curried function. Enough words though. I will show you some common code samples and then refactor them to use curried functions.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;cleaning-up-prototype-chains&quot;&gt;Cleaning up prototype chains&lt;&#x2F;h3&gt;
-&lt;p&gt;I&#x27;m sure everyone has written code like this before:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items &lt;&#x2F;span&gt;&lt;span&gt;= [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span&gt;];
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;num&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;item-${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;`);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; returns [&amp;#39;item-1&amp;#39;, &amp;#39;item-2&amp;#39;, &amp;#39;item-3&amp;#39;, &amp;#39;item-4&amp;#39;]
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;num&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;key-${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;`);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; returns [&amp;#39;key-1&amp;#39;, &amp;#39;key-2&amp;#39;, &amp;#39;key-3&amp;#39;, &amp;#39;key-4&amp;#39;]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can see that this function is very specific to the area it&#x27;s being used. We support a variable number of items via our array and they don&#x27;t even have to be numbers. We can build new results with either numbers or strings. That&#x27;s great. But we do have repeated code that essentially does the same thing. The only difference is the string we are prepending.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is an example using currying to &lt;em&gt;D.R.Y&lt;&#x2F;em&gt; (don&#x27;t repeat yourself) this up:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;labelMaker &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;num&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}-${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;`;
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items &lt;&#x2F;span&gt;&lt;span&gt;= [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span&gt;];
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;labelMaker&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;item&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; returns [&amp;#39;item-1&amp;#39;, &amp;#39;item-2&amp;#39;, &amp;#39;item-3&amp;#39;, &amp;#39;item-4&amp;#39;]
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;labelMaker&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; returns [&amp;#39;key-1&amp;#39;, &amp;#39;key-2&amp;#39;, &amp;#39;key-3&amp;#39;, &amp;#39;key-4&amp;#39;]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;When refactoring to curried functions, the thing to keep in mind is &lt;em&gt;what is unique about each function and what is the same?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Things that are unique should be the arguments to the first function call. The things that are the same should be the second function that is called. At least when using this pattern of currying.&lt;&#x2F;p&gt;
-&lt;p&gt;We can actually go a step further again and make this function very flexible:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;labelMaker &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;splitter &lt;&#x2F;span&gt;&lt;span&gt;= &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;num&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;splitter&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;`;
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items &lt;&#x2F;span&gt;&lt;span&gt;= [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span&gt;];
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;labelMaker&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;item&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; returns [&amp;#39;item-1&amp;#39;, &amp;#39;item-2&amp;#39;, &amp;#39;item-3&amp;#39;, &amp;#39;item-4&amp;#39;]
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;items&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;labelMaker&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;_&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; returns [&amp;#39;key_1&amp;#39;, &amp;#39;key_2&amp;#39;, &amp;#39;key_3&amp;#39;, &amp;#39;key_4&amp;#39;]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now that you have seen this in action under a simple example. I think it is useful to chat about using currying to create &amp;quot;constructors&amp;quot;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;using-currying-to-create-constructors&quot;&gt;Using currying to create &amp;quot;constructors&amp;quot;&lt;&#x2F;h3&gt;
-&lt;p&gt;Take this example:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;logger &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;level &lt;&#x2F;span&gt;&lt;span&gt;= &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;info&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;level&lt;&#x2F;span&gt;&lt;span&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;In this example, we have a function called &lt;code&gt;logger&lt;&#x2F;code&gt; which returns an instance of &lt;code&gt;console&lt;&#x2F;code&gt; but bound to whichever &lt;code&gt;level&lt;&#x2F;code&gt; you want. Here is how we might use it:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;logger &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;level &lt;&#x2F;span&gt;&lt;span&gt;= &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;info&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;level&lt;&#x2F;span&gt;&lt;span&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;infoLogger &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;logger&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;errorLogger &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;logger&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;traceLogger &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;logger&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;trace&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;See what I mean about creating &amp;quot;constructors&amp;quot;? We can use the first function almost like a constructor that will return a function that will be called with that first set of arguments applied in some way. Pretty useful right? Instead of making classes or global variables, we can make curried functions that can store those values for use in the returned function.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;currying-event-handlers&quot;&gt;Currying event handlers&lt;&#x2F;h3&gt;
-&lt;p&gt;Given the &amp;quot;constructor&amp;quot; nature of function currying, I typically use these for event handlers. I think of it like tagging. I&#x27;ll show you why here:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;username&amp;quot;&amp;gt; *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;({ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;target&lt;&#x2F;span&gt;&lt;span&gt;: { &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;value &lt;&#x2F;span&gt;&lt;span&gt;} }) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;} input was set to &amp;quot;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;`);
-&lt;&#x2F;span&gt;&lt;span&gt;  };
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;username &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;In this example, we are adding an event handler to an input and basically giving it a label of &amp;quot;username&amp;quot;. Not too special at the moment. If we wanted just the name that would be easy. So let&#x27;s make this function handle more input types:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;**
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;username&amp;quot;&#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &amp;lt;input type=&amp;quot;checkbox&amp;quot; id=&amp;quot;accept&amp;quot; value=&amp;quot;1&amp;quot; &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &amp;lt;select id=&amp;quot;age&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *   &amp;lt;option value=&amp;quot;below 18&amp;quot;&amp;gt;below 18&amp;lt;&#x2F;option&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *   &amp;lt;option value=&amp;quot;above 18&amp;quot;&amp;gt;above 18&amp;lt;&#x2F;option&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &amp;lt;&#x2F;select&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; **&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;({ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;target&lt;&#x2F;span&gt;&lt;span&gt;: { &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;checked &lt;&#x2F;span&gt;&lt;span&gt;} }) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;} input was set to &amp;quot;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;type &lt;&#x2F;span&gt;&lt;span&gt;!== &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;checkbox&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; ? &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;value &lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;checked&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;`);
-&lt;&#x2F;span&gt;&lt;span&gt;  };
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;username &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;accept &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;accept&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;accept&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;change&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;accept&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;age &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;change&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Ok, so now we see 3 different input types, all using the same function but the output is &amp;quot;tagged&amp;quot; via that first function&#x27;s argument.&lt;&#x2F;p&gt;
-&lt;p&gt;We can actually clean this up more though:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;**
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;username&amp;quot;&#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &amp;lt;input type=&amp;quot;checkbox&amp;quot; id=&amp;quot;accept&amp;quot; value=&amp;quot;1&amp;quot; &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &amp;lt;select id=&amp;quot;age&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *   &amp;lt;option value=&amp;quot;below 18&amp;quot;&amp;gt;below 18&amp;lt;&#x2F;option&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *   &amp;lt;option value=&amp;quot;above 18&amp;quot;&amp;gt;above 18&amp;lt;&#x2F;option&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * &amp;lt;&#x2F;select&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; **&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;prop &lt;&#x2F;span&gt;&lt;span&gt;= &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;({ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;target &lt;&#x2F;span&gt;&lt;span&gt;}) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;} input was set to &amp;quot;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;target&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;prop&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;]}&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;`);
-&lt;&#x2F;span&gt;&lt;span&gt;  };
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;username &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;accept &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;accept&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;accept&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;change&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;accept&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;checked&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;age &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;change&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;));
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now you can see our function handles the one special exception on the &amp;quot;checkbox&amp;quot; via an optional argument instead of a ternary. &lt;strong&gt;Slick!&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;This becomes a really nice pattern when working in React or other virtual DOMs since your function can really only access the data directly available to it. Here is the same thing wrapped up to use just a single class method to manage the state for 3 different inputs:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;React &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;react&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ReactDOM &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;react-dom&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;class &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Form &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;extends &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;React.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Component &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;{
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;state &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;{
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    username: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    accept: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    age: &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;below 18&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;  }
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;handleInput &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;prop &lt;&#x2F;span&gt;&lt;span&gt;= &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;{
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;target &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;{
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;setState&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;({
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;]: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;target&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;prop&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;]
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;      });
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    }
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;  }
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;render&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;{
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;(&amp;lt;div className=&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;form&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;      &lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;input type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;text&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;onInput&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;{this.handleInput(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;username&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;)} &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;      &amp;lt;input type=&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;checkbox&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt; onChange={this.handleInput(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;accept&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;, &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;checked&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;)} &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;      &amp;lt;select onChange={this.handleInput(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;)}&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        &amp;lt;option value=&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;below 18&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;&amp;gt;below 18&amp;lt;&#x2F;option&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        &amp;lt;option value=&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;above 18&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;&amp;gt;above 18&amp;lt;&#x2F;option&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;      &amp;lt;&#x2F;select&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;      {&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* shows the state in the document body - not required *&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;      &amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;{JSON.stringify(this.state)}&amp;lt;&#x2F;code&amp;gt;&amp;lt;&#x2F;pre&amp;gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    &amp;lt;&#x2F;div&amp;gt;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;  }
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;ReactDOM.render(&amp;lt;Form &#x2F;&amp;gt;, document.body);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;&lt;em&gt;&lt;a href=&quot;https:&#x2F;&#x2F;6nv8q86yk3.codesandbox.io&#x2F;&quot;&gt;View this example on codesandbox.&lt;&#x2F;a&gt;&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;This is where I think curried functions really shine. This is a very compact way to support a lot of different form items but they can all use the same function even though they may all be unique items. Obviously, you can use this for any type of event handlers. Hopefully you can see the flexibility here and the potential to make simpler code that is more usable.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;in-summation&quot;&gt;In summation&lt;&#x2F;h3&gt;
-&lt;p&gt;So next time you see some of these patterns pop up in your code (or some smells with global variables and repeated code) maybe reach for a curried function instead. &lt;em&gt;Delicious&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>When And Where To Compromise Your App Design</title>
-        <published>2018-10-21T00:00:00+00:00</published>
-        <updated>2018-10-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/"/>
-        <id>https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/">&lt;p&gt;&lt;em&gt;&lt;strong&gt;You won&#x27;t believe number 3!&lt;&#x2F;strong&gt;&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;When initially developing an application or a new feature we are constantly trying to balance best practices in system&#x2F;application design with delivering a finished product. Usually, things like scaling or flexibility become a secondary thought or something that would be &lt;em&gt;&amp;quot;nice to have, if we had the time&amp;quot;&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Given those restrictions or that type of scenario, we need to pick places to &lt;em&gt;compromise on purpose&lt;&#x2F;em&gt;. We need to actively choose a section of the app to cut corners and hide garbage. Fun! Right?&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Should we hardcode this? Should we store this in a column instead of a pivot table? Can we stick it in the HTML for now?&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;We have all heard (or spoken) these types of phrases at some point. If you haven&#x27;t, well it must be nice to live in a fantasy land full of rainbows, puppies, and perfectly designed systems.&lt;&#x2F;p&gt;
-&lt;p&gt;So here is my list of the top 3 places you should not compromise when getting stuck in a situation where compromise is necessary.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;3-http-json-api-design&quot;&gt;3. HTTP JSON API design&lt;&#x2F;h3&gt;
-&lt;p&gt;Building a crappy API for you service or application can be crippling. It can stifle updates, cause a lot of &amp;quot;patch&amp;quot; code inside consumers and clients to fix issues, create uncomfortable conversations with customers who need to update (because you didn&#x27;t think about versioning), and even force you to maintain multiple implementations of similar end-points that are almost identical because you had to fill in gaps after the fact.&lt;&#x2F;p&gt;
-&lt;p&gt;Think of HTTP APIs as contracts. I mean literal contracts not just &amp;quot;code contracts&amp;quot; or interfaces.&lt;&#x2F;p&gt;
-&lt;p&gt;What happens if you enter into an agreement with someone and the contract is missing key information? You could end up really missing out on a lot, or worse still, &lt;em&gt;being sucked into something that you didn&#x27;t understand you were getting into with no feasible escape&lt;&#x2F;em&gt; beyond writing a new contract and getting every single party to sign again. Gross.&lt;&#x2F;p&gt;
-&lt;p&gt;My advice would be to spend more time on designing a robust and verbose API with lots of tests and less time on organizing things behind the scenes. Organization can always come later. I would edge more towards including more information than you need in a response than you are actually using. Maybe even including keys that are empty if you know you are going to need to use them in the near future. Consider using &amp;quot;501 Not Implemented&amp;quot; responses for endpoints that are coming in the future.&lt;&#x2F;p&gt;
-&lt;p&gt;Changing an API once it&#x27;s in the wild is difficult and annoying. If you have a single-page app, this could mean refactoring major parts of the front-end to work with new datasets and responses. So consider what you need now, and in the near future, when designing that JSON response object. Also, try to keep your types consistent. Having to deal use with mixed types and constant variation of types is incredibly painful and adds a lot of type checking for API consumers!&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;2-leveraging-vendor-code-tools&quot;&gt;2. Leveraging vendor code&#x2F;tools&lt;&#x2F;h3&gt;
-&lt;p&gt;As developers we like making stuff. Sometimes that stuff is mixed quality, quickly assembled, or just plain buggy. In the last 10 years or so, the quality and volume of excellent production-grade open source projects has been phenomenal. Unless you are on the bleeding edge of some burgeoning industry or technology, there is probably an open source equivalent of pretty much everything you need.&lt;&#x2F;p&gt;
-&lt;p&gt;I&#x27;ve typically seen people develop their own solutions and spend a lot of energy thinking about problems that someone has already solved. On top of that, instead of choosing a package or service that provides all they need, they decided on a DIY solution or a patchwork of different offerings. Too many times I&#x27;ve seen a project rapidly go from a bespoke group of loose packages to a company&#x27;s main offering with a handful of developers charged to take care of it.&lt;&#x2F;p&gt;
-&lt;p&gt;It&#x27;s not just server-side apps, I&#x27;ve seen this a lot in front-end development. I&#x27;ve done it to myself a dozen times. I can&#x27;t even count the number of hours I spent building my own sliders that were never really perfect and often had bugs in some specific browser because I didn&#x27;t test it enough. Whoops!&lt;&#x2F;p&gt;
-&lt;p&gt;When it comes to support infrastructure like queues, caches, CDNs, and databases, unless you have the time or need, you shouldn&#x27;t be spinning up your own on a dedicated host. There are a lot of services that are reasonably priced that can manage all that for you. It&#x27;s hard to set things up correctly (secure defaults, scalability, interoperability, etc) with tight time frames. So don&#x27;t bother. Choose your flavour of hosting and pick the service that fits your needs and move on. Use those saved hours for more development time. Like organization of code, you can always swap things later when you find the time or you grow to a place where it matters.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;1-database-design&quot;&gt;1. Database design&lt;&#x2F;h3&gt;
-&lt;p&gt;This is my number one place to spend all your time. Doing database tweaks early on is not too hard. But once you start getting a few hundred thousand rows, data in the gigabytes, or distributed databases, migrations become super painful. They need to be meticulously programmed, tested, and then timed properly in order not to break things or take the service down.&lt;&#x2F;p&gt;
-&lt;p&gt;I don&#x27;t have much experience with no-SQL databases at scale. So I can&#x27;t really speak to much on them. But generally, I think the advice is similar to relational database design: big migrations are painful. So try to make sure you have a scalable and sustainable design is important.&lt;&#x2F;p&gt;
-&lt;p&gt;Regarding relation data stores, my advice is mostly about relationships. Too often I see things like &lt;code&gt;address1&lt;&#x2F;code&gt;, &lt;code&gt;address2&lt;&#x2F;code&gt;, &lt;code&gt;address3&lt;&#x2F;code&gt;, etc. You get the deal. Instead of using a pivot table, someone decided it was too much work. So now you are growing the table horizontally and with each row instead of, get this, &lt;em&gt;being relational&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Another one I&#x27;ve been bit by is using one-to-many relationships instead of designing for many-to-many with a &lt;code&gt;LIMIT 1&lt;&#x2F;code&gt; by default. It is so much easier to turn a many-to-many into a one-to-many than it is to do the reverse. How many times have you made something and then a week or a month later someone from product development or business asks &lt;em&gt;&amp;quot;how hard it would be to make it so that X could have many Y&#x27;s?&amp;quot;&lt;&#x2F;em&gt; Only to be met with you screaming at the top of your lungs because you need to not only migrate the existing database but update all the code as well.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;in-summation&quot;&gt;In Summation&lt;&#x2F;h3&gt;
-&lt;p&gt;I&#x27;ve really become a fan of &amp;quot;where should we hide our garbage?&amp;quot;. It&#x27;s always going to happen so we should figure out where to put the mess so that it&#x27;s either easy to clean up or it isn&#x27;t somewhere critical.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Using Sqlite As A Cache In Laravel</title>
-        <published>2018-10-04T00:00:00+00:00</published>
-        <updated>2018-10-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/laravel-sqlite-cache/"/>
-        <id>https://ohdoylerules.com/web/laravel-sqlite-cache/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/laravel-sqlite-cache/">&lt;p&gt;I was playing with a new project using &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&#x2F;docs&#x2F;5.7&quot;&gt;Laravel 5.7&lt;&#x2F;a&gt; and I wanted to use &lt;a href=&quot;https:&#x2F;&#x2F;www.sqlite.org&#x2F;index.html&quot;&gt;sqlite&lt;&#x2F;a&gt; for the &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&#x2F;docs&#x2F;5.7&#x2F;cache&quot;&gt;cache feature&lt;&#x2F;a&gt; that comes with the framework. If you didn&#x27;t know, Laravel allows you to choose a cache &amp;quot;driver&amp;quot; and Laravel will handle writes, reads, and even locks, using that cache.&lt;&#x2F;p&gt;
-&lt;p&gt;By default, Laravel includes drivers for &amp;quot;database&amp;quot;, &amp;quot;redis&amp;quot;, &amp;quot;memcached&amp;quot;, &amp;quot;file&amp;quot;, and &amp;quot;array&amp;quot;. In typical Laravel fashion, you can even &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&#x2F;docs&#x2F;5.7&#x2F;cache#adding-custom-cache-drivers&quot;&gt;write your own drivers&lt;&#x2F;a&gt;. All you need to do is implement the &lt;code&gt;Illuminate\Contracts\Cache\Store&lt;&#x2F;code&gt; interface using the technology you wish to turn into a cache driver.&lt;&#x2F;p&gt;
-&lt;p&gt;To my surprise, the &amp;quot;database&amp;quot; cache driver does not support multiple database connections. Which means whatever &lt;code&gt;DB_CONNECTION&lt;&#x2F;code&gt; you are using is also going to be used for the cache database driver when it is selected. I took a look to see how the &amp;quot;database&amp;quot; driver was implemented (it&#x27;s in the &lt;code&gt;Illuminate\Cache\DatabaseStore&lt;&#x2F;code&gt; class) to see if there is any way I can make the database driver use a different connection than the one set in &lt;code&gt;DB_CONNECTION&lt;&#x2F;code&gt;. Looking deeper, it turns out that by extending &lt;code&gt;Illuminate\Cache\DatabaseStore&lt;&#x2F;code&gt;, I was able to put together a &amp;quot;sqlite&amp;quot; cache driver really quickly.&lt;&#x2F;p&gt;
-&lt;p&gt;Before you set this all up, make sure you create the empty database. From the root of your project run: &lt;code&gt;touch database&#x2F;cache.sqlite&lt;&#x2F;code&gt;. This creates an empty file that sqlite will mount as the database. To learn more about sqlite and how the file works, check out the page at the sqlite site about the &lt;a href=&quot;https:&#x2F;&#x2F;www.sqlite.org&#x2F;onefile.html&quot;&gt;Single-file Cross-platform Database&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;For the next step, you will need to make sure that the &lt;code&gt;sqlite3&lt;&#x2F;code&gt; command line tool is installed. If you need help getting that going, &lt;a href=&quot;https:&#x2F;&#x2F;www.sqlite.org&#x2F;download.html&quot;&gt;check out the download page for the tool&lt;&#x2F;a&gt;. Once that is installed, or if you already have it, you can then connect to the database file via the sqlite cli: &lt;code&gt;sqlite3 database&#x2F;cache.sqlite&lt;&#x2F;code&gt;. If you want more info about the CLI tool, &lt;a href=&quot;https:&#x2F;&#x2F;www.sqlite.org&#x2F;cli.html&quot;&gt;check out the sqlite docs&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Finally, you need to setup that sqlite database by executing the following SQL statement:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sql&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sql &quot;&gt;&lt;code class=&quot;language-sql&quot; data-lang=&quot;sql&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;CREATE TABLE &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;cache&lt;&#x2F;span&gt;&lt;span&gt;` (
-&lt;&#x2F;span&gt;&lt;span&gt;   `&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span&gt;` STRING &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;PRIMARY KEY&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;   `&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span&gt;` &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;TEXT &lt;&#x2F;span&gt;&lt;span&gt;NOT &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;NULL&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;   `&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;expiration&lt;&#x2F;span&gt;&lt;span&gt;` &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;INT DEFAULT &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0
-&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This statement will update the sqlite database with the required table and columns. This SQL is the same statement that runs when the cache migrations are created via the &lt;code&gt;artisan&lt;&#x2F;code&gt; command. To see that the SQL statement worked, you can run the &lt;code&gt;.tables&lt;&#x2F;code&gt; command. You should see &lt;code&gt;cache&lt;&#x2F;code&gt; in the list. To close out of the sqlite cli, run &lt;code&gt;.exit&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Now that everything is all setup, here is the class that implements the &lt;code&gt;SqliteStore&lt;&#x2F;code&gt; that allows for a sqlite driver:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; put in app\Extensions
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;namespace &lt;&#x2F;span&gt;&lt;span&gt;App\Extensions;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;use &lt;&#x2F;span&gt;&lt;span&gt;Illuminate\Cache\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;DatabaseStore&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;use &lt;&#x2F;span&gt;&lt;span&gt;Illuminate\Support\Facades\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Config&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;**
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * SqliteStore delegates to DatabaseStore but with an sqlite connection instead
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;class &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;SqliteStore &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;extends &lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;DatabaseStore
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;{
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;public function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;__construct&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;()
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    {
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; load the config or use the default
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cache.stores.sqlite&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;, [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;            &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;driver&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sqlite&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;            &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;table&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cache&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;            &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;database&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;env&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;CACHE_DATABASE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;database_path&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;cache.sqlite&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;)),
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;            &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;prefix&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        ]);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; Set the temporary configuration
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Config&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;database.connections.sqlite_cache&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;, [
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;            &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;driver&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sqlite&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;,
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;            &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;database&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;database&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;],
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;            &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;prefix&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; =&amp;gt; $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;prefix&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;],
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        ]);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;connection &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;app&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;db&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;)-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;connection&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;sqlite_cache&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;parent&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;__construct&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;connection&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;, &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;table&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;], &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;prefix&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;]);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;    }
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eff1f5;&quot;&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You may need to run &lt;code&gt;composer dumpautoload&lt;&#x2F;code&gt; in order for the new class to be picked up if you are creating the &lt;code&gt;app&#x2F;Extensions&lt;&#x2F;code&gt; folder for the first time.&lt;&#x2F;p&gt;
-&lt;p&gt;Then, add the following to your &lt;code&gt;AppServiceProvider@boot&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;&#x2F;&#x2F; AppServiceProvider@boot
-&lt;&#x2F;span&gt;&lt;span&gt;\Cache::extend(&amp;#39;sqlite&amp;#39;, function ($app) {
-&lt;&#x2F;span&gt;&lt;span&gt;    return \Cache::repository(new \App\Extensions\SqliteStore);
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;That&#x27;s it for the code side. But we still need to setup the config so the driver details exist. Open up the &lt;code&gt;config&#x2F;cache.php&lt;&#x2F;code&gt; file. Add these details so the config can be properly loaded:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;&#x2F;&#x2F; ... the rest of config&#x2F;cache.php
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;sqlite&amp;#39; =&amp;gt; [
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;#39;driver&amp;#39; =&amp;gt; &amp;#39;sqlite&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;#39;table&amp;#39; =&amp;gt; &amp;#39;cache&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;#39;database&amp;#39; =&amp;gt; env(&amp;#39;CACHE_DATABASE&amp;#39;, database_path(&amp;#39;cache.sqlite&amp;#39;)),
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;#39;prefix&amp;#39; =&amp;gt; &amp;#39;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;],
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can then update your &lt;code&gt;.env&lt;&#x2F;code&gt; to have &lt;code&gt;CACHE_DRIVER=sqlite&lt;&#x2F;code&gt; and everything should be good!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Angular (v1.x) Through iFrame</title>
-        <published>2018-04-29T00:00:00+00:00</published>
-        <updated>2018-04-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/angular-through-iframe/"/>
-        <id>https://ohdoylerules.com/web/angular-through-iframe/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/angular-through-iframe/">&lt;p&gt;&lt;strong&gt;Note&lt;&#x2F;strong&gt;: This is an older project&#x2F;repo that uses the previous version of Angular (v1.x) so keep that in mind.&lt;&#x2F;p&gt;
-&lt;p&gt;I was working on a project that required users to generate content that had dynamic templates. The goal was to make the entire thing was just a javascript client application and not have to worry about adding a server for handling the updates. Even better, if we could avoid AJAX requests for each keypress to update the content of the template, that would be even better.&lt;&#x2F;p&gt;
-&lt;p&gt;This was a perfect problem for an iframe to solve as we had remote HTML files that would be loaded into an editor and then you can edit the data insde them. When you were finished, you could generate a PDF from the content inside the iframe. It was pretty sweet and worked really well.&lt;&#x2F;p&gt;
-&lt;p&gt;While writing the app, I had to find a way to get data from the parent window into the iframe. If you didn&#x27;t know this, you can actually call &lt;code&gt;window&lt;&#x2F;code&gt; functions on an iframe you own (one that has &lt;code&gt;sandbox=&amp;quot;allow-same-origin allow-scripts&amp;quot;&lt;&#x2F;code&gt; set on the tag and is the same domain) which will allow you to send data down to the iframe and have it run events, change code, or in my case, trigger &lt;code&gt;$scope&lt;&#x2F;code&gt; updates.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;angular-iframe.gif&quot; alt=&quot;angular through iframe demo&quot;&gt;
-  &lt;p&gt;&lt;small&gt;Angular Through iFrame Preview&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;All we need to do is access the &lt;code&gt;contentWindow&lt;&#x2F;code&gt; (on our parent iframe) property and call functions that exist in the &lt;code&gt;window&lt;&#x2F;code&gt; of the child iframe.&lt;&#x2F;p&gt;
-&lt;p&gt;This looks like the following:&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;Parent page:&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; somewhere in the parent main js file probably another controller
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;iframe &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;iframe&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;iframe&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;contentWindow&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;update&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;dataFromParent&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;&lt;strong&gt;Child iframe page:&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; inside the iframe controller
-&lt;&#x2F;span&gt;&lt;span&gt;window.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;update &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;dataFromParent&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$scope&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$apply&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; replace the scope with an object from the parent
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$scope &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;dataFromParent&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  });
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you can see, this is incredibly simple and allows for &lt;em&gt;write-only&lt;&#x2F;em&gt; control of an iframe.&lt;&#x2F;p&gt;
-&lt;p&gt;What I did to integrate with Angular was use that window function inside the iframes controller to call &lt;code&gt;$scope.$apply&lt;&#x2F;code&gt; with the new data.&lt;&#x2F;p&gt;
-&lt;p&gt;You can &lt;a href=&quot;https:&#x2F;&#x2F;james2doyle.github.io&#x2F;angular-through-iframe&quot;&gt;see a live demo&lt;&#x2F;a&gt; of the technique or &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;angular-through-iframe&quot;&gt;visit the demo project on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Nuxt Firebase Starter</title>
-        <published>2017-12-21T00:00:00+00:00</published>
-        <updated>2017-12-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/nuxt-firebase-starter/"/>
-        <id>https://ohdoylerules.com/web/nuxt-firebase-starter/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/nuxt-firebase-starter/">&lt;p&gt;Over the past few weeks, I have been working on &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;nuxt-firebase-auth&quot;&gt;a boilerplate&#x2F;starting template for using the Nuxt.js framework with Firebase&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I plan to use this boilerplate for easily creating apps that require authentication, real-time feedback from the database (chats, threads, account balances, etc.), and proper modern support for the new PWA (progressive web app) conventions (service worker, offline, code-splitting, etc.) without having to worry too much about laying the ground work each time.&lt;&#x2F;p&gt;
-&lt;p&gt;If you already know about Nuxt and Firebase, I suggest just checking out the project and playing around with it. By default, I have setup the Nuxt PWA module, social login support for Google and Github, and also setup a database convention called “accounts” where users manage their public profile inside the application.&lt;&#x2F;p&gt;
-&lt;p&gt;If you are unfamiliar with the tools, keep reading!&lt;&#x2F;p&gt;
-&lt;p&gt;+++&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;nuxt&quot;&gt;Nuxt&lt;&#x2F;h3&gt;
-&lt;p&gt;As you may be able to tell from this post and some of the other posts on this site, I am also a &lt;a href=&quot;https:&#x2F;&#x2F;vuejs.org&#x2F;&quot;&gt;Vue.js&lt;&#x2F;a&gt; fan. I have been using it since before version 1 was released.&lt;&#x2F;p&gt;
-&lt;p&gt;About four months ago, I started using a relatively new framework created on top of Vue.js (and stolen from the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;zeit&#x2F;next.js&#x2F;&quot;&gt;Next.js React project&lt;&#x2F;a&gt;) called &lt;a href=&quot;https:&#x2F;&#x2F;nuxtjs.org&#x2F;&quot;&gt;Nuxt.js&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Essentially, Nuxt (and Next) setup conventions for routing pages, creating components, adding “stores” (flux, redux, etc.) based on a directory setup.&lt;&#x2F;p&gt;
-&lt;p&gt;So, for example (these are taken from the Nuxt documentation), you have a structure as follows:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;pages&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;--| _slug&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;-----| comments.vue
-&lt;&#x2F;span&gt;&lt;span&gt;-----| index.vue
-&lt;&#x2F;span&gt;&lt;span&gt;--| users&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;-----| _id.vue
-&lt;&#x2F;span&gt;&lt;span&gt;--| index.vue
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;And this will generate the following routes automatically:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;router: {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;routes&lt;&#x2F;span&gt;&lt;span&gt;: [
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;index&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;&#x2F;&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;pages&#x2F;index.vue&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;users-id&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;&#x2F;users&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;id?&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;pages&#x2F;users&#x2F;_id.vue&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;slug&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;slug&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;pages&#x2F;_slug&#x2F;index.vue&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;slug-comments&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;slug&#x2F;comments&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;pages&#x2F;_slug&#x2F;comments.vue&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  ]
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can then call &lt;code&gt;this.$route.params.slug&lt;&#x2F;code&gt;  (for slug-comments) or &lt;code&gt;this.$route.params.id&lt;&#x2F;code&gt; (for users-id) inside the components or pages that are on that route.&lt;&#x2F;p&gt;
-&lt;p&gt;Pretty slick right?&lt;&#x2F;p&gt;
-&lt;p&gt;So Nuxt is cool. It lets me quickly create an SPA (single-page app) without worrying about setting up an elaborate route object or worrying about how to organize my projects folders and logic. You just toss files in folders, and everything pretty much works.&lt;&#x2F;p&gt;
-&lt;p&gt;Some people &lt;strong&gt;hate this&lt;&#x2F;strong&gt; but I find the structure liberating. I plan to use that additional time&#x2F;energy to focus on building my app and not organizing configs or fiddling with route logic.&lt;&#x2F;p&gt;
-&lt;p&gt;Now onto the Firebase portion of the project:&lt;&#x2F;p&gt;
-&lt;hr &#x2F;&gt;
-&lt;h3 id=&quot;firebase&quot;&gt;Firebase&lt;&#x2F;h3&gt;
-&lt;p&gt;If you have some experience with &lt;a href=&quot;https:&#x2F;&#x2F;firebase.google.com&#x2F;&quot;&gt;Firebase&lt;&#x2F;a&gt; you probably know that it is an excellent service offering some nice features for dealing with &amp;quot;real-time&amp;quot; data as well as some other features like storage, push notifications, serverless functions, and authentication. The best part is that it is usually free for most small projects as they don&#x27;t use enough resources to qualify for the paid tiers of service.&lt;&#x2F;p&gt;
-&lt;p&gt;When I first started using Firebase, I didn&#x27;t like it. The concept of &lt;code&gt;snapshots&lt;&#x2F;code&gt; and paths was confusing for someone coming from a key-value store or a more traditional relational database. It also lacks higher order sorting and querying. For example, you can query for ranges, but you can&#x27;t query for &lt;code&gt;LIKE&lt;&#x2F;code&gt; or &amp;quot;matches&#x2F;patterns”.&lt;&#x2F;p&gt;
-&lt;p&gt;Queries like that can be limiting, but once you shift your mentality to something more like reducing and filtering, these issues disappear. You also need to be conscious about how you structure your database, &lt;em&gt;but I digress&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;As I got more comfortable with it, I began to see how powerful and easy it is to build things like chats, threads&#x2F;commenting systems, atomic counters (“like” systems, ratings, etc.), and even used it to do browser push notifications. I am using it right now to build an API rate limiter!&lt;&#x2F;p&gt;
-&lt;hr &#x2F;&gt;
-&lt;h3 id=&quot;combining-forces&quot;&gt;Combining Forces!&lt;&#x2F;h3&gt;
-&lt;p&gt;Using Nuxt and Firebase together has been easy. I was able to create a nice login flow (with support for Google and Github OAuth!) within about a day.&lt;&#x2F;p&gt;
-&lt;p&gt;I also added support for this convention called “accounts”. When a new user signs up, we create an account on the Firebase database that is read-write for that user. This object contains their display name and profile image path.&lt;&#x2F;p&gt;
-&lt;p&gt;Since we have a profile image (either pulled from the social login or assigned a default), I figured; &lt;em&gt;why not add support for uploading a new profile image to the Firebase storage?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;So I did! And now you can easily manage a mini-profile on the app without any extra configuration. It is there by default:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;nuxt-firebase-account-preview.gif&quot; alt=&quot;nuxt firebase account preview&quot;&gt;
-  &lt;p&gt;&lt;small&gt;Nuxt Firebase Account Preview&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;As you can see from the animation above, super simple interface with live updating thanks to the bindings from our application store to the Firebase database!&lt;&#x2F;p&gt;
-&lt;p&gt;Again, you can check out the project &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;nuxt-firebase-auth&quot;&gt;at the repo on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Using DigitalOcean Spaces</title>
-        <published>2017-11-18T00:00:00+00:00</published>
-        <updated>2017-11-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/using-digitalocean-spaces/"/>
-        <id>https://ohdoylerules.com/web/using-digitalocean-spaces/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/using-digitalocean-spaces/">&lt;p&gt;If you are a fan of &lt;a href=&quot;https:&#x2F;&#x2F;m.do.co&#x2F;c&#x2F;802f151adea5&quot;&gt;DigitalOcean&lt;&#x2F;a&gt;, or you keep an eye on DevOps news, then you probably heard about the new &lt;a href=&quot;https:&#x2F;&#x2F;www.digitalocean.com&#x2F;products&#x2F;object-storage&#x2F;&quot;&gt;DigitalOcean Spaces&lt;&#x2F;a&gt; offering.&lt;&#x2F;p&gt;
-&lt;p&gt;Spaces is essentially an AWS S3-compatible service but with that special DigitalOcean touch.&lt;&#x2F;p&gt;
-&lt;p&gt;Now Spaces is not a 1:1 replacement for S3. There are quite a few features that have not yet been implemented. They also don&#x27;t have any GUI interfaces for things like managing bucket policies or CORS configurations.&lt;&#x2F;p&gt;
-&lt;p&gt;I made an example project for how to use Spaces with an S3 node module (&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;digitalocean-spaces-example&quot;&gt;which you can find here&lt;&#x2F;a&gt;) to see what the differences were when actually using the service.&lt;&#x2F;p&gt;
-&lt;p&gt;I was really surprised to find that it was almost identical.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is an example of how you might tweak your config from an S3 project:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;region&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;nyc3&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; very familiar setting
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;endpoint&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;https&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F;nyc3.digitaloceanspaces.com&amp;#39;, &#x2F;&#x2F; something you probably ignored before
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;signatureVersion&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;&amp;#39;v4&amp;#39;,&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; spaces supports the V4 API
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;s3DisableBodySigning&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;true &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; not sure if this is always required...
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you can see there is really nothing different. The main thing is &lt;code&gt;endpoint&lt;&#x2F;code&gt;. That controls the service basically. By default in S3 it is set to &lt;code&gt;{service}.{region}.amazonaws.com&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Other than that, there was really nothing much different from the regular S3 usage. I found that DigitalOcean was &lt;em&gt;much easier&lt;&#x2F;em&gt; to get started with. I created a bucket in a few seconds and generated an API key right away.&lt;&#x2F;p&gt;
-&lt;p&gt;With S3, you usually have a few steps to create the bucket, then create an IAM user for the bucket, then update the policy, and finally, update the CORS configuration to allow the referrers and methods you want. That&#x27;s a lot of steps.&lt;&#x2F;p&gt;
-&lt;p&gt;If you need that level of control I would still recommend S3. But if you have a simple use-case like a public CDN, I think DigitalOcean Spaces would be a great option.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>3 Ways A Website Project Falls Apart</title>
-        <published>2017-07-29T00:00:00+00:00</published>
-        <updated>2017-07-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/"/>
-        <id>https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/">&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;broken-glass.jpg&quot; alt=&quot;Mens shoes on broken glass. Photo by veeterzy on Unsplash&quot;&gt;
-  &lt;p&gt;&lt;small&gt;Photo by &lt;a href=&quot;https:&#x2F;&#x2F;unsplash.com&#x2F;photos&#x2F;afq5-t0ZGtQ?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText&quot;&gt;veeterzy&lt;&#x2F;a&gt; on &lt;a href=&quot;https:&#x2F;&#x2F;unsplash.com&#x2F;?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText&quot;&gt;Unsplash&lt;&#x2F;a&gt;&lt;&#x2F;small&gt;&lt;&#x2F;p&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Over the last seven years, I have been involved in hundreds of website projects.&lt;&#x2F;p&gt;
-&lt;p&gt;I&#x27;ve worked with a ton of different clients on various types and sizes. From design&#x2F;branding projects all the way to sophisticated web applications. From a couple of thousand dollars to hundreds of thousands of dollars.&lt;&#x2F;p&gt;
-&lt;p&gt;While working on these projects, I noticed that whenever a project started to go sideways, I can trace back the timeline to a single point, or a single reason, where the pain began to manifest.&lt;&#x2F;p&gt;
-&lt;p&gt;So, here are the top 3 reasons (in my opinion) that will cause a website project to fall apart.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;3-confusion-around-responsibilities&quot;&gt;3. Confusion Around Responsibilities&lt;&#x2F;h2&gt;
-&lt;p&gt;Now, this may sound vague, and you can probably assign all these reasons below to this category - but - let me lay out some sub-reasons that will break this down a little better.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;technical-misunderstandings&quot;&gt;Technical Misunderstandings&lt;&#x2F;h3&gt;
-&lt;p&gt;Who owns the domain? Who owns the hosting? Where is the email managed? Which company (yours or mine) pays the hosting bill? How do updates work? What about maintenance?&lt;&#x2F;p&gt;
-&lt;p&gt;All these questions fall under this sub-reason of responsibilities. These are vital points that need to be answered &lt;em&gt;before a project starts&lt;&#x2F;em&gt;. In my experience, these issues tend to arise when you have a client that has no experience with online projects or lacks a general understanding of how a website hierarchy works. They probably don&#x27;t understand how a domain works or how their email is setup.&lt;&#x2F;p&gt;
-&lt;p&gt;These are usually non-issues if you are working with a client that has a technical team in place for any existing web properties.&lt;&#x2F;p&gt;
-&lt;p&gt;For me, these issues tend to become quite a pain as hosting can stop a project in its tracks. Without a place to put the site, we cannot finish. Same rules apply to a domain. Without one, we cannot continue.&lt;&#x2F;p&gt;
-&lt;p&gt;For email, it is typical for a website to have a contact form of some sort or maybe they have a public email listed in the footer or on a contact page. Finding out that the email doesn&#x27;t exist or that the access to that email is lost, will crush a client and make you seem completely incompetent.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Finding out that the email doesn&#x27;t exist or that the access to that email is lost, will crush a client and make you seem completely incompetent.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;You may say that you &amp;quot;don&#x27;t control the email&amp;quot; or &amp;quot;it is managed with the hosting company&amp;quot;. You can even say &amp;quot;they already had a hosting company when they came to us&amp;quot;.&lt;&#x2F;p&gt;
-&lt;p&gt;The problem is that the client doesn&#x27;t usually care about the reason why the problem occurred. Even if you can say, it is their fault. They care that &lt;em&gt;you let it slip by&lt;&#x2F;em&gt; and the fact &lt;em&gt;that it became an issue at all&lt;&#x2F;em&gt;. It means you missed something.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;assumptions&quot;&gt;Assumptions&lt;&#x2F;h3&gt;
-&lt;p&gt;A lot of project managers will encounter this one.&lt;&#x2F;p&gt;
-&lt;p&gt;The client believes that there are a certain number of things that &amp;quot;should just be included&amp;quot;. They will never vocalise or acknowledge these things until they come up. I call these &amp;quot;Oh, By The Way&amp;quot; moments. Mainly, they will say they forgot something, or they will slide something in last minute under the veil of it being obvious or assumed it would be included.&lt;&#x2F;p&gt;
-&lt;p&gt;One of the most common ones that I have seen fall under this umbrella would be things like setting up email for a new domain, providing hosting (for free or not), and on-going support.&lt;&#x2F;p&gt;
-&lt;p&gt;You should make a list of items that you find people believe will be included and make those deliverables explicitly included or not.&lt;&#x2F;p&gt;
-&lt;p&gt;I suggest having a section in your scope of work (S.O.W) for &amp;quot;included items&amp;quot; and &amp;quot;excluded items&amp;quot;. Be sure to walk through these things with the client. If they point out something that they don&#x27;t agree with, then that is the perfect time to discuss it. Don&#x27;t assume anything.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Be sure to walk through these things with the client. If they point out something that they don&#x27;t agree with, then that is the perfect time to discuss it&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;The includes&#x2F;excludes discussion can sometimes be painful and even uncomfortable. Especially if you have a client that is already sensitive to budget. You are pointing out all the things they are not getting. Depending on the size of the list, it can easily be longer than the list of deliverables.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;2-arbitrary-deadlines&quot;&gt;2. Arbitrary deadlines&lt;&#x2F;h2&gt;
-&lt;p&gt;This one kills me. Always question deadlines. A time limit must be tied to a real-world (physical event or the business opening) reason. Do not make deadlines because you think you will be done at a particular time or just because someone asks you to set a date for when it will be done.&lt;&#x2F;p&gt;
-&lt;p&gt;Also, be wary of a deadline that is tied to an item that can be easily moved. I once had a client who wanted their website done in time for a newsletter. Just a newsletter. It wasn&#x27;t an annual report or anything, just a general newsletter. And guess what? They moved the date back at least three times.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Also, be wary of a deadline that is tied to an item that can be easily moved.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;We rushed to get it done for the initial date, but the date passed, and there were no consequences. Instead, we just waited and waited to go live. Eventually, they managed to get their newsletter done, and we went live. But it was three weeks later. We could have used that time for something else other than just waiting.&lt;&#x2F;p&gt;
-&lt;p&gt;When a future date becomes established, the pressure is on. It can be a great milestone moment when you hit a deadline (early or right on). But it can become a real challenge when the client cannot hold up their end of the deal. Whether that is paying on time, providing information (logins, hosting access, domain details, etc.) or attending important meetings&#x2F;status updates. The project requires both parties to be on the ball and bringing their A-game all the time.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;The project requires both parties to be on the ball and bringing their A-game all the time.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;The only caveat here is if you charge for time. Then you have to set a deadline or discuss the monthly&#x2F;hourly cost. But in the billable-time scenario, the only person that is watching and monitoring time is the client. They become the advocate for speed and efficiency. You just work away until the budget runs out or the project becomes finalised.&lt;&#x2F;p&gt;
-&lt;p&gt;Everyone understands that concept of cutting corners. When you promised to get something done at a particular time and things didn&#x27;t quite move as quickly as you would have hoped, or you encountered some friction with a piece of the project, you rush. You reduce certain things to their bare essentials or you slash hours in one area to compensate in another. You miss things (remember the email section?), and then you fall behind.&lt;&#x2F;p&gt;
-&lt;p&gt;Another downside to this is that if there are delays for either party or just general hiccups, the problem becomes compounded. Now both sides are rushing since one side held up the other. This is not a great place to be.&lt;&#x2F;p&gt;
-&lt;p&gt;A general rule to follow is to establish the deadline on when the client will be satisfied with the project and within a timeframe that you know you can deliver. That could mean 100%, or that could mean 75%. Either way, do it right and don&#x27;t rush because of some misplaced trust in &amp;quot;setting deadlines&amp;quot; or having an obvious &amp;quot;finish&amp;quot; date in mind.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;1-content&quot;&gt;1. Content&lt;&#x2F;h2&gt;
-&lt;p&gt;Content is by far the biggest culprit for project failures. Who is generating the content? Who enters the content? What happens if it is missing or incomplete? What if the content isn&#x27;t ready in time? How does the blog look if we have no posts? When are we replacing the placeholder images?&lt;&#x2F;p&gt;
-&lt;p&gt;All these questions should, again, be answered &lt;em&gt;before the project starts&lt;&#x2F;em&gt;. I have never encountered so much anxiety and frustration when talking to a client about content. These feelings come from both sides.&lt;&#x2F;p&gt;
-&lt;p&gt;Often, they believe they can write the content themselves. That can sometimes be the case. But it is a lot more complicated than people understand. Unless you have a marketing team or have an experienced copy writer, do not rely on the word of the client that the content will be done on time and in perfect format.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Imagine the first thing a potential client sees on your site is mistakes, placeholder copy, or missing&#x2F;broken links. That would not be a great first impression.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Another concern when it comes to content is that there are a lot of people out there that do not want to pay someone to write their content. I have no idea where this mindset comes from. But you can see it in the result. When people describe their own business, it is often too verbose, too deep, and littered with industry speak. Sometimes that is great (looking at you, lawyers!) but it usually makes the site difficult to read and will affect the performance of the site in search rankings.&lt;&#x2F;p&gt;
-&lt;p&gt;The solution is to hire a copy writer or at least hire someone to run through the content after you believe it to be complete. Not only will you have the peace of mind that it is correct (both grammatically and in the communication sense) but you can publish it without getting an email the day of the launch where someone points out errors in your site.&lt;&#x2F;p&gt;
-&lt;p&gt;Imagine the first thing a potential client sees on your site is mistakes, placeholder copy, or missing&#x2F;broken links. That would not be a great first impression.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
-&lt;p&gt;The pattern here is that &lt;em&gt;discovery is your friend&lt;&#x2F;em&gt;. What is a discovery? Discovery is a service (paid or included&#x2F;unpaid) that will take an inventory and assessment of the client, the project, the business, the competitors, and the target industry for that project.&lt;&#x2F;p&gt;
-&lt;p&gt;Even a simple checklist or survey can act as a project discovery. You can ask the questions about email and hosting, content, timelines or deadlines, and the holy grail: &lt;em&gt;budget&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I don’t know how many times I have said, &amp;quot;we should have found this in discovery&amp;quot; when lamenting the fact that we rushed to start a project and skipped some of the upfront due diligence.&lt;&#x2F;p&gt;
-&lt;p&gt;If you are a client, and you are reading this to educate yourself, then hear this: a discovery &lt;em&gt;will save you money&lt;&#x2F;em&gt;. Why? Well, you can reduce timeline (get ahead of problems), understand your role and the required tasks for you and your team, and accept or deny any recommendations from the service provider before its too late.&lt;&#x2F;p&gt;
-&lt;p&gt;How about just generally auditing the competence of the people who are about to become entangled with you and your business for months or possibly years?&lt;&#x2F;p&gt;
-&lt;p&gt;If that doesn&#x27;t sound like a good idea, then I don’t know what is.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Handle spaces and no-spaces in MySQL where-like clauses</title>
-        <published>2017-07-08T00:00:00+00:00</published>
-        <updated>2017-07-08T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/"/>
-        <id>https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/">&lt;p&gt;Have you ever been writing a search for MySQL and had an issue where the search wouldn&#x27;t handle spaces properly?&lt;&#x2F;p&gt;
-&lt;p&gt;I was writing a search for a &lt;code&gt;users&lt;&#x2F;code&gt; table and wanted to find a user by their first name or last name or a combination of both.&lt;&#x2F;p&gt;
-&lt;p&gt;I started with a query like this:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sql&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sql &quot;&gt;&lt;code class=&quot;language-sql&quot; data-lang=&quot;sql&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;SELECT &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;* &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;FROM &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;users&lt;&#x2F;span&gt;&lt;span&gt;`
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;WHERE &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;LOWER&lt;&#x2F;span&gt;&lt;span&gt;(`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;users&lt;&#x2F;span&gt;&lt;span&gt;`.`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;first_name&lt;&#x2F;span&gt;&lt;span&gt;`)
-&lt;&#x2F;span&gt;&lt;span&gt;      LIKE &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;LOWER&lt;&#x2F;span&gt;&lt;span&gt;(:searchTerm)
-&lt;&#x2F;span&gt;&lt;span&gt;    OR &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;LOWER&lt;&#x2F;span&gt;&lt;span&gt;(`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;users&lt;&#x2F;span&gt;&lt;span&gt;`.`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;last_name&lt;&#x2F;span&gt;&lt;span&gt;`)
-&lt;&#x2F;span&gt;&lt;span&gt;      LIKE &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;LOWER&lt;&#x2F;span&gt;&lt;span&gt;(:searchTerm)
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here is the list for the matches, given that there is a user with the &lt;code&gt;first_name&lt;&#x2F;code&gt; of &amp;quot;James&amp;quot; and &lt;code&gt;last_name&lt;&#x2F;code&gt; of &amp;quot;Doyle&amp;quot;:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&amp;quot;%james%&amp;quot; - &lt;strong&gt;match&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&amp;quot;%doyle%&amp;quot; - &lt;strong&gt;match&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&amp;quot;%james d%&amp;quot; - &lt;em&gt;no match&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&amp;quot;%j doyle%&amp;quot; - &lt;em&gt;no match&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&amp;quot;%james doyle%&amp;quot; - &lt;em&gt;no match&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;The issue comes in when you add spaces into the search query. I didn&#x27;t want to split the word into an array and do a search for each word. That would require querying the database multiple times. And I don&#x27;t want to try to do &lt;code&gt;RLIKE&lt;&#x2F;code&gt; and all these string hacks to get this to match more accurately.&lt;&#x2F;p&gt;
-&lt;p&gt;Well, I found this trick where you can create fake columns using the &lt;code&gt;CONCAT&lt;&#x2F;code&gt; and then replace any space character with &lt;code&gt;%&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;So if I queried like this: &lt;code&gt;%james doyle%&lt;&#x2F;code&gt;, that will actually become &lt;code&gt;%james%doyle%&lt;&#x2F;code&gt; when it gets to the actual SQL WHERE query.&lt;&#x2F;p&gt;
-&lt;p&gt;This allows you to &lt;em&gt;get a better match more often&lt;&#x2F;em&gt; if the user types in more content in a query with a space.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sql&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sql &quot;&gt;&lt;code class=&quot;language-sql&quot; data-lang=&quot;sql&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;SELECT &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;* &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;FROM &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;users&lt;&#x2F;span&gt;&lt;span&gt;`
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;WHERE
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;LOWER&lt;&#x2F;span&gt;&lt;span&gt;(CONCAT(`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;users&lt;&#x2F;span&gt;&lt;span&gt;`.`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;first_name&lt;&#x2F;span&gt;&lt;span&gt;`,`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;users&lt;&#x2F;span&gt;&lt;span&gt;`.`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;last_name&lt;&#x2F;span&gt;&lt;span&gt;`))
-&lt;&#x2F;span&gt;&lt;span&gt;      LIKE &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;LOWER&lt;&#x2F;span&gt;&lt;span&gt;(REPLACE(:searchTerm, &amp;quot; &amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;))
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here is a list of terms that will be matched in this query:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&amp;quot;%james%&amp;quot; - &lt;strong&gt;match&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&amp;quot;%doyle%&amp;quot; - &lt;strong&gt;match&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&amp;quot;%james d%&amp;quot; - &lt;strong&gt;match&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&amp;quot;%j doyle%&amp;quot; (becomes &amp;quot;%j%doyle%&amp;quot; due to &lt;code&gt;REPLACE&lt;&#x2F;code&gt;) - &lt;strong&gt;match&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&amp;quot;%james doyle%&amp;quot; (becomes &amp;quot;%james%doyle%&amp;quot; due to &lt;code&gt;REPLACE&lt;&#x2F;code&gt;) - &lt;strong&gt;match&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;sidenote&quot;&gt;Sidenote&lt;&#x2F;h4&gt;
-&lt;p&gt;The only downside of this query is that you may get more matches if the string you are searching for is too small. Like 2 - 3 characters. At that point though, you should notify the user that they should enter in more characters to get more accurate results.&lt;&#x2F;p&gt;
-&lt;p&gt;Another great thing is that if you added a &lt;code&gt;middle_name&lt;&#x2F;code&gt; column, it will handle searches where someone is searching for a known first and middle name as well. It can still match as the &lt;code&gt;CONCAT&lt;&#x2F;code&gt; builds a nice string to match against.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>WordPress Browser Body Class</title>
-        <published>2017-06-21T00:00:00+00:00</published>
-        <updated>2017-06-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/wordpress-browser-body-class/"/>
-        <id>https://ohdoylerules.com/web/wordpress-browser-body-class/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/wordpress-browser-body-class/">&lt;p&gt;Sometimes, browsers just don&#x27;t behave. While working on a WordPress site, I had a particular styling issue that was affecting Safari. I was wondering what the best way to target the browser was.&lt;&#x2F;p&gt;
-&lt;p&gt;If you didn&#x27;t know, there are some primitive &lt;a href=&quot;https:&#x2F;&#x2F;codex.wordpress.org&#x2F;Global_Variables#Browser_Detection_Booleans&quot;&gt;browser detection booleans&lt;&#x2F;a&gt; that are built into WordPress.&lt;&#x2F;p&gt;
-&lt;p&gt;Using those primitives, I was able to whip up a little snippet that adds classes to the body tag depending on the browser - no plugins required.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;979b09fc7c676baf3283bdb113b3db6d.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;979b09fc7c676baf3283bdb113b3db6d.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;As you can see, we simply loop over each one of those browser booleans and append them to the output.&lt;&#x2F;p&gt;
-&lt;p&gt;Easy, and no plugin needed. Just add that code to your &lt;code&gt;functions.php&lt;&#x2F;code&gt; file.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Update Laravel Pagination With New Collection</title>
-        <published>2017-06-04T00:00:00+00:00</published>
-        <updated>2017-06-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/"/>
-        <id>https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/">&lt;p&gt;Have you even done a database search (using the &lt;code&gt;DB&lt;&#x2F;code&gt; facade) and got back an array of results that wasn&#x27;t wrapped in lovely little Eloquent Models? After some googling, I am sure you probably found out about the &lt;a href=&quot;http:&#x2F;&#x2F;commandz.io&#x2F;create-models-from-query-builder&#x2F;&quot;&gt;hydrate&lt;&#x2F;a&gt; method. Using &lt;code&gt;hydrate&lt;&#x2F;code&gt;, you can turn an array of results from the database into real models from your application. This works phenomenally.&lt;&#x2F;p&gt;
-&lt;p&gt;But what if you want to return paginated results? How do you used the results after they are already paginated? Well there is a method called &lt;code&gt;setCollection&lt;&#x2F;code&gt; on the &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&#x2F;api&#x2F;5.4&#x2F;Illuminate&#x2F;Pagination&#x2F;LengthAwarePaginator.html&quot;&gt;LengthAwarePaginator&lt;&#x2F;a&gt; class. What it will let you do actually set the results of the pagination to a new collection.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is an example of how that works in practice:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span style=&quot;color:#ab7967;&quot;&gt;&amp;lt;?php
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;**
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; * Hydrates the paginated results for the query
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt; *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;public function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;simpleSearchQuery&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; contrived example of a &amp;quot;DB search&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;results &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;DB&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;table&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;users&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;        -&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;select&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;        -&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;where&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;email&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;LIKE&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;%@gmail.com%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;        -&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;orderBy&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;created_at&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;        -&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;paginate&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;15&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; we can hydrate a model with the results from a DB call
-&lt;&#x2F;span&gt;&lt;span&gt;    $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hydrated &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;User&lt;&#x2F;span&gt;&lt;span&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hydrate&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;results&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;all&lt;&#x2F;span&gt;&lt;span&gt;());
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; updates the pagination with a new collection of models instead of raw DB array results
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;results&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;setCollection&lt;&#x2F;span&gt;&lt;span&gt;($&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;hydrated&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now this is a pretty simple example of how this could be used. I used this feature to search across a couple tables that didn&#x27;t have models. The results were for a specific model type, but I wanted the results to be real models so that I can use nice methods on them to get relationships, trigger mutations, etc.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Color Helpers In Fish Shell</title>
-        <published>2017-06-03T00:00:00+00:00</published>
-        <updated>2017-06-03T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/"/>
-        <id>https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/">&lt;p&gt;I am one of those people who likes a lot of colors in my shell. When there is a failure, I like to see red. If there is something stuccessful, I like to see green.&lt;&#x2F;p&gt;
-&lt;p&gt;Working with the prompt to output the correct colors can be a bit of a pain. I manage to find a nice way to handle both colorizing backgrounds for the text as well as the actual text color. You can see an example below:&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;acb8c065c8b4d63f557d44a77a356d59.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;acb8c065c8b4d63f557d44a77a356d59.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;Once you add the code into your &lt;code&gt;fish config&lt;&#x2F;code&gt;. You will then be able to colorize your output using this simple helper function:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;fish&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-fish &quot;&gt;&lt;code class=&quot;language-fish&quot; data-lang=&quot;fish&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;color_print &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;COLOR_R &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;I am red text.&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can also do a background color:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;fish&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-fish &quot;&gt;&lt;code class=&quot;language-fish&quot; data-lang=&quot;fish&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;color_print &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;BG_G &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;I am on a green background.&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;I use this helper function in my other functions to colorize output when showing different results or handling different exit codes.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is an exmple of a little function that moves a file and timestamps it:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;fish&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-fish &quot;&gt;&lt;code class=&quot;language-fish&quot; data-lang=&quot;fish&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;amv
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span&gt;source $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;argv&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;]
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;[ &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;source &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;]
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span&gt;stamp (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;date &lt;&#x2F;span&gt;&lt;span&gt;+%Y-%m-%d-%H-%M-%S)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span&gt;dest &amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;stamp&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;source&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;mv &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;source &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;dest
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# output will be blue text
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;color_print &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;COLOR_B &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Moved &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;source&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; to an archive at &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;dest&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;else
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# output will be yellow text
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;color_print &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;COLOR_Y &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Help: amv source.zip {timestamp}-source.zip&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;So you can see where this can be really helpful for when you just want to simply color some text. Instead of worrying about the color codes and escape sequences, you can use this handy helper function now.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Conditional Vue.js Mixins</title>
-        <published>2017-05-25T00:00:00+00:00</published>
-        <updated>2017-05-25T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/"/>
-        <id>https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/">&lt;p&gt;When building more traditional Vue.js applications, I tend to use mixins a lot. It helps split up code, speparate concerns, and can allow for some cool tricks. One that i keep using is conditionally requiring a mixin based on the details of the page.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is an example. The first module is a function that, like &lt;code&gt;require&lt;&#x2F;code&gt;, will load a file into the script it is being called from. The thing is, this &lt;code&gt;require&lt;&#x2F;code&gt; function also takes a new parameter for checking if the page URL contains a particular string or &lt;em&gt;array of strings&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;conditionalrequire-js&quot;&gt;conditionalRequire.js&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; loads mixins based on the current URL
-&lt;&#x2F;span&gt;&lt;span&gt;module.exports = &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filename&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; name can be an array or single string value
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name &lt;&#x2F;span&gt;&lt;span&gt;= (typeof(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;) === &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;object&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;) ? &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Array&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;from&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;) : [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;];
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; are there any matches?
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;check &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;n&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;window.location.pathname.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;includes&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;n&lt;&#x2F;span&gt;&lt;span&gt;)).length;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; return a no-op function for better compatibility with traditional require
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;check &lt;&#x2F;span&gt;&lt;span&gt;? &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;filename&lt;&#x2F;span&gt;&lt;span&gt;) : &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;() { &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;{}; };
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The next code block below would be for you main app file. This would be the file included in all of the footers on your site. Some things to assume is these modules exist in a folder called &lt;code&gt;mixins&#x2F;&lt;&#x2F;code&gt; and that the source files in there are returning a valid object that works as a mixin.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;index-js&quot;&gt;index.js&lt;&#x2F;h4&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&#x2F;&#x2F; include the module from the above snippet
-&lt;&#x2F;span&gt;&lt;span&gt;const conditionalRequire = require(&amp;#39;conditionalRequire&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&#x2F; create our Vue app
-&lt;&#x2F;span&gt;&lt;span&gt;const app = new Vue({
-&lt;&#x2F;span&gt;&lt;span&gt;  el: &amp;quot;#app&amp;quot;,
-&lt;&#x2F;span&gt;&lt;span&gt;  data: {
-&lt;&#x2F;span&gt;&lt;span&gt;    &#x2F;&#x2F; ...
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  mixins: [
-&lt;&#x2F;span&gt;&lt;span&gt;    require(&amp;#39;mixins&#x2F;global&amp;#39;), &#x2F;&#x2F; a regular module - loaded always
-&lt;&#x2F;span&gt;&lt;span&gt;    require(&amp;#39;mixins&#x2F;navigation&amp;#39;), &#x2F;&#x2F; a regular module - loaded always
-&lt;&#x2F;span&gt;&lt;span&gt;    conditionalRequire(&amp;#39;home&amp;#39;, &amp;#39;mixins&#x2F;home&amp;#39;), &#x2F;&#x2F; only load when on the &amp;quot;&#x2F;home&amp;quot; page
-&lt;&#x2F;span&gt;&lt;span&gt;    conditionalRequire(&amp;#39;profile&amp;#39;, &amp;#39;mixins&#x2F;profile&amp;#39;), &#x2F;&#x2F; only load when on the &amp;quot;&#x2F;profile&amp;quot; page
-&lt;&#x2F;span&gt;&lt;span&gt;    conditionalRequire([&amp;#39;about&amp;#39;, &amp;#39;contact&amp;#39;], &amp;#39;mixins&#x2F;forms&amp;#39;) &#x2F;&#x2F; load on &amp;quot;&#x2F;about&amp;quot; and &amp;quot;&#x2F;contact&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  ]
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;So you can see this can be a handy trick. You don&#x27;t load code on pages you don&#x27;t need it. There are ways to do this using components and &lt;code&gt;v-if&lt;&#x2F;code&gt; but it is a lot &amp;quot;softer&amp;quot; than simply never running&#x2F;including code that you know is not needed.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Install the latest Node.js on Amazon Linux</title>
-        <published>2017-04-29T00:00:00+00:00</published>
-        <updated>2017-04-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/"/>
-        <id>https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/">&lt;p&gt;Installing the latest version of Node.js on the Amazon linux AMI can actually be a little painful.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is a script for doing just that.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;a1f0b415dee4e69b3595b7af1d07e7c1.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;a1f0b415dee4e69b3595b7af1d07e7c1.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;Hopefully, sometime soon, Amazon will stop using &lt;code&gt;0.10.*&lt;&#x2F;code&gt; and start using a &lt;code&gt;x.*&lt;&#x2F;code&gt; version by default.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Running Go (golang) in Docker</title>
-        <published>2017-04-28T00:00:00+00:00</published>
-        <updated>2017-04-28T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/running-go-in-docker/"/>
-        <id>https://ohdoylerules.com/snippets/running-go-in-docker/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/running-go-in-docker/">&lt;p&gt;Lately, I have been trying to learn golang. This means playing with a lot of tools and busting up my local environment.&lt;&#x2F;p&gt;
-&lt;p&gt;In order to keep things simple, I have been using Docker container to run my applications when I am ready to deploy or build them.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;6489d3e60d994222ce0404c8cd500a93.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;6489d3e60d994222ce0404c8cd500a93.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;I use &lt;a href=&quot;https:&#x2F;&#x2F;zeit.co&#x2F;now&quot;&gt;now.sh&lt;&#x2F;a&gt; to deploy the applications. Since now.sh support deploying Docker, using the Dockerfile approach makes it really simple to deploy.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>How To Use Template Strings As Modules</title>
-        <published>2017-02-26T00:00:00+00:00</published>
-        <updated>2017-02-26T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/es6-template-strings-as-modules/"/>
-        <id>https://ohdoylerules.com/tricks/es6-template-strings-as-modules/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/es6-template-strings-as-modules/">&lt;p&gt;I had a project the other day that needed to make some HTML strings based on some other data in my code.&lt;&#x2F;p&gt;
-&lt;p&gt;This is a standard approach when you need to write to the &lt;code&gt;innerHTML&lt;&#x2F;code&gt; of an element, or if you want to populate a string before writing it to the DOM or some HTML attribute.&lt;&#x2F;p&gt;
-&lt;p&gt;I was trying to find a nice way to split up my JS - that had a bunch of functions in it - and my template string which had a bunch of parts that needed to be filled&#x2F;replaced while being looped over.&lt;&#x2F;p&gt;
-&lt;p&gt;Another thing I wanted to accomplish is to be able to find the string in my code quickly. Just in case I needed to locate it and make some more changes to it in the future. Previously, the code was sitting is some variable or some function like &lt;code&gt;buildElementTemplate&lt;&#x2F;code&gt; or something. But that still seemed a little gross for me.&lt;&#x2F;p&gt;
-&lt;p&gt;Well, I found a nice way to do all of these things. By sticking the string code in a module, and returning a function, I can pass the data in as I needed. Plus, it was easy to use &lt;code&gt;require&lt;&#x2F;code&gt; whenever I needed that template.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;template-js&quot;&gt;template.js&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span&gt;module.exports = &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Hello ${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}! You look good for ${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}!&lt;&#x2F;span&gt;&lt;span&gt;`;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; or as an object
-&lt;&#x2F;span&gt;&lt;span&gt;module.exports = &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Hello ${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.name}! You look good for ${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;age&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;}!&lt;&#x2F;span&gt;&lt;span&gt;`;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h4 id=&quot;application-js&quot;&gt;application.js&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; myTemplate will be the compiled string
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;myTemplate &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.&#x2F;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Billy&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;85&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; object style
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;myTemplate &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.&#x2F;template&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)({ name: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Billy&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, age: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;85&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;There we go! A nice way to split up some template logic and some app logic. You could probably even return an object of methods that would compile different strings for your app - think translations or different personal messages for the user.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>How To Use LC_MONETARY In Laravel</title>
-        <published>2017-02-24T00:00:00+00:00</published>
-        <updated>2017-02-24T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/setting-money-locale-laravel/"/>
-        <id>https://ohdoylerules.com/tricks/setting-money-locale-laravel/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/setting-money-locale-laravel/">&lt;p&gt;If you are using the awesome &lt;code&gt;money_format&lt;&#x2F;code&gt; function in PHP, you may have noticed a difference between servers or environments regarding the output.&lt;&#x2F;p&gt;
-&lt;p&gt;Sometimes you do get the trailing zeros. Sometimes not.&lt;&#x2F;p&gt;
-&lt;p&gt;If you are ever trying to figure out what is going on here, it usually has to do with the current locale of the application. In Laravel, you can make this change in the &lt;code&gt;AppServiceProvider&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;class AppServiceProvider extends ServiceProvider
-&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    &#x2F;**
-&lt;&#x2F;span&gt;&lt;span&gt;     * Bootstrap any application services.
-&lt;&#x2F;span&gt;&lt;span&gt;     *
-&lt;&#x2F;span&gt;&lt;span&gt;     * @return void
-&lt;&#x2F;span&gt;&lt;span&gt;     *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;    public function boot()
-&lt;&#x2F;span&gt;&lt;span&gt;    {
-&lt;&#x2F;span&gt;&lt;span&gt;        &#x2F;&#x2F; set the money locale for money_format to work nicely
-&lt;&#x2F;span&gt;&lt;span&gt;        setlocale(LC_MONETARY, &amp;#39;en_US.UTF-8&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &#x2F;&#x2F; ... rest of the provider
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;And that should be it. Now when using &lt;code&gt;money_format&lt;&#x2F;code&gt;, the output should be normalized.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>OpenSSL Passwd Without Prompt</title>
-        <published>2016-11-22T00:00:00+00:00</published>
-        <updated>2016-11-22T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/"/>
-        <id>https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/">&lt;p&gt;Have you ever wanted to generate a password using the &lt;code&gt;openssl passwd&lt;&#x2F;code&gt; command, but didn&#x27;t want the prompt?&lt;&#x2F;p&gt;
-&lt;p&gt;I encountered this problem when I was writing &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;invokemedia&#x2F;ansible-basicauth-nginx&quot;&gt;an Ansible role for setting up Nginx basic auth&lt;&#x2F;a&gt;. I didn&#x27;t want the prompt since I had no way for ansible to handle that gracefully. After some Googling, and some &lt;code&gt;man&lt;&#x2F;code&gt; page grepping, I found the answer.&lt;&#x2F;p&gt;
-&lt;p&gt;You can generate a password without a prompt by piping text into &lt;code&gt;openssl&lt;&#x2F;code&gt; and passing a new flag. For example:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;echo &amp;quot;password&amp;quot; | openssl passwd -apr1 -stdin
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This will echo to &lt;code&gt;stdout&lt;&#x2F;code&gt;. This way you can write a script or something instead of having to use the prompt to type in the password.&lt;&#x2F;p&gt;
-&lt;p&gt;In my case of generating a basic auth password, I had to append the output to the &lt;code&gt;&#x2F;etc&#x2F;nginx&#x2F;.htpasswd&lt;&#x2F;code&gt; file. That was done using the following command:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;echo &amp;quot;password&amp;quot; | openssl passwd -apr1 -stdin &amp;gt;&amp;gt; &#x2F;etc&#x2F;nginx&#x2F;.htpasswd
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;There ya go. It&#x27;s that easy. I have actually used this trick a couple times for generating passwords and piping to &lt;code&gt;pbcopy&lt;&#x2F;code&gt; (the clipboard) on my mac.&lt;&#x2F;p&gt;
-&lt;p&gt;Pretty useful stuff!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Use Nginx for A&#x2F;B Testing</title>
-        <published>2016-08-28T00:00:00+00:00</published>
-        <updated>2016-08-28T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/use-nginx-for-a-b-testing/"/>
-        <id>https://ohdoylerules.com/web/use-nginx-for-a-b-testing/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/use-nginx-for-a-b-testing/">&lt;p&gt;I was starting a new project the other day that had a heavy marketing influence. The team was wondering about possibly A&#x2F;B testing the main content section of the website.&lt;&#x2F;p&gt;
-&lt;p&gt;It got me thinking about doing A&#x2F;B test with content and how that works.&lt;&#x2F;p&gt;
-&lt;p&gt;There are a couple of ways that A&#x2F;B testing can be accomplished. After some quick Google-ing, I found this cool feature of Nginx called &lt;code&gt;split_clients&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is a little breakdown of that module:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;The &lt;code&gt;ngx_http_split_clients_module&lt;&#x2F;code&gt; module creates variables suitable for A&#x2F;B testing, also known as split testing.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;There is a &lt;a href=&quot;https:&#x2F;&#x2F;www.digitalocean.com&#x2F;community&#x2F;tutorials&#x2F;how-to-target-your-users-with-nginx-analytics-and-a-b-testing&quot;&gt;great article at DigitalOcean&lt;&#x2F;a&gt; about getting &lt;code&gt;split_clients&lt;&#x2F;code&gt; setup.&lt;&#x2F;p&gt;
-&lt;p&gt;Nginx will allow you to apply certain variables to a segment of your traffic. For example:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;http {
-&lt;&#x2F;span&gt;&lt;span&gt;    split_clients &amp;quot;${remote_addr}&amp;quot; $variant {
-&lt;&#x2F;span&gt;&lt;span&gt;            0.5%    .one;
-&lt;&#x2F;span&gt;&lt;span&gt;            2.0%    .two;
-&lt;&#x2F;span&gt;&lt;span&gt;            *       &amp;quot;&amp;quot;;
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    server {
-&lt;&#x2F;span&gt;&lt;span&gt;        location &#x2F; {
-&lt;&#x2F;span&gt;&lt;span&gt;            index index${variant}.html;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can break this down as:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;0.5% of the traffic will see &lt;code&gt;index.one.html&lt;&#x2F;code&gt;, 2.0% of the traffic will see &lt;code&gt;index.two.html&lt;&#x2F;code&gt;, and the rest will see &lt;code&gt;index.html&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Although this is perfect for serving static content, what about dynamic content? I figured this would be better if it set a &lt;em&gt;custom header&lt;&#x2F;em&gt; that could then be handled in a response middleware and applied to my views. Here is the resulting code for that:&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;etc-nginx-conf-d-split-clients-conf-file&quot;&gt;&lt;code&gt;&#x2F;etc&#x2F;nginx&#x2F;conf.d&#x2F;split-clients.conf&lt;&#x2F;code&gt; file&lt;&#x2F;h4&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;split_clients &amp;quot;${remote_addr}&amp;quot; $ab_test {
-&lt;&#x2F;span&gt;&lt;span&gt;    # 50% of the traffic is &amp;quot;A&amp;quot; traffic
-&lt;&#x2F;span&gt;&lt;span&gt;    50%     &amp;quot;A&amp;quot;;
-&lt;&#x2F;span&gt;&lt;span&gt;    # the remaining traffic (the other 50%) will be set to &amp;quot;B&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    *       &amp;quot;B&amp;quot;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;If your Nginx is setup with the default &lt;code&gt;nginx.conf&lt;&#x2F;code&gt;, then there is an include that will autoload all &lt;code&gt;.conf&lt;&#x2F;code&gt; files in &lt;code&gt;&#x2F;etc&#x2F;nginx&#x2F;conf.d&#x2F;&lt;&#x2F;code&gt; folder.&lt;&#x2F;p&gt;
-&lt;p&gt;So you can put files in there that you want to be globally loaded in the main &lt;code&gt;http {}&lt;&#x2F;code&gt; block.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;etc-nginx-sites-enabled-default-or-etc-nginx-sites-enabled-somewebsite-file&quot;&gt;&lt;code&gt;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled&#x2F;default&lt;&#x2F;code&gt; or &lt;code&gt;&#x2F;etc&#x2F;nginx&#x2F;sites-enabled&#x2F;somewebsite&lt;&#x2F;code&gt; file&lt;&#x2F;h4&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;server {
-&lt;&#x2F;span&gt;&lt;span&gt;    # probably some `listen 80;` code above, and some other things
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    # this will come out in our response headers
-&lt;&#x2F;span&gt;&lt;span&gt;    add_header X-AB-Testcase $ab_test;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    # the rest of the code below for `location &#x2F; {}` and all that...
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This would be the resulting response from any HTTP request:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;nginx-ab-header.png&quot; title=&quot;Nginx example of the custom a&#x2F;b header&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Nginx example of the custom a&#x2F;b header&quot; src=&quot;&#x2F;images&#x2F;nginx-ab-header.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Awesome! Now half of all traffic will be tagged with either &lt;em&gt;X-AB-Testcase: A&lt;&#x2F;em&gt; or &lt;em&gt;X-AB-Testcase: B&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Finally, we could add a middleware to collect that information from the header and pass it to variables in your views, or you could use AJAX to check the headers of a piece of conditionally content.&lt;&#x2F;p&gt;
-&lt;p&gt;The &lt;code&gt;split_clients&lt;&#x2F;code&gt; directive uses the IP of the request to assign it to either pool. Given this functionality, &lt;em&gt;if you are using shared internet connection in the office, this can be difficult to test&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I used &lt;code&gt;curl&lt;&#x2F;code&gt; requests from 2 different external servers to make sure that we were getting both A and B set by various IPs.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Backup MySQL And Email It</title>
-        <published>2016-03-24T00:00:00+00:00</published>
-        <updated>2016-03-24T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/backup-mysql-and-email-it/"/>
-        <id>https://ohdoylerules.com/snippets/backup-mysql-and-email-it/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/backup-mysql-and-email-it/">&lt;p&gt;Recently, a friend of mine asked me what we use for managing the backups for our clients. I mentioned that we use &lt;code&gt;mysqldump&lt;&#x2F;code&gt; running on a &lt;code&gt;CRON&lt;&#x2F;code&gt; schedule. He said that he used a paid service for managing all the servers and their backups. He mentioned it sends to an Amazon S3 bucket, and also sends a notification.&lt;&#x2F;p&gt;
-&lt;p&gt;With my setup, he noted that I could be in trouble if the hard drive failed, or the site gets wiped because my backups are stored locally right beside the site itself.&lt;&#x2F;p&gt;
-&lt;p&gt;I thought to myself, &amp;quot;Hmmm. What would help me back these files up, let me know that it is done, access them quickly, and also cost no money?&amp;quot;. Email + &lt;code&gt;CRON&lt;&#x2F;code&gt;. Email is a pretty reasonable solution for this.&lt;&#x2F;p&gt;
-&lt;p&gt;With Email, you get the following:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;A notification of when the backup is done&lt;&#x2F;li&gt;
-&lt;li&gt;An &amp;quot;offsite&amp;quot; backup of the file&lt;&#x2F;li&gt;
-&lt;li&gt;A searchable history of the files&#x2F;backups&lt;&#x2F;li&gt;
-&lt;li&gt;Forwarding of the backup to someone else&lt;&#x2F;li&gt;
-&lt;li&gt;CC multiple accounts and have the backup available to multiple people&lt;&#x2F;li&gt;
-&lt;li&gt;Send a copy to the client, so they can have one too&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;So I whipped up a script with &lt;code&gt;mysqldump&lt;&#x2F;code&gt;, &lt;code&gt;curl&lt;&#x2F;code&gt;, and &lt;code&gt;CRON&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Although you can send email &lt;code&gt;sendmail&lt;&#x2F;code&gt; or &lt;code&gt;mail&lt;&#x2F;code&gt;, I opted for &lt;a href=&quot;http:&#x2F;&#x2F;www.mailgun.com&#x2F;&quot;&gt;Mailgun&lt;&#x2F;a&gt;. It is something we are already using, so hooking it up took no time at all. They also have an excellent API, which is faster than &lt;em&gt;SMTP&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;On top of the regular email features I listed above, with Mailgun, I also get:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;read receipts&lt;&#x2F;li&gt;
-&lt;li&gt;delivery reports&lt;&#x2F;li&gt;
-&lt;li&gt;logging&lt;&#x2F;li&gt;
-&lt;li&gt;web hooks (you can catch emails with individual subjects or recipients)&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;So, without spending any money, I can get a SaaS experience using some built-in tools.&lt;&#x2F;p&gt;
-&lt;p&gt;You can see the script here:&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;6e471dee73124eddda8c.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;6e471dee73124eddda8c.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;I included some rules for the &lt;code&gt;crontab&lt;&#x2F;code&gt; settings. I used &lt;code&gt;0 0 * * 1 *&lt;&#x2F;code&gt; which is once a week on Monday at midnight.&lt;&#x2F;p&gt;
-&lt;p&gt;You can still run the script above &lt;em&gt;without using &lt;code&gt;CRON&lt;&#x2F;code&gt;&lt;&#x2F;em&gt;. Just put it somewhere on your server and run it like you normally would: &lt;code&gt;.&#x2F;backup-mysql-db.sh&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Add A Counter For Duplicate Uploads</title>
-        <published>2016-02-12T00:00:00+00:00</published>
-        <updated>2016-02-12T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/"/>
-        <id>https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/">&lt;p&gt;Wouldn&#x27;t it be nice if, when you uploaded a file, the duplicate filenames just get a counter added in front?&lt;&#x2F;p&gt;
-&lt;p&gt;Some people add timestamps on their files, and add some type of date, but I always found that to be very cumbersome.&lt;&#x2F;p&gt;
-&lt;p&gt;How about something like this?&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;some-file.jpg
-&lt;&#x2F;span&gt;&lt;span&gt;1-some-file.jpg
-&lt;&#x2F;span&gt;&lt;span&gt;2-some-file.jpg
-&lt;&#x2F;span&gt;&lt;span&gt;3-some-file.jpg
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Well, now you can! I have used this little script a couple times to remove any conflicting filenames when uploading files with the same name.&lt;&#x2F;p&gt;
-&lt;p&gt;I use this in &lt;a href=&quot;https:&#x2F;&#x2F;laravel.com&quot;&gt;Laravel&lt;&#x2F;a&gt; (with an instance of &lt;code&gt;Symfony\Component\HttpFoundation\File\UploadedFile&lt;&#x2F;code&gt; which extends &lt;a href=&quot;http:&#x2F;&#x2F;php.net&#x2F;SplFileInfo&quot;&gt;SplFileInfo&lt;&#x2F;a&gt;) but it can easily be modified for any other framework or system.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;516483af423d4643ac83.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;516483af423d4643ac83.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;If you are OCD, and wanted to all files to start with a number, just remove the if statement for the &lt;code&gt;$client_name&lt;&#x2F;code&gt;, only leaving the string concatenate line, and it will always add a the counter when the file is new.&lt;&#x2F;p&gt;
-&lt;p&gt;So give it a shot, and if you modify it for some other framework, post the link in the comments.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Add $.getStylesheet To jQuery</title>
-        <published>2016-02-05T00:00:00+00:00</published>
-        <updated>2016-02-05T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/add-getstylesheet-to-jquery/"/>
-        <id>https://ohdoylerules.com/web/add-getstylesheet-to-jquery/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/add-getstylesheet-to-jquery/">&lt;p&gt;Have you ever wanted to do this?&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;when&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;getStylesheet&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;css&#x2F;main.css&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;), &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;getScript&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;js&#x2F;main.js&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;))
-&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;the css and js loaded successfully and are both ready&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;an error occurred somewhere&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Well, now you can! I have created an alternative to &lt;code&gt;$.getScript&lt;&#x2F;code&gt; that handles stylesheets. I called it &lt;a href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;9456c3e145f8d0afbe25&quot;&gt;$.getStylesheet&lt;&#x2F;a&gt; for obvious reasons.&lt;&#x2F;p&gt;
-&lt;p&gt;It implements the &lt;a href=&quot;https:&#x2F;&#x2F;api.jquery.com&#x2F;jQuery.Deferred&#x2F;&quot;&gt;$.Deferred&lt;&#x2F;a&gt; object, which allows for chaining and pseudo-promises-style code. Just like &lt;code&gt;$.ajax&lt;&#x2F;code&gt;, &lt;code&gt;$.post&lt;&#x2F;code&gt;, and &lt;code&gt;$.get&lt;&#x2F;code&gt;. This also means you would have access to all the other methods on that object too, this means: &lt;code&gt;.then()&lt;&#x2F;code&gt;, &lt;code&gt;.always()&lt;&#x2F;code&gt;, &lt;code&gt;.done()&lt;&#x2F;code&gt;, and &lt;code&gt;.fail()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the little function for &lt;a href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;9456c3e145f8d0afbe25&quot;&gt;$.getStylesheet&lt;&#x2F;a&gt;. It is just hosted on Github gist, so I can update it if I need to:&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;9456c3e145f8d0afbe25.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;9456c3e145f8d0afbe25.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;You can see this is pretty simple. Just add the function after your jQuery script, or somewhere in your main script file.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Slack Meta Data For URLs and Links</title>
-        <published>2015-10-31T00:00:00+00:00</published>
-        <updated>2015-10-31T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/slack-url-meta-data/"/>
-        <id>https://ohdoylerules.com/web/slack-url-meta-data/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/slack-url-meta-data/">&lt;p&gt;If you use &lt;a href=&quot;https:&#x2F;&#x2F;slack.com&#x2F;&quot;&gt;Slack&lt;&#x2F;a&gt;, then you have probably noticed the awesome feature they have for generating nice meta data whenever you paste a URL or an image.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;slack-example.png&quot; title=&quot;Slack meta tag fetching example&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Slack meta tag fetching example&quot; src=&quot;&#x2F;images&#x2F;slack-example.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;That is pretty slick! So how does it know what to grab for us?&lt;&#x2F;p&gt;
-&lt;p&gt;From the Slack website:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;It fetches as little of the page as it can (using HTTP Range headers) to extract meta tags about the content. Specifically, we are looking for &lt;a target=&quot;_blank&quot; href=&quot;http:&#x2F;&#x2F;oembed.com&#x2F;&quot;&gt;oEmbed&lt;&#x2F;a&gt; and &lt;a target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;dev.twitter.com&#x2F;docs&#x2F;cards&quot;&gt;Twitter Card&lt;&#x2F;a&gt; &#x2F; &lt;a target=&quot;_blank&quot; href=&quot;http:&#x2F;&#x2F;ogp.me&#x2F;&quot;&gt;Open Graph&lt;&#x2F;a&gt; tags. If a page&#x27;s tags refer to an image, video, or audio file, we will fetch that file as well to check validity and extract other metadata.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;I&#x27;ve never used &lt;em&gt;oEmbed&lt;&#x2F;em&gt;, so I am going to skip that.&lt;&#x2F;p&gt;
-&lt;p&gt;Let&#x27;s break down each part of the resulting meta fetch by Slack. Here is what we have, and the order it appears.&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;WARPAINT Media (Site Title)&lt;&#x2F;li&gt;
-&lt;li&gt;Homepage | WARPAINT Media (Page Title)&lt;&#x2F;li&gt;
-&lt;li&gt;WARPAINT Media specializes in improving customer experience through marketing, design, analytics, and development. (Meta Description)&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Now we can look at the Open Graph meta tags that are being used to generate these results:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;property&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:site_name&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WARPAINT Media&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;property&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:title&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Homepage | WARPAINT Media&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;property&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:description&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WARPAINT Media specializes in improving customer experience through marketing, design, analytics, and development.&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;property&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:image&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;warpaintmedia.ca&#x2F;img&#x2F;meta-image.jpg&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;property&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;og:url&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;warpaintmedia.ca&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Open Graph tags are pretty popular. The biggest user of Open Graph is Facebook. Here is the result when the link is shared on Facebook:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;warpaint-facebook.png&quot; title=&quot;Facebook meta tag fetching example&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Facebook meta tag fetching example&quot; src=&quot;&#x2F;images&#x2F;warpaint-facebook.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Make sure you test your tags using the &lt;a href=&quot;https:&#x2F;&#x2F;developers.facebook.com&#x2F;tools&#x2F;debug&#x2F;og&#x2F;object&#x2F;&quot;&gt;Facebook Open Graph Object Debugger&lt;&#x2F;a&gt;. This will help you spot errors in your tags. If there are errors, &lt;strong&gt;Slack will not load the content&lt;&#x2F;strong&gt;. You need to have valid tags to make Slack work nicely.&lt;&#x2F;p&gt;
-&lt;p&gt;How about the &lt;a href=&quot;https:&#x2F;&#x2F;dev.twitter.com&#x2F;cards&#x2F;overview&quot;&gt;Twitter Card&lt;&#x2F;a&gt; meta tags?&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:card&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;summary_large_image&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:title&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Homepage | WARPAINT Media&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:description&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;WARPAINT Media specializes in improving customer experience through marketing, design, analytics, and development.&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:site&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;@warpaintmedia&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:creator&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;@warpaintmedia&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:url&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;warpaintmedia.ca&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;twitter:image:src&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;warpaintmedia.ca&#x2F;img&#x2F;meta-image.jpg&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you noticed, there is no &amp;quot;site title&amp;quot; being set. You can also see in the screenshot that Twitter doesn&#x27;t really care about the site title, they just show the page title. If that was something you wanted to adjust, then you would tweak the &lt;code&gt;twitter:title&lt;&#x2F;code&gt; tag to reflect what you wanted for a page title.&lt;&#x2F;p&gt;
-&lt;p&gt;Now you may have copied these Twitter meta tags and pasted them in your site and filled in your information. That &lt;strong&gt;will not work&lt;&#x2F;strong&gt;. You need to use the &lt;a href=&quot;https:&#x2F;&#x2F;cards-dev.twitter.com&#x2F;validator&quot;&gt;Twitter Card Validator&lt;&#x2F;a&gt; to test, and then register, your account and URL.&lt;&#x2F;p&gt;
-&lt;p&gt;When you&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Fixing Wordpress wp-content 500 Errors</title>
-        <published>2015-09-29T00:00:00+00:00</published>
-        <updated>2015-09-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/wordpress-wp-content-500-errors/"/>
-        <id>https://ohdoylerules.com/web/wordpress-wp-content-500-errors/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/wordpress-wp-content-500-errors/">&lt;p&gt;Yesterday, a friend emailed me about her Wordpress site acting crazy. For some reason all the site assets weren&#x27;t loading and were returning 500 errors.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;troubleshooting&quot;&gt;Troubleshooting&lt;&#x2F;h4&gt;
-&lt;p&gt;I had her check the usual things: &lt;code&gt;.htaccess&lt;&#x2F;code&gt; is there, the asset actually existed, some plugin wasn&#x27;t busting the site. Each one was throwing a 500 error, so it was something else.&lt;&#x2F;p&gt;
-&lt;p&gt;Eventually she gave me her log in, which had a &lt;em&gt;super simple password&lt;&#x2F;em&gt;, and I logged in to see what was up. Nothing seemed to be wrong, no crazy plugins or weird issues.&lt;&#x2F;p&gt;
-&lt;p&gt;I then logged into the FTP server to sniff around. Checked the &lt;code&gt;.htaccess&lt;&#x2F;code&gt;, nothing was wrong. I checked the &lt;code&gt;index.php&lt;&#x2F;code&gt;, didn&#x27;t see anything weird.&lt;&#x2F;p&gt;
-&lt;p&gt;I opened the &lt;code&gt;wp-config.php&lt;&#x2F;code&gt; and added all the &lt;a href=&quot;https:&#x2F;&#x2F;codex.wordpress.org&#x2F;Debugging_in_WordPress#Example_wp-config.php_for_Debugging&quot;&gt;debugging constants&lt;&#x2F;a&gt;, here there are for laziness:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;&#x2F;&#x2F; Enable WP_DEBUG mode
-&lt;&#x2F;span&gt;&lt;span&gt;define(&amp;#39;WP_DEBUG&amp;#39;, true);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&#x2F; Enable Debug logging to the &#x2F;wp-content&#x2F;debug.log file
-&lt;&#x2F;span&gt;&lt;span&gt;define(&amp;#39;WP_DEBUG_LOG&amp;#39;, true);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&#x2F; Disable display of errors and warnings
-&lt;&#x2F;span&gt;&lt;span&gt;define(&amp;#39;WP_DEBUG_DISPLAY&amp;#39;, false);
-&lt;&#x2F;span&gt;&lt;span&gt;@ini_set(&amp;#39;display_errors&amp;#39;, 0);
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&#x2F; Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
-&lt;&#x2F;span&gt;&lt;span&gt;define(&amp;#39;SCRIPT_DEBUG&amp;#39;, true);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;I then navigated around the site. The content (text, database data) was loading fine, but all the assets were busted. There was a map plugin that was hitting Google Maps and that loaded fine. I then knew it was this specific site.&lt;&#x2F;p&gt;
-&lt;p&gt;After poking around some more, I noticed an &lt;code&gt;index.php&lt;&#x2F;code&gt; and a &lt;code&gt;.htaccess&lt;&#x2F;code&gt; in the root of &lt;code&gt;&#x2F;wp-content&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;the-fix&quot;&gt;The Fix&lt;&#x2F;h4&gt;
-&lt;p&gt;Well, I have come across this problem before. &lt;strong&gt;Wordpress was hacked&lt;&#x2F;strong&gt;. Hacked might be a strong word, since the password was really weak. A bot probably had that password in it&#x27;s script and guessed it without issue.&lt;&#x2F;p&gt;
-&lt;p&gt;The &amp;quot;hacker&amp;quot; then uploaded a file to &lt;code&gt;&#x2F;wp-content&#x2F;.htaccess&lt;&#x2F;code&gt; and &lt;code&gt;&#x2F;wp-content&#x2F;index.php&lt;&#x2F;code&gt;. These files were intercepting request to the &lt;code&gt;wp-content&lt;&#x2F;code&gt; folder.&lt;&#x2F;p&gt;
-&lt;p&gt;When I removed the files, the site came back to life!&lt;&#x2F;p&gt;
-&lt;p&gt;So if your Wordpress site is suddenly getting 500 errors, check for rogue &lt;code&gt;index.php&lt;&#x2F;code&gt; or &lt;code&gt;.htaccess&lt;&#x2F;code&gt; files.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;create-a-better-password&quot;&gt;Create A Better Password&lt;&#x2F;h4&gt;
-&lt;p&gt;If you are looking to create a strong (but human readable) password, you should take a look at &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Diceware&quot;&gt;Diceware&lt;&#x2F;a&gt;. In short, it is a huge list of uncommon words that get randomly combined to give you a strong password you can read.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the definition from Wikipedia:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Diceware is a method for creating passphrases, passwords, and other cryptographic variables using an ordinary die from a pair of dice as a hardware random number generator. For each word in the passphrase, five rolls of the dice are required. The numbers from 1 to 6 that come up in the rolls are assembled as a five-digit number, e.g. 43146. That number is then used to look up a word in a word list.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Here is an &lt;a href=&quot;http:&#x2F;&#x2F;www.ethanresnick.com&#x2F;diceware&#x2F;&quot;&gt;online tool that can generate passwords for you&lt;&#x2F;a&gt;. This site has the default set to word count set to &lt;em&gt;5&lt;&#x2F;em&gt;. As of today, you should probably use &lt;em&gt;6&lt;&#x2F;em&gt; words to generate your password.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;has-your-wordpress-been-hacked&quot;&gt;Has Your Wordpress Been Hacked?&lt;&#x2F;h4&gt;
-&lt;p&gt;Do you know any common Wordpress hacks that occur?&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Simple Benchmarks With Apache AB</title>
-        <published>2015-09-22T00:00:00+00:00</published>
-        <updated>2015-09-22T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/"/>
-        <id>https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/">&lt;h3 id=&quot;why-benchmark&quot;&gt;Why Benchmark?&lt;&#x2F;h3&gt;
-&lt;p&gt;Did you know that Apache has a benchmarking tool for testing the HTTP server? It is called &lt;a href=&quot;http:&#x2F;&#x2F;httpd.apache.org&#x2F;docs&#x2F;2.4&#x2F;programs&#x2F;ab.html&quot; title=&quot;Apache ab&quot;&gt;ab&lt;&#x2F;a&gt;, and it is pretty great!&lt;&#x2F;p&gt;
-&lt;p&gt;As your site grows in popularity, complexity, or size, you will want to test the site to see how it preforms. Having the site crash or lock up during peak time can be devastating for a small blog or e-commerce site. It means lost revenue, and can leave a visitor with a bad impression of your site. This can drive them to generate a bad referral, or worse, go to your competitor.&lt;&#x2F;p&gt;
-&lt;p&gt;Users aren&#x27;t going to care if your site is being bombarded with traffic constantly, they really only care about &lt;em&gt;their own personal experience&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;blog.kissmetrics.com&#x2F;loading-time&#x2F;?wide=1&quot; title=&quot;Kiss Metrics loading time infographic&quot;&gt;Studies and analytics show&lt;&#x2F;a&gt; that the slower your site is, the impact on your sales or target actions is affected exponentially.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;getting-ab&quot;&gt;Getting ab&lt;&#x2F;h3&gt;
-&lt;p&gt;The &lt;code&gt;ab&lt;&#x2F;code&gt; tool can be found in most default Apache (httpd 2.2 and 2.4) setups. If you don&#x27;t have it, you can install the &lt;code&gt;apache2-utils&lt;&#x2F;code&gt; package and get it from there.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;testing&quot;&gt;Testing&lt;&#x2F;h3&gt;
-&lt;p&gt;I found &lt;a href=&quot;https:&#x2F;&#x2F;www.devside.net&#x2F;wamp-server&#x2F;load-testing-apache-with-ab-apache-bench&quot; title=&quot;Load testing apache with ab apache bench&quot;&gt;a great article on this site&lt;&#x2F;a&gt; that explains a lot of details about using ab, setting up Apache, configuring PHP, and information about the results. You should check it out.&lt;&#x2F;p&gt;
-&lt;p&gt;I used the following script, based on that article above, that tests a site in succession and prints the results to a file.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;1b77386317af93a0e5b2.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;1b77386317af93a0e5b2.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;To run the script, download it and unzip it. Then run &lt;code&gt;chmod +x bench.sh&lt;&#x2F;code&gt; to allow the script to run. Then you can use &lt;code&gt;.&#x2F;bench&lt;&#x2F;code&gt; and the script will begin.&lt;&#x2F;p&gt;
-&lt;p&gt;The article I linked to above mentioned using a &lt;a href=&quot;https:&#x2F;&#x2F;www.devside.net&#x2F;wamp-server&#x2F;load-testing-apache-with-ab-apache-bench&quot; title=&quot;Load testing apache with ab apache bench&quot;&gt;delay of 4 minutes&lt;&#x2F;a&gt; between running &lt;code&gt;ab&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Be careful using &lt;code&gt;ab&lt;&#x2F;code&gt;, as it essentially emulates a DDOS attack, in that it generates as many requests as possible as fast as possible. There is no delay option in ab, so there is no way to emulate something like &amp;quot;10 hits every 10 seconds&amp;quot; or anything like that.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;results&quot;&gt;Results&lt;&#x2F;h3&gt;
-&lt;p&gt;Here are the things you are going to want to pay attention to. These definitions are taken from the &lt;a href=&quot;http:&#x2F;&#x2F;httpd.apache.org&#x2F;docs&#x2F;2.4&#x2F;programs&#x2F;ab.html&quot; title=&quot;Apache ab&quot;&gt;ab site&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;strong&gt;Failed requests:&lt;&#x2F;strong&gt; The number of requests that were considered a failure. If the number is greater than zero, another line will be printed showing the number of requests that failed due to connecting, reading, incorrect content length, or exceptions.&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;strong&gt;Non-2xx responses:&lt;&#x2F;strong&gt; The number of responses that were not in the 200 series of response codes. If all responses were 200, this field is not printed.&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;strong&gt;Requests per second:&lt;&#x2F;strong&gt; This is the number of requests per second. This value is the result of dividing the number of requests by the total time taken.&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;strong&gt;Time per request:&lt;&#x2F;strong&gt; The average time spent per request. The first value is calculated with the formula (concurrency * timetaken * 1000 &#x2F; done) while the second value is calculated with the formula (timetaken * 1000 &#x2F; done).&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Failures and errors are generally not good. You should check your logs for anything that happened during your requests.&lt;&#x2F;p&gt;
-&lt;p&gt;For &lt;em&gt;Requests Per Second&lt;&#x2F;em&gt;, this tells you how quickly your site was able to process all those requests. Higher is better because it means that your site was able to serve the content without hiccups.&lt;&#x2F;p&gt;
-&lt;p&gt;The &lt;em&gt;Time Per Request&lt;&#x2F;em&gt;, although that article says it isn&#x27;t important in the context of ab, I think it is still important to watch. This metric tells you how long the average request takes. Keep in mind we don&#x27;t have javascript running, or&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Varnish For Static Sites</title>
-        <published>2015-09-20T00:00:00+00:00</published>
-        <updated>2015-09-20T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/varnish-for-static-sites/"/>
-        <id>https://ohdoylerules.com/web/varnish-for-static-sites/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/varnish-for-static-sites/">&lt;p&gt;Recently, &lt;a href=&quot;http:&#x2F;&#x2F;warpaintmedia.ca&quot;&gt;my company&lt;&#x2F;a&gt; had a request to build a series of sites that could handle huge bursts of traffic. I asked some friends of mine, what a good solution for this would be. All of them said &lt;a href=&quot;https:&#x2F;&#x2F;www.varnish-cache.org&#x2F;&quot;&gt;Varnish&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;If you don&#x27;t know what Varnish is, check out this definition from their documentation:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy. You install it in front of any server that speaks HTTP and configure it to cache the contents. Varnish Cache is really, really fast. It typically speeds up delivery with a factor of 300 - 1000x, depending on your architecture.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;So you can see that having this tool would be really nice. A simple way to get started with Varnish is to set it up on a flat-file site. Maybe something like &lt;a href=&quot;http:&#x2F;&#x2F;philecms.com&#x2F;&quot;&gt;PhileCMS&lt;&#x2F;a&gt; perhaps? Here is &lt;a href=&quot;https:&#x2F;&#x2F;www.staticgen.com&#x2F;&quot;&gt;a nice curated list&lt;&#x2F;a&gt; of flat-file site generators.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;setting-up&quot;&gt;Setting Up&lt;&#x2F;h3&gt;
-&lt;p&gt;This tutorial assumes the following:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;You are using Ubuntu 14.04&lt;&#x2F;li&gt;
-&lt;li&gt;You have &lt;a href=&quot;https:&#x2F;&#x2F;www.digitalocean.com&#x2F;community&#x2F;tutorials&#x2F;how-to-install-and-configure-varnish-with-apache-on-ubuntu-12-04--3&quot;&gt;Varnish and Apache installed&lt;&#x2F;a&gt; *&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;* This tutorial is for Ubuntu 12.04. Replace this command: &lt;code&gt;deb http:&#x2F;&#x2F;repo.varnish-cache.org&#x2F;ubuntu&#x2F; lucid varnish-3.0&lt;&#x2F;code&gt; with this one &lt;code&gt;deb http:&#x2F;&#x2F;repo.varnish-cache.org&#x2F;ubuntu&#x2F; trusty varnish-4.0&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;apache-setup&quot;&gt;Apache Setup&lt;&#x2F;h3&gt;
-&lt;p&gt;First, you will want to serve Apache on a different port, because Varnish is going to act as our &amp;quot;web server&amp;quot; and Apache will only be used if the cache is stale or there is no item in the Varnish cache.&lt;&#x2F;p&gt;
-&lt;p&gt;We can open &lt;code&gt;&#x2F;etc&#x2F;apache2&#x2F;ports.conf&lt;&#x2F;code&gt; and make the following change:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;# Listen 80
-&lt;&#x2F;span&gt;&lt;span&gt;Listen 127.0.0.1:8080
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;We commented out the original listening port, and added our own.&lt;&#x2F;p&gt;
-&lt;p&gt;If we have any sites setup, we should change their virtual host files as well. These files live in &lt;code&gt;&#x2F;etc&#x2F;apache2&#x2F;sites-available&lt;&#x2F;code&gt; and end in &lt;code&gt;.conf&lt;&#x2F;code&gt;, so this demo file might be called &lt;code&gt;example.com.conf&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;lt;VirtualHost *:8080&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  ServerAdmin hello@example.com
-&lt;&#x2F;span&gt;&lt;span&gt;  ServerName  www.example.com
-&lt;&#x2F;span&gt;&lt;span&gt;  ServerAlias example.com
-&lt;&#x2F;span&gt;&lt;span&gt;  DocumentRoot &#x2F;var&#x2F;www&#x2F;html&#x2F;example.com
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;VirtualHost&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;If this site is not enabled, it would be done with the command &lt;code&gt;a2ensite example.com&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;remove-caching-and-header-changes&quot;&gt;Remove Caching And Header Changes&lt;&#x2F;h4&gt;
-&lt;p&gt;You need to &lt;strong&gt;disable all caching in Apache&lt;&#x2F;strong&gt;!&lt;&#x2F;p&gt;
-&lt;p&gt;Varnish works by reading headers from any files served from our normal web server. Having caching in Apache might seem like killing 2 birds with 1 stone, but it doesn&#x27;t work that way.&lt;&#x2F;p&gt;
-&lt;p&gt;Rules you might want to check for in your &lt;code&gt;apache.conf&lt;&#x2F;code&gt; files:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;mod_headers - used for modifying headers, use with caution&lt;&#x2F;li&gt;
-&lt;li&gt;mod_deflate - for setting compression details&lt;&#x2F;li&gt;
-&lt;li&gt;mod_filter - used with mod_deflate for setting compression&lt;&#x2F;li&gt;
-&lt;li&gt;mod_expires - used for setting how long to cache files, use with caution&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;These different rule sets usually contain settings that would be great if we were &lt;em&gt;not&lt;&#x2F;em&gt; using Varnish. In this case, we are going to trust Varnish to manage all the headers for us.&lt;&#x2F;p&gt;
-&lt;p&gt;When everything is good to go, restart Apache with &lt;code&gt;service apache2 restart&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;varnish-setup&quot;&gt;Varnish Setup&lt;&#x2F;h3&gt;
-&lt;p&gt;First, we need to tell Varnish to live on port 80. We do that by editing the settings for the Varnish daemon.&lt;&#x2F;p&gt;
-&lt;p&gt;The file we need to edit is &lt;code&gt;&#x2F;etc&#x2F;default&#x2F;varnish&lt;&#x2F;code&gt;. Scroll down until you see the uncommented lines with code that looks like it does below. We need to it like this:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;DAEMON_OPTS=&amp;quot;-a :80 \
-&lt;&#x2F;span&gt;&lt;span&gt;             -T localhost:6082 \
-&lt;&#x2F;span&gt;&lt;span&gt;             -f &#x2F;etc&#x2F;varnish&#x2F;default.vcl \
-&lt;&#x2F;span&gt;&lt;span&gt;             -S &#x2F;etc&#x2F;varnish&#x2F;secret \
-&lt;&#x2F;span&gt;&lt;span&gt;             -s malloc,256m&amp;quot;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Most likely, you will only change the &lt;code&gt;-a&lt;&#x2F;code&gt; part to &lt;code&gt;80&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Our Varnish configuration for our site lives at &lt;code&gt;&#x2F;etc&#x2F;varnish&#x2F;default.vcl&lt;&#x2F;code&gt;, here is the one I am using:&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;0feec6ab77078ad3fdce.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;0feec6ab77078ad3fdce.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;It is very basic. I really only want to cache text files (HTML, CSS, Javascript&#x2F;JSON) and images.&lt;&#x2F;p&gt;
-&lt;p&gt;To restart Varnish, use &lt;code&gt;service varnish restart&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;restarting-varnish&quot;&gt;Restarting Varnish&lt;&#x2F;h4&gt;
-&lt;p&gt;If you restart or run out of memory, Varnish will rebuild the cache. This isn&#x27;t great because you are trying to keep Varnish alive and the cache enabled.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;testing&quot;&gt;Testing&lt;&#x2F;h3&gt;
-&lt;p&gt;At this point we are ready to test.&lt;&#x2F;p&gt;
-&lt;p&gt;I would suggest running the command &lt;code&gt;vanrnishstat&lt;&#x2F;code&gt; on your remote server so you can see things happening in the Varnish cache. Pressing the arrow keys up and down will give you a description of the item.&lt;&#x2F;p&gt;
-&lt;p&gt;Then you can go to you site and click around. You should see the Varnish Stat table getting updated. You will want to watch the &lt;em&gt;MAIN.cache_hit&lt;&#x2F;em&gt; and &lt;em&gt;MAIN.cache_miss&lt;&#x2F;em&gt; numbers.&lt;&#x2F;p&gt;
-&lt;p&gt;You want the &lt;em&gt;MAIN.cache_hit&lt;&#x2F;em&gt; to be as high as possible. This means that your Apache is not getting tapped for information, but Varnish is serving it straight to the client.&lt;&#x2F;p&gt;
-&lt;p&gt;For the &lt;em&gt;MAIN.cache_miss&lt;&#x2F;em&gt;, you want that to be as low as possible. This number represents the number of times that Varnish had to hit Apache. Having a low &lt;em&gt;MAIN.cache_miss&lt;&#x2F;em&gt; means that we are only tapping Apache when we must.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;troubleshooting&quot;&gt;Troubleshooting&lt;&#x2F;h4&gt;
-&lt;p&gt;Since we added that line in our &lt;code&gt;default.vcl&lt;&#x2F;code&gt; file for &lt;code&gt;X-Cache&lt;&#x2F;code&gt;, we can see which files are being served by Varnish. Using dev tools in Chrome&#x2F;Safari or Firefox, we can look for a header in our request called &lt;code&gt;X-Cache&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;varnish-x-cache.png&quot; title=&quot;Varnish x-cache header example&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Varnish x-cache header example&quot; src=&quot;&#x2F;images&#x2F;varnish-x-cache.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;You can see that this item was &lt;em&gt;HIT&lt;&#x2F;em&gt;. This means that it will be counted in the &lt;em&gt;MAIN.cache_hit&lt;&#x2F;em&gt; column and not &lt;em&gt;MAIN.cache_miss&lt;&#x2F;em&gt; column. Good!&lt;&#x2F;p&gt;
-&lt;p&gt;Things that mess up Varnish are headers and cookie headers especially. Sometimes you want or need some headers though. This setup does not allow any cookies to get through. If you had a normal CMS with this setup, you would find you wouldn&#x27;t be able to log in, or there might be some CSRF Token (Cross Site Request Forgery) issues with form submissions if you use CSRF.&lt;&#x2F;p&gt;
-&lt;p&gt;Varnish will let you control different areas where cookies or other things can change. You will want to refer to the &lt;a href=&quot;https:&#x2F;&#x2F;www.varnish-cache.org&#x2F;trac&#x2F;wiki&#x2F;VCLExampleRemovingSomeCookies&quot;&gt;Varnish Documentation&lt;&#x2F;a&gt; for these advanced features.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Validate Email With Lua</title>
-        <published>2015-09-06T00:00:00+00:00</published>
-        <updated>2015-09-06T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/validate-email-with-lua/"/>
-        <id>https://ohdoylerules.com/snippets/validate-email-with-lua/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/validate-email-with-lua/">&lt;p&gt;Checking if an email is valid should be easy, right? WRONG.&lt;&#x2F;p&gt;
-&lt;p&gt;This took about 3-4 hours to finally get. I scoured the web for a good email validation function. But, I was unable to find any that actually handled all the valid email variations.&lt;&#x2F;p&gt;
-&lt;p&gt;If you didn&#x27;t know, the &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Email_address#Examples&quot;&gt;spec for email&lt;&#x2F;a&gt; is actually pretty complex. It allows a lot more than just a web-safe prefix and a domain sandwiched between an &lt;code&gt;@&lt;&#x2F;code&gt; symbol. You can use quotes, brackets, escapes, and more &lt;code&gt;@&lt;&#x2F;code&gt; symbols.&lt;&#x2F;p&gt;
-&lt;p&gt;Looking at the results that Wikipedia gives me for emails that should fail or pass a validation, I knew this would require more than just a simple pattern match.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the final product. I added some nice comments to explain some of the rules as well.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;67846afd05335822c149.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;67846afd05335822c149.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;You can see there is a lot more logic than expected. I also made this function have multiple returns.&lt;&#x2F;p&gt;
-&lt;p&gt;If the email passes the function returns &lt;code&gt;true&lt;&#x2F;code&gt; and &lt;code&gt;nil&lt;&#x2F;code&gt;, but if it fails, it will return &lt;code&gt;nil&lt;&#x2F;code&gt; and the reason that the validation failed. Pretty slick!&lt;&#x2F;p&gt;
-&lt;p&gt;Anyway, this was a tedious task. So go forth and leverage my pain in your next form submission.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Simple PHP JSON Response</title>
-        <published>2015-08-04T00:00:00+00:00</published>
-        <updated>2015-08-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/simple-php-json-response/"/>
-        <id>https://ohdoylerules.com/snippets/simple-php-json-response/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/simple-php-json-response/">&lt;p&gt;This is little snippet I use all the time when I am building simple flat sites that need a single route for an AJAX request.&lt;&#x2F;p&gt;
-&lt;p&gt;There are a couple of things you need to do in order to create a proper JSON response.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;use-json-encode&quot;&gt;Use json_encode&lt;&#x2F;h4&gt;
-&lt;p&gt;If you are really new to PHP, you may not have found &lt;a href=&quot;http:&#x2F;&#x2F;php.net&#x2F;manual&#x2F;en&#x2F;function.json-encode.php#refsect1-function.json-encode-examples&quot;&gt;json_encode&lt;&#x2F;a&gt;. If that is the case, then look it up right now.&lt;&#x2F;p&gt;
-&lt;p&gt;This function converts PHP arrays, strings, and objects, into a JSON safe string. This makes it simple for you to create safe responses that can be handled by your javascript.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;use-content-type&quot;&gt;Use Content-Type&lt;&#x2F;h4&gt;
-&lt;p&gt;This is usually the magic command that allows you to &lt;em&gt;receive&lt;&#x2F;em&gt; JSON from your script. If you don&#x27;t set the header, PHP will simple return a string. Then in your javascript, you have to use &lt;code&gt;JSON.parse&lt;&#x2F;code&gt; in order to get the object that javascript can use.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;header(&amp;#39;Content-Type: application&#x2F;json&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;No more strings! The request is now treated accordingly and is parsed for you. I am sure everyone has encountered this in the beginning.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;use-status&quot;&gt;Use Status&lt;&#x2F;h4&gt;
-&lt;p&gt;Here is another header that you need to set in order for things to work smoothly. By setting the status, you can tell your javascript, as well as your browser, what the status of the request it. By default, the requests are treated as &lt;code&gt;200 OK&lt;&#x2F;code&gt;. So although you may have sent a response with a failing message, with setting a failed status (usually 300 codes and above) the browser, and your javascript, think everything is fine.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;header(&amp;#39;Status: 400 Bad Request&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This becomes very apparent in jQuery when using &lt;code&gt;$.get&lt;&#x2F;code&gt; or &lt;code&gt;$.post&lt;&#x2F;code&gt;. If you are using a Promise style request (using &lt;code&gt;$.get().then( ... )&lt;&#x2F;code&gt;), your error handler never gets called.&lt;&#x2F;p&gt;
-&lt;p&gt;If you want to find the perfect header for your fantastic error, check out the Wikipedia for the &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;List_of_HTTP_status_codes&quot;&gt;HTTP status codes&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;example&quot;&gt;Example&lt;&#x2F;h4&gt;
-&lt;p&gt;Here is an example of a simple script I might use when testing an AJAX response, or when building a flat-file site. I would place this somewhere in my websites directory, and then hit it directly with an AJAX request.&lt;&#x2F;p&gt;
-&lt;p&gt;If my local path to my site was &lt;code&gt;http:&#x2F;&#x2F;localhost:8888&#x2F;website&lt;&#x2F;code&gt;, I would save this script as &lt;code&gt;json.php&lt;&#x2F;code&gt;. Then I would then use the following jQuery to test the script:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;$.get(&amp;quot;http:&#x2F;&#x2F;localhost:8888&#x2F;website&#x2F;json.php&amp;quot;)
-&lt;&#x2F;span&gt;&lt;span&gt;.done(function(response){
-&lt;&#x2F;span&gt;&lt;span&gt;  console.log(response);
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;If everything was organized correctly, I should get a successful response with the information I wanted.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the script:&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;33794328675a6c88edd6.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;33794328675a6c88edd6.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;You could always add more HTTP status codes, or use different key names for the array response. I like &lt;code&gt;status&lt;&#x2F;code&gt; and &lt;code&gt;message&lt;&#x2F;code&gt; because I may have a successful response, but I know something else went wrong when the &lt;code&gt;status&lt;&#x2F;code&gt; is false. I usually put whatever data I need in &lt;code&gt;message&lt;&#x2F;code&gt;. If message is a string, I know there is actually a message and not data I need to handle.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Disallowed Characters In URI</title>
-        <published>2015-03-31T00:00:00+00:00</published>
-        <updated>2015-03-31T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/disallowed-characters-in-uri/"/>
-        <id>https://ohdoylerules.com/tricks/disallowed-characters-in-uri/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/disallowed-characters-in-uri/">&lt;p&gt;How to fix &amp;quot;The URI you submitted has disallowed characters&amp;quot; error.&lt;&#x2F;p&gt;
-&lt;p&gt;Does this screenshot look familiar?&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;error-400-disallowed-characters.png&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;codeigniter 400 error for disallowed characters&quot; src=&quot;&#x2F;images&#x2F;error-400-disallowed-characters.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Well, it has been killing me for the last 2 hours. I have encountered this error before, but I never realized what caused it, or how it was fixed. I would just try random stuff, entering in different content, moving different functions. Eventually it would go away...&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;symptoms&quot;&gt;Symptoms&lt;&#x2F;h3&gt;
-&lt;p&gt;In this situation, whenever I would click on a particular link I got the error. I copied and pasted the URL from the browser into Sublime Text. It looked like this:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;http:&#x2F;&#x2F;localhost:8080&#x2F;website&#x2F;page%E2%80%8B
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;What the heck? I never added those characters. They never showed in the browser URL, and trying to replace them in my code was not working.&lt;&#x2F;p&gt;
-&lt;p&gt;I tried editing the entries in my database in order to remove the character. I deleted and edited each field. I even tried converting the character encoding and trimming the URL. &lt;em&gt;Nothing worked!&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;I then read a post on the &lt;a href=&quot;https:&#x2F;&#x2F;forum.pyrocms.com&#x2F;discussion&#x2F;24142&#x2F;does-pagesurl-return-with-disallowed-characters-for-you-too&quot;&gt;PyroCMS Forum&lt;&#x2F;a&gt; that said there is probably a hidden character somewhere in the code. Well, I looked in my PHP and I didn&#x27;t find anything, looking in my HTML there was nothing there either.&lt;&#x2F;p&gt;
-&lt;p&gt;So what to do? When in doubt, &lt;em&gt;use vim&lt;&#x2F;em&gt;. I dusted off my vim and looked at the PHP file, nothing! Then I opened the HTML file...&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;HEY! There is a tiny little hidden character in my HTML!!&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;the-fix&quot;&gt;The Fix&lt;&#x2F;h3&gt;
-&lt;p&gt;I removed the character and everything worked perfectly. Here is the diff after I removed the character:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;hidden-character-diff.png&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;git diff for hidden character&quot; src=&quot;&#x2F;images&#x2F;hidden-character-diff.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;You can see there is a little trailing character there. I don&#x27;t know exactly how this got in there, but god damn was it driving me crazy.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;in-summation&quot;&gt;In Summation&lt;&#x2F;h3&gt;
-&lt;p&gt;The real problem is, this &lt;em&gt;didn&#x27;t show in Sublime Text&lt;&#x2F;em&gt; or in the &lt;em&gt;Chrome elements panel&lt;&#x2F;em&gt;. Even the commit on &lt;em&gt;Github&lt;&#x2F;em&gt; didn&#x27;t show the hidden character I removed.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;github-hidden-character-diff.png&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;github diff for hidden character&quot; src=&quot;&#x2F;images&#x2F;github-hidden-character-diff.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;The only way it would show up is when I opened the file in &lt;strong&gt;vim&lt;&#x2F;strong&gt;!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>PhalconPHP Completions</title>
-        <published>2015-03-20T00:00:00+00:00</published>
-        <updated>2015-03-20T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/phalconphp-completions/"/>
-        <id>https://ohdoylerules.com/web/phalconphp-completions/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/phalconphp-completions/">&lt;p&gt;I have created a package of Sublime Text completions for &lt;a href=&quot;http:&#x2F;&#x2F;phalconphp.com&#x2F;en&#x2F;&quot;&gt;Phalcon PHP&lt;&#x2F;a&gt; 1.3.*.&lt;&#x2F;p&gt;
-&lt;p&gt;There are &lt;strong&gt;414&lt;&#x2F;strong&gt; total right now. This is pretty much a copy-paste from my &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;sublime-node-snippets&quot;&gt;sublime-node-snippets&lt;&#x2F;a&gt; repo.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-    &lt;img src=&quot;https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;james2doyle&#x2F;phalconphp-completions&#x2F;master&#x2F;testing.gif&quot; alt=&quot;PhalconPHP Completions in action&quot; &#x2F;&gt;
-    &lt;p&gt;PhalconPHP Completions in action&lt;&#x2F;p&gt;
-&lt;&#x2F;div&gt;
-&lt;h2 id=&quot;installing&quot;&gt;Installing&lt;&#x2F;h2&gt;
-&lt;h4 id=&quot;via-package-control&quot;&gt;Via Package Control&lt;&#x2F;h4&gt;
-&lt;p&gt;Just look for &lt;code&gt;phalconphp-completions&lt;&#x2F;code&gt; on &lt;a href=&quot;https:&#x2F;&#x2F;packagecontrol.io&#x2F;packages&#x2F;PhalconPHP%20Completions&quot;&gt;Package Control&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;manually-adding-repo&quot;&gt;Manually Adding Repo&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;Open the Commands Palette (command+shift+p)&lt;&#x2F;li&gt;
-&lt;li&gt;Package Control: Add Repository&lt;&#x2F;li&gt;
-&lt;li&gt;Past in this repos URL&lt;&#x2F;li&gt;
-&lt;li&gt;Press Enter&lt;&#x2F;li&gt;
-&lt;li&gt;Open the palette again&lt;&#x2F;li&gt;
-&lt;li&gt;press enter on &amp;quot;phalconphp-completions&amp;quot;&lt;&#x2F;li&gt;
-&lt;li&gt;watch it install&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;by-download&quot;&gt;By Download&lt;&#x2F;h4&gt;
-&lt;p&gt;Drop this folder in your Sublime Text packages directory.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;using&quot;&gt;Using&lt;&#x2F;h2&gt;
-&lt;p&gt;Pressing &lt;code&gt;\&lt;&#x2F;code&gt; (backslash) or &lt;code&gt;:&lt;&#x2F;code&gt; will end the snippet lookup.&lt;&#x2F;p&gt;
-&lt;p&gt;Therefore, you will have better results if you &lt;em&gt;pretend the slashes and colons aren&#x27;t needed&lt;&#x2F;em&gt;. So if you are looking for &lt;code&gt;Phalcon\Text::increment&lt;&#x2F;code&gt;, you would type &lt;code&gt;phalcontextincrement&lt;&#x2F;code&gt; and you would see the results coming up.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;See the GIF above!&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;building&quot;&gt;Building&lt;&#x2F;h2&gt;
-&lt;p&gt;I went to each page of the PhalconPHP docs, and copied the functions. Then I wrote a converter to take each function and convert it to a snippet.&lt;&#x2F;p&gt;
-&lt;p&gt;For Example, this line:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;Phalcon\Text::endsWith($str, $end, $ignoreCase)
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Is going to get converted to:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;Phalcon\\Text::endsWith(\\$${1:str}, \\$${2:end}, \\$${3:ignoreCase});${0}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h2 id=&quot;sources-txt&quot;&gt;sources.txt&lt;&#x2F;h2&gt;
-&lt;p&gt;This file is cool. It is just a line-by-line output of the Phalcon docs functions. This is the file that is parsed to generate the snippets.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;running-the-build&quot;&gt;Running The Build&lt;&#x2F;h2&gt;
-&lt;p&gt;Just run &lt;code&gt;node build.js&lt;&#x2F;code&gt; and it will rake the &lt;code&gt;sources.txt&lt;&#x2F;code&gt; file and then write the new snippet in the snippets folder.&lt;&#x2F;p&gt;
-&lt;p&gt;Everything before the first &lt;code&gt;(&lt;&#x2F;code&gt; will be used as the filename.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;adding-new-snippets&quot;&gt;Adding New Snippets&lt;&#x2F;h2&gt;
-&lt;p&gt;Here is how I quickly got all these snippets.&lt;&#x2F;p&gt;
-&lt;p&gt;First, I went to the docs for the class, and I looked to see what the code examples were wrapped in. For the all the docs pages, the methods and properties are show in a &lt;code&gt;p.method-signature&lt;&#x2F;code&gt; element.&lt;&#x2F;p&gt;
-&lt;p&gt;So to quickly get the list, I ran the following code:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Array&lt;&#x2F;span&gt;&lt;span&gt;.prototype.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span&gt;(document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;querySelectorAll&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.method-signature&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;), &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;item&lt;&#x2F;span&gt;&lt;span&gt;){
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;item&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;textContent&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;trim&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;}).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Then copied the output in the Chrome console, added the class in front (replacing the type info), and pasted it in the &lt;code&gt;sources.txt&lt;&#x2F;code&gt; file. Done!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Easy FFmpeg Video Posters</title>
-        <published>2015-03-19T00:00:00+00:00</published>
-        <updated>2015-03-19T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/"/>
-        <id>https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/">&lt;p&gt;A week ago I was tasked with uploading about 20 different videos to a CMS. Normally for the HTML5 Video element to look nice, you should upload a &lt;a href=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;2012&#x2F;WD-html5-20121025&#x2F;the-video-element.html#attr-video-poster&quot;&gt;poster image&lt;&#x2F;a&gt; so that there can be something showing before the video starts to play.&lt;&#x2F;p&gt;
-&lt;p&gt;In my case, I had to generate a poster for each of these 20 videos. This would have taken a long time, so I scripted it using FFmpeg!&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the script:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;#!&#x2F;usr&#x2F;bin&#x2F;env bash
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# take in mp4, take screenshot at 5 seconds
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# output same filename, but with jpg extension
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt; FILE &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;in &lt;&#x2F;span&gt;&lt;span&gt;*.mp4
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;do
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# save the filename but swap the extension
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;NEWFILE&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;FILE&lt;&#x2F;span&gt;&lt;span&gt;%&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.mp4}.jpg&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ffmpeg -y -i &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;FILE -f&lt;&#x2F;span&gt;&lt;span&gt; mjpeg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -vframes&lt;&#x2F;span&gt;&lt;span&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -ss&lt;&#x2F;span&gt;&lt;span&gt; 5 $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;NEWFILE
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;done
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;&lt;em&gt;If your videos are not mp4 format, just change the extension.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;To use this script:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;save this script as &lt;code&gt;poster.sh&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;put it in the folder with all your video files&lt;&#x2F;li&gt;
-&lt;li&gt;own the script with &lt;code&gt;chmod +x poster.sh&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;run the script with &lt;code&gt;.&#x2F;poster.sh&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;You should see a bunch of text fly in your command line, and a couple of seconds later, the conversion should be done. You will see some nice little posters right beside your videos! And, they will all be nicely named too!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Minimal Raspberry Pi OS</title>
-        <published>2015-03-14T00:00:00+00:00</published>
-        <updated>2015-03-20T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/"/>
-        <id>https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/">&lt;h2 id=&quot;introduction&quot;&gt;Introduction&lt;&#x2F;h2&gt;
-&lt;p&gt;I have had a &lt;a href=&quot;http:&#x2F;&#x2F;www.raspberrypi.org&#x2F;products&#x2F;model-b&#x2F;&quot;&gt;Raspberry Pi B+&lt;&#x2F;a&gt; for a while now, and I was looking to setup a very minimal Linux OS. I am sure this would work fine with the Pi 2.&lt;&#x2F;p&gt;
-&lt;p&gt;Although the other &lt;a href=&quot;http:&#x2F;&#x2F;www.raspberrypi.org&#x2F;downloads&#x2F;&quot;&gt;Raspberry Pi OSs&lt;&#x2F;a&gt; are great, a lot of them are too feature-full (read bloated) and have a packaged GUI that I would never use. Therefore, I wanted to install something much more &lt;em&gt;naked&lt;&#x2F;em&gt; than the ones on the Raspberry Pi website.&lt;&#x2F;p&gt;
-&lt;p&gt;Enter, &lt;a href=&quot;http:&#x2F;&#x2F;sourceforge.net&#x2F;projects&#x2F;moebiuslinux&#x2F;&quot;&gt;Moebius&lt;&#x2F;a&gt;. A few words from the Moebius site:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;[Moebius] is a Raspberry Pi armhf Debian based distribution targeted to have a minimal footprint. Size, speed and optimizations are main goals for this distro...&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;With that said, the &lt;em&gt;unzipped &lt;code&gt;img&lt;&#x2F;code&gt;&lt;&#x2F;em&gt; file is about &lt;strong&gt;110Mb&lt;&#x2F;strong&gt;. That is pretty small!&lt;&#x2F;p&gt;
-&lt;p&gt;The other thing that Moebius does is remove the default Raspbian sources from &lt;code&gt;apt-get&lt;&#x2F;code&gt;. This means &lt;em&gt;you can&#x27;t just download all the Rasbian packages&lt;&#x2F;em&gt; you want.&lt;&#x2F;p&gt;
-&lt;p&gt;Moebius introduces the idea of containers. This isn&#x27;t the same container technology like Docker. The &amp;quot;containers&amp;quot; are more like groups of packages. When installing a Moebius container, everything is installed in &lt;code&gt;&#x2F;usr&#x2F;bin&lt;&#x2F;code&gt; as if it came with the system.&lt;&#x2F;p&gt;
-&lt;p&gt;I am going to provide a little walkthrough to get started with Moebius as a light-weight development environment, as well as how to install some other tools.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;initial-setup&quot;&gt;Initial Setup&lt;&#x2F;h3&gt;
-&lt;p&gt;First, visit the Moebius Sourceforge page and follow the instructions to &lt;a href=&quot;http:&#x2F;&#x2F;sourceforge.net&#x2F;projects&#x2F;moebiuslinux&#x2F;files&#x2F;raspberry.stable&#x2F;&quot;&gt;download Moebius&lt;&#x2F;a&gt;. The basic instructions tell you how to copy the img to the SD Card. Once everything is setup and the Raspberry Pi has booted, complete the following:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Either connect a screen and keyboard to the pi, or SSH to the pi&lt;&#x2F;li&gt;
-&lt;li&gt;The default user is &lt;code&gt;root&lt;&#x2F;code&gt; and password is &lt;code&gt;moebius&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;When logged in, run &lt;code&gt;moebius&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;moebius-tool.png&quot; title=&quot;Moebius command line app&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Moebius command line app&quot; src=&quot;&#x2F;images&#x2F;moebius-tool.png&quot; &gt;&lt;&#x2F;a&gt;
-  &lt;p&gt;Moebius command line app&lt;&#x2F;p&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Moebius is the name of the OS, but also the name of a sweet little built-in command line tool to setup the rest of the Pi.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;ssh-niceness&quot;&gt;SSH Niceness&lt;&#x2F;h4&gt;
-&lt;p&gt;&lt;strong&gt;Optional:&lt;&#x2F;strong&gt; Add your public key to Moebius in order to ssh without a password. This is not required, but it does make popping in and out of the Pi nice and quick. Plus, no password to remember!&lt;&#x2F;p&gt;
-&lt;p&gt;Moebius does not come with &lt;code&gt;nano&lt;&#x2F;code&gt;! If you are not familiar with the &lt;code&gt;vi&lt;&#x2F;code&gt; tool, you should &lt;a href=&quot;http:&#x2F;&#x2F;www.washington.edu&#x2F;computing&#x2F;unix&#x2F;vi.html&quot;&gt;use this site to learn some basics&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Just create &lt;code&gt;~&#x2F;.ssh&lt;&#x2F;code&gt; and then use &lt;code&gt;vi ~&#x2F;.ssh&#x2F;authorized_keys&lt;&#x2F;code&gt; to create a new file, then paste in your public key.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;dev-environment-setup&quot;&gt;Dev Environment Setup&lt;&#x2F;h3&gt;
-&lt;ul&gt;
-&lt;li&gt;Run &lt;code&gt;moebius&lt;&#x2F;code&gt; and select &lt;code&gt;Basic&#x2F;Initial Setup&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;Choose &lt;code&gt;Autoresize SD partition&lt;&#x2F;code&gt;, follow the instructions&lt;&#x2F;li&gt;
-&lt;li&gt;Run &lt;code&gt;apt-get update&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;Run &lt;code&gt;apt-get install tzdata&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;Run &lt;code&gt;moebius&lt;&#x2F;code&gt; and select &lt;code&gt;Basic&#x2F;Initial Setup&lt;&#x2F;code&gt;, choose &lt;code&gt;System timezone setup&lt;&#x2F;code&gt; and follow instructions&lt;&#x2F;li&gt;
-&lt;li&gt;In &lt;code&gt;moebius&lt;&#x2F;code&gt;, select &lt;code&gt;Software Management&lt;&#x2F;code&gt; and select &lt;code&gt;Update containers list from repository&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;Do the same as above except choose &lt;code&gt;Install a container&lt;&#x2F;code&gt; from the &lt;code&gt;Software Management&lt;&#x2F;code&gt; menu&lt;&#x2F;li&gt;
-&lt;li&gt;Select the &lt;code&gt;lang.gcc&lt;&#x2F;code&gt; container&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;moebius-container-tool.png&quot; title=&quot;Moebius container command line app&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Moebius container command line app&quot; src=&quot;&#x2F;images&#x2F;moebius-container-tool.png&quot; &gt;&lt;&#x2F;a&gt;
-  &lt;p&gt;Moebius container command line app&lt;&#x2F;p&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;&lt;strong&gt;You may get an error&lt;&#x2F;strong&gt; telling you to run &lt;code&gt;dpkg --configure -a&lt;&#x2F;code&gt;. If this happens, press any key to close the container installed and then run that command. When that completes, try to install the &lt;code&gt;lang.gcc&lt;&#x2F;code&gt; container again.&lt;&#x2F;p&gt;
-&lt;p&gt;You may have to repeat the process above &lt;em&gt;multiple times&lt;&#x2F;em&gt;. I did it twice.&lt;&#x2F;p&gt;
-&lt;p&gt;Once the container is installed, you should have &lt;code&gt;make&lt;&#x2F;code&gt; and &lt;code&gt;gcc&lt;&#x2F;code&gt;, and a bunch of other tools on your system.&lt;&#x2F;p&gt;
-&lt;hr &#x2F;&gt;
-&lt;h3 id=&quot;install-git&quot;&gt;Install git&lt;&#x2F;h3&gt;
-&lt;p&gt;&lt;strong&gt;You must install the lang.gcc container first&lt;&#x2F;strong&gt;. That container provides the necessary compilers we need in order to build git.&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Get the required development files with &lt;code&gt;apt-get install openssl-dev curl-dev libexpat-dev dropbear-dev coreutils coreutils-dev&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;Download the latest zip archive &lt;code&gt;wget https:&#x2F;&#x2F;github.com&#x2F;git&#x2F;git&#x2F;archive&#x2F;v2.3.3.zip&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;Run &lt;code&gt;unzip v2.3.3.zip&lt;&#x2F;code&gt; and then &lt;code&gt;cd v2.3.3&#x2F;&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;Allow the scripts to run with &lt;code&gt;chmod +x *.sh &amp;amp;&amp;amp; chmod +x check_bindir&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Following the official &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;git&#x2F;git&#x2F;blob&#x2F;master&#x2F;INSTALL&quot;&gt;INSTALL&lt;&#x2F;a&gt; in the git source code repository, we want to leave out some of the features in order to build without some of the required libraries.&lt;&#x2F;p&gt;
-&lt;p&gt;To do this, we need to run:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;make NO_PERL=YesPlease NO_TCLTK=YesPlease NO_GETTEXT=YesPlease prefix=&#x2F;usr install
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This will take a while to build, so &lt;em&gt;grab a coffee or a beer&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;Note:&lt;&#x2F;strong&gt; This command does not build the docs, so if you want those, you will have to consult the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;git&#x2F;git&#x2F;blob&#x2F;master&#x2F;INSTALL&quot;&gt;INSTALL&lt;&#x2F;a&gt; file in the git repo.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;samba-setup&quot;&gt;Samba setup&lt;&#x2F;h3&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Samba_%28software%29&quot;&gt;Samba&lt;&#x2F;a&gt; lets us access the Pi like a hard drive on our local network. Samba &lt;em&gt;works well with Windows and OSX&lt;&#x2F;em&gt;, and of course Linux as well.&lt;&#x2F;p&gt;
-&lt;p&gt;If you are not familiar with the &lt;code&gt;vi&lt;&#x2F;code&gt; tool, you should &lt;a href=&quot;http:&#x2F;&#x2F;www.washington.edu&#x2F;computing&#x2F;unix&#x2F;vi.html&quot;&gt;use this site to learn some basics&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Complete the following to setup Samba:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;run &lt;code&gt;apt-get install samba&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;open the config with &lt;code&gt;vi &#x2F;etc&#x2F;samba&#x2F;smb.conf&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;then complete the following:&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;# find in the top part of the file
-&lt;&#x2F;span&gt;&lt;span&gt;workgroup = your_workgroup_name
-&lt;&#x2F;span&gt;&lt;span&gt;# find and uncomment this line
-&lt;&#x2F;span&gt;&lt;span&gt;wins support = yes
-&lt;&#x2F;span&gt;&lt;span&gt;# add to the bottom of the file
-&lt;&#x2F;span&gt;&lt;span&gt;[pihome]
-&lt;&#x2F;span&gt;&lt;span&gt;  comment= Pi Home
-&lt;&#x2F;span&gt;&lt;span&gt;  path=&#x2F;home&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;  browseable=Yes
-&lt;&#x2F;span&gt;&lt;span&gt;  writeable=Yes
-&lt;&#x2F;span&gt;&lt;span&gt;  only guest=no
-&lt;&#x2F;span&gt;&lt;span&gt;  create mask=0777
-&lt;&#x2F;span&gt;&lt;span&gt;  directory mask=0777
-&lt;&#x2F;span&gt;&lt;span&gt;  public=no
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;ul&gt;
-&lt;li&gt;set the samba password with &lt;code&gt;smbpasswd -a root&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h3 id=&quot;install-lit-and-luvit&quot;&gt;Install lit and luvit&lt;&#x2F;h3&gt;
-&lt;p&gt;&lt;em&gt;Again, have lang.gcc installed before continuing&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I have been playing with &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;luvit&#x2F;lit&quot;&gt;Lit&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;luvit&#x2F;luvit&quot;&gt;Luvit&lt;&#x2F;a&gt;. They are like lightweight versions of Node.js, but written with Lua. So let&#x27;s install them with a series of commands:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;apt-get install curl
-&lt;&#x2F;span&gt;&lt;span&gt;curl -L https:&#x2F;&#x2F;github.com&#x2F;luvit&#x2F;lit&#x2F;raw&#x2F;master&#x2F;get-lit.sh | sh
-&lt;&#x2F;span&gt;&lt;span&gt;mkdir -p &#x2F;usr&#x2F;local&#x2F;bin
-&lt;&#x2F;span&gt;&lt;span&gt;mv lit &#x2F;usr&#x2F;local&#x2F;bin&#x2F;lit
-&lt;&#x2F;span&gt;&lt;span&gt;lit make lit:&#x2F;&#x2F;luvit&#x2F;luvit
-&lt;&#x2F;span&gt;&lt;span&gt;mv luvit &#x2F;usr&#x2F;local&#x2F;bin&#x2F;luvit
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Try running &lt;code&gt;lit version&lt;&#x2F;code&gt; and then &lt;code&gt;luvit --version&lt;&#x2F;code&gt; to see if the frameworks are installed.&lt;&#x2F;p&gt;
-&lt;hr &#x2F;&gt;
-&lt;h3 id=&quot;finished&quot;&gt;Finished&lt;&#x2F;h3&gt;
-&lt;p&gt;You should now have everything setup to get around. If you find any problems with my instructions, &lt;strong&gt;please let me know in the comments&lt;&#x2F;strong&gt; and I will update them!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Phalcon Micro App Starter</title>
-        <published>2015-01-20T00:00:00+00:00</published>
-        <updated>2015-01-20T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/phalcon-micro-starter/"/>
-        <id>https://ohdoylerules.com/personal-project/phalcon-micro-starter/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/phalcon-micro-starter/">&lt;p&gt;I created a &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;phalcon-micro-start&quot;&gt;simple application template&lt;&#x2F;a&gt; that helps people get started with &lt;a href=&quot;http:&#x2F;&#x2F;phalconphp.com&#x2F;&quot; title=&quot;Phalcon PHP Homepage&quot;&gt;Phalcon PHP&lt;&#x2F;a&gt; using a more practical example of the &lt;a href=&quot;http:&#x2F;&#x2F;docs.phalconphp.com&#x2F;en&#x2F;latest&#x2F;reference&#x2F;micro.html&quot;&gt;Micro application&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;There is already a &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;phalcon&#x2F;store&quot;&gt;sample application created by the Phalcon team that uses the Micro class&lt;&#x2F;a&gt;, but I found it to be a little more specific than I would like. It uses things like the &lt;a href=&quot;http:&#x2F;&#x2F;docs.phalconphp.com&#x2F;en&#x2F;latest&#x2F;reference&#x2F;volt.html&quot;&gt;Volt template engine&lt;&#x2F;a&gt;, models, Database connections, and some other &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;phalcon&#x2F;store&#x2F;blob&#x2F;master&#x2F;config&#x2F;bootstrap.php&quot;&gt;glossed over Bootstrapping&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;phalcon-micro-start&quot;&gt;My example application&lt;&#x2F;a&gt; contains very little. It has enough to get you started creating a simple JSON-based application, or just serving a static site with a few cached views.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;what-s-included&quot;&gt;What&#x27;s Included?&lt;&#x2F;h2&gt;
-&lt;h4 id=&quot;basic-page-example&quot;&gt;Basic page example&lt;&#x2F;h4&gt;
-&lt;p&gt;Just shows a simple GET route and serves a single view.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;partial-views-simple-view-engine&quot;&gt;Partial views (&lt;code&gt;Simple&lt;&#x2F;code&gt; view engine)&lt;&#x2F;h4&gt;
-&lt;p&gt;The templates use partials for the header and footer of the site.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;url-with-params&quot;&gt;URL with params&lt;&#x2F;h4&gt;
-&lt;p&gt;You can pass parameters into the URL, and they will be rendered on the page.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;json-return&quot;&gt;JSON return&lt;&#x2F;h4&gt;
-&lt;p&gt;An example of how to return JSON via a POST request. There is also a comment that tells you the jQuery test function to try.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;cached-view&quot;&gt;Cached view&lt;&#x2F;h4&gt;
-&lt;p&gt;This shows how you can serve a cached view, with an expiry. Good for those complicated pages that need to be refreshed every other day.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;redirect-url&quot;&gt;Redirect URL&lt;&#x2F;h4&gt;
-&lt;p&gt;This one is really simple. It just shows how you can redirect one URL request to another.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;other-niceness&quot;&gt;Other Niceness&lt;&#x2F;h3&gt;
-&lt;p&gt;I also included a simple grunt task that uses &lt;code&gt;livereload&lt;&#x2F;code&gt;. This will refresh the browser when view files, or the &lt;code&gt;app.php&lt;&#x2F;code&gt; file, changes.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;link&quot;&gt;Link&lt;&#x2F;h3&gt;
-&lt;p&gt;You can find the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;phalcon-micro-start&quot;&gt;repositry on Github&lt;&#x2F;a&gt;. I will be updating and tweaking this project as I move along. It may become more feature-rich in the next few months. I would like to build a nice solid base for myself when using the Micro app.&lt;&#x2F;p&gt;
-&lt;p&gt;There may be some need to add in some simple search examples, models, forms, validation, or even Database connections. But we will see if that is where it moved organically.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>PhalconPHP Crop Image To Fit</title>
-        <published>2014-11-24T00:00:00+00:00</published>
-        <updated>2014-11-24T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/"/>
-        <id>https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/">&lt;p&gt;I was trying to find out how to crop-to-fit an image with &lt;code&gt;GD&lt;&#x2F;code&gt;. But there were no examples with Phalcon. There was one post that mentioned using &lt;code&gt;Imagick&lt;&#x2F;code&gt;. The only problem was that you needed to compiled Imagick with &lt;code&gt;--lrf&lt;&#x2F;code&gt; in order to use &lt;code&gt;liquidRescale&lt;&#x2F;code&gt;. This may not be an option on many hosting platforms. For that reason, I wanted to use &lt;code&gt;GD&lt;&#x2F;code&gt; instead.&lt;&#x2F;p&gt;
-&lt;p&gt;I &lt;a href=&quot;http:&#x2F;&#x2F;salman-w.blogspot.com&#x2F;2009&#x2F;04&#x2F;crop-to-fit-image-using-aspphp.html&quot; title=&quot;Crop-To-Fit an Image Using ASP&#x2F;PHP&quot;&gt;found this post&lt;&#x2F;a&gt; after a quick Google search. It helped me create the base for my Phalcon version of the function. This may seem pretty easy for some people, but I found enough people asking, that I figured I would share the whole code.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;13a36401d6249729d017.js&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;james2doyle&amp;#x2F;13a36401d6249729d017.js&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;If you really wanted to use Imagick, then you could just replace GD in the constructor (&lt;code&gt;Phalcon\Image\Adapter\Imagick($source)&lt;&#x2F;code&gt;) and it should work fine. This way you don&#x27;t need to compile Imagick from source in order to get &lt;code&gt;liquidRescale&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>PyroCMS Module Generator 2.0</title>
-        <published>2014-11-16T00:00:00+00:00</published>
-        <updated>2014-11-16T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-module-generator-2/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-module-generator-2/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-module-generator-2/">&lt;p&gt;Finally, I found a good excuse to re-write my old &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;personal-project&#x2F;pyro-module-generator&quot;&gt;Pyro Module Generator&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;This tool was originally made when I was freelancing. I built it off the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;pyrocms&#x2F;sample&quot;&gt;Sample Module project on Github&lt;&#x2F;a&gt;. I wanted to be able to build modules quickly, since I wasn&#x27;t using streams. In fact, streams wasn&#x27;t even a thing when I made the first version of the module generator.&lt;&#x2F;p&gt;
-&lt;p&gt;Again, I have made a &lt;a href=&quot;http:&#x2F;&#x2F;dev.warpaintmedia.ca&#x2F;pyro-module-generator&#x2F;&quot; title=&quot;PyroCMS Module Generator Website&quot;&gt;live hosted version of the generator&lt;&#x2F;a&gt; which you can use without having to have anything setup locally. The generated module is zipped and then ready for download.&lt;&#x2F;p&gt;
-&lt;p&gt;The &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-module-generator&quot; title=&quot;PyroCMS Module Generator On Github&quot;&gt;source is also on Github&lt;&#x2F;a&gt; for people who want to patch issues or fork.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;about-version-2-0&quot;&gt;About Version 2.0&lt;&#x2F;h3&gt;
-&lt;p&gt;This new version is built with &lt;a href=&quot;http:&#x2F;&#x2F;phalconphp.com&#x2F;en&#x2F;&quot;&gt;PhalconPHP&lt;&#x2F;a&gt; because phalcon is crazy fast and easy to make small apps with. I managed to get the whole thing re-written in a day. Much of the code was a copy paste for the build process. But now the &lt;code&gt;Add Field&lt;&#x2F;code&gt; button is actually an AJAX call to generate a new partial for the new field. This is much nicer than the pervious version.&lt;&#x2F;p&gt;
-&lt;p&gt;That being said, &lt;strong&gt;YOU MUST HAVE PHALCONPHP INSTALLED TO USE THIS APP!!&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;There are a few little things I need to refactor, so that when 3.0 comes out, it will be easy to switch between the different versions of Pyro.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;usage&quot;&gt;Usage&lt;&#x2F;h3&gt;
-&lt;p&gt;Just throw it in your localhost root and point your browser to it. There is no database, since it just writes and renames files for you.&lt;&#x2F;p&gt;
-&lt;p&gt;If you have &lt;strong&gt;used a custom folder name&lt;&#x2F;strong&gt; (and didn&#x27;t just clone as &lt;code&gt;pyro-module-generator&lt;&#x2F;code&gt;), then open the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-module-generator&#x2F;blob&#x2F;master&#x2F;config&#x2F;config.php#L7&quot;&gt;config&#x2F;config.php and change the baseUri&lt;&#x2F;a&gt; to match that folder name.&lt;&#x2F;p&gt;
-&lt;h5 id=&quot;writeable-folders&quot;&gt;Writeable Folders&lt;&#x2F;h5&gt;
-&lt;p&gt;We need to run &lt;code&gt;chmod -R 777 cache&#x2F;volt&lt;&#x2F;code&gt; and &lt;code&gt;chmod -R 777 public&#x2F;generated&lt;&#x2F;code&gt; if you have write errors.&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;cache&#x2F;volt&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;public&#x2F;generated&#x2F;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;genrated-modules&quot;&gt;Genrated Modules&lt;&#x2F;h4&gt;
-&lt;p&gt;&lt;strong&gt;Included in all generated modules is the following setup:&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;code&gt;ID&lt;&#x2F;code&gt; field by default&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;order&lt;&#x2F;code&gt; field by default&lt;&#x2F;li&gt;
-&lt;li&gt;functionality for drag and drop table order (add &lt;code&gt;ui-sortable-container&lt;&#x2F;code&gt; to &lt;code&gt;tbody&lt;&#x2F;code&gt; in admin index view)&lt;&#x2F;li&gt;
-&lt;li&gt;basic function for files included but commented out&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;code&gt;_form_data&lt;&#x2F;code&gt; function for passing data to form views&lt;&#x2F;li&gt;
-&lt;li&gt;settings table included, but commented out&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;The generated module gets put in the &lt;code&gt;public&#x2F;generated&#x2F;&lt;&#x2F;code&gt; folder. As well as the Zip file.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;p&gt;Screenshot of the current version of the app&lt;&#x2F;p&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;pmg2.jpeg&quot; title=&quot;PyroCMS Module Generator Screenshot&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;PyroCMS Module Generator Screenshot&quot; src=&quot;&#x2F;images&#x2F;pmg2.jpeg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Kijiji Vector Logo</title>
-        <published>2014-11-14T00:00:00+00:00</published>
-        <updated>2014-11-14T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/kijiji-vector-logo/"/>
-        <id>https://ohdoylerules.com/web/kijiji-vector-logo/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/kijiji-vector-logo/">&lt;p&gt;This logo was not only impossible to find, because searching for &amp;quot;kijiji vector logo&amp;quot; returns nothing but people wanting to sell vector logos &lt;strong&gt;on&lt;&#x2F;strong&gt; Kijiji, but it was difficult to trace as well.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;kijiji.svg&quot; title=&quot;kijiji svg vector logo&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;kijiji svg vector logo&quot; src=&quot;&#x2F;images&#x2F;kijiji.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;The reason I had to find this logo, was that I made a new Chrome app called, &amp;quot;&lt;a href=&quot;http:&#x2F;&#x2F;goo.gl&#x2F;8VXrlm&quot; title=&quot;Kijiji Enhanced on the Chrome Web Store&quot;&gt;Kijiji Enhanced&lt;&#x2F;a&gt;&amp;quot;. It allows you to browse with larger thumbnails, rotate images in the image viewer, and also view inline maps at the bottom of posts.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Migrate AllPasswords To 1Password</title>
-        <published>2014-10-11T00:00:00+00:00</published>
-        <updated>2014-10-11T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/"/>
-        <id>https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/">&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;itunes.apple.com&#x2F;ca&#x2F;app&#x2F;allpasswords-handy-personal&#x2F;id588258846?mt=12&quot;&gt;AllPasswords&lt;&#x2F;a&gt; is an awesome, free, app for &lt;a href=&quot;https:&#x2F;&#x2F;itunes.apple.com&#x2F;ca&#x2F;app&#x2F;allpasswords&#x2F;id578246311?mt=8&quot;&gt;iPhone&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;itunes.apple.com&#x2F;ca&#x2F;app&#x2F;allpasswords-handy-personal&#x2F;id588258846?mt=12&quot;&gt;OSX&lt;&#x2F;a&gt;. It has a nice, simple interface, there is an awesome password generator, and it has iCloud sync.&lt;&#x2F;p&gt;
-&lt;p&gt;The problem is, I recently bought an iPhone 6 and updated to iOS 8. It seems that the iCloud sync has busted for AllPasswords, at least on my device. With the advent of the &lt;a href=&quot;http:&#x2F;&#x2F;bgr.com&#x2F;2014&#x2F;09&#x2F;17&#x2F;1password-for-ios-free-download&#x2F;&quot;&gt;1Password app getting a free version&lt;&#x2F;a&gt; I decided it might be time to switch.&lt;&#x2F;p&gt;
-&lt;p&gt;I have about 130 logins in AllPasswords, so I wasn&#x27;t about to manually enter in each account. Instead, I had to format the exported CSV from AllPasswords to be able to import into 1Password. Here is how I did it:&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;allpasswords-export-format&quot;&gt;AllPasswords Export Format&lt;&#x2F;h3&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Title, Username, Password, URL, Notes&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;The above line is the export format for AllPasswords.&lt;&#x2F;p&gt;
-&lt;p&gt;Now this isn&#x27;t going to work when you try to import it into 1Password. You will need to do some &lt;em&gt;massaging&lt;&#x2F;em&gt; of the CSV to get it to work properly.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is an export example:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;ODR PW,super_cool_guy,ilovepuppies5000,http:&#x2F;&#x2F;ohdoylerules.com,&amp;quot;This is a fake entry&amp;quot;&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Here is one that is less ideal, or maybe had some info missing:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;ODR PW,super_cool_guy,ilovepuppies5000,,&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;h3 id=&quot;1password-import-expectations&quot;&gt;1Password Import Expectations&lt;&#x2F;h3&gt;
-&lt;blockquote&gt;
-&lt;p&gt;&amp;quot;Title&amp;quot;,&amp;quot;Location (URL)&amp;quot;,&amp;quot;Username&amp;quot;,&amp;quot;Password&amp;quot;,&amp;quot;Notes&amp;quot;&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Now we need to put our CSV in this format. We need to &lt;em&gt;wrap the sections in quotes&lt;&#x2F;em&gt;, and we need to make sure that the &lt;em&gt;empty fields are just empty quotes&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is how we would arrange those 2 examples from before.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;&amp;quot;ODR PW&amp;quot;,&amp;quot;http:&#x2F;&#x2F;ohdoylerules.com&amp;quot;,&amp;quot;super_cool_guy&amp;quot;,&amp;quot;ilovepuppies5000&amp;quot;,&amp;quot;This is a fake entry&amp;quot;&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Here is the ugly one, and how to fix it:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;&amp;quot;ODR PW&amp;quot;,&amp;quot;&amp;quot;,&amp;quot;super_cool_guy&amp;quot;,&amp;quot;ilovepuppies5000&amp;quot;,&amp;quot;&amp;quot;&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;h3 id=&quot;finding-issues&quot;&gt;Finding Issues&lt;&#x2F;h3&gt;
-&lt;p&gt;When you are trying to import, you will notice that 1Passwords gives no feedback on what is wrong with the CSV, it will just deny the import.&lt;&#x2F;p&gt;
-&lt;p&gt;The trick is to go through the file and make sure there are &lt;em&gt;5 sets of quotes&lt;&#x2F;em&gt;. That is what helped me.&lt;&#x2F;p&gt;
-&lt;p&gt;So far I have been very happy with 1Password. It seems like a really solid app. I opted for Dropbox as the sync storage, and I downloaded the Chrome extension that will prompt me for pasting or saving of logins.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Always Connect To Starbucks WiFi</title>
-        <published>2014-09-20T00:00:00+00:00</published>
-        <updated>2014-09-20T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/"/>
-        <id>https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/">&lt;p&gt;Lately, it has been quite difficult for me to connect to Starbucks WiFi. About a year ago, the network would connect pretty quickly, but now it seems like the network is powered by voodoo magic and the will of Satan.&lt;&#x2F;p&gt;
-&lt;p&gt;Well, I have discovered the &lt;em&gt;ultimate way&lt;&#x2F;em&gt; to connect to the network &lt;strong&gt;every time&lt;&#x2F;strong&gt;. Now, this is still complete bullshit, considering the year is &lt;strong&gt;2014&lt;&#x2F;strong&gt; and we have a rover on Mars, but we still can&#x27;t connect to a wireless network. Don&#x27;t even get me started on wireless printers.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the process I use to connect quickly:&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;1-connect-to-the-starbucks-network-with-your-phone&quot;&gt;1. Connect to the Starbucks network with your phone&lt;&#x2F;h3&gt;
-&lt;p&gt;Yes. Use your cell phone to connect to the Starbucks wireless network. I have never had a problem connecting any phone to the Starbucks wifi. It seems like phones have some sort of special powers.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;2-turn-on-tethering-and-connect-to-your-computer-to-your-phone&quot;&gt;2. Turn on tethering and connect to your computer to your phone&lt;&#x2F;h3&gt;
-&lt;p&gt;Once you connect &lt;em&gt;your phone&lt;&#x2F;em&gt; to the Starbucks network, turn on &lt;strong&gt;tethering&lt;&#x2F;strong&gt; or &lt;strong&gt;wifi hotspot&lt;&#x2F;strong&gt;. Then, on your computer, connect to your phones network.&lt;&#x2F;p&gt;
-&lt;p&gt;Here are instructions for turning on wireless hotspot on &lt;a href=&quot;http:&#x2F;&#x2F;www.wikihow.com&#x2F;Activate-Internet-Tethering-on-the-iPhone&quot;&gt;iOS&lt;&#x2F;a&gt; and &lt;a href=&quot;http:&#x2F;&#x2F;www.wikihow.com&#x2F;Tether-With-Android&quot;&gt;android&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;3-load-the-starbucks-connection-page&quot;&gt;3. Load the Starbucks connection page&lt;&#x2F;h3&gt;
-&lt;p&gt;Now you will go to the &lt;a href=&quot;http:&#x2F;&#x2F;starbucks.allstreamwifi.ca&#x2F;00246C3ECB90&#x2F;Welcome&quot;&gt;Starbucks connection page&lt;&#x2F;a&gt; and &lt;strong&gt;wait until it is finished loading&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;If it doesn&#x27;t load all the way, that is fine. Just hit the stop button when you think it has reached a point of not going any further.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;do-not-press-the-green-submit-button&quot;&gt;DO NOT PRESS THE GREEN SUBMIT BUTTON!&lt;&#x2F;h4&gt;
-&lt;p&gt;Control yourself. We will do this later.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;4-switch-your-computer-to-the-starbucks-network&quot;&gt;4. Switch your computer to the Starbucks network&lt;&#x2F;h3&gt;
-&lt;p&gt;While that connection page &lt;strong&gt;is still open&lt;&#x2F;strong&gt;, switch your computers wifi from the &lt;em&gt;phones hotspot connection&lt;&#x2F;em&gt; to the &lt;em&gt;Starbucks network&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;5-click-the-big-green-button-to-connect&quot;&gt;5. Click the big green button to connect&lt;&#x2F;h3&gt;
-&lt;p&gt;Now that you have the &lt;em&gt;connection page loaded&lt;&#x2F;em&gt; and your &lt;em&gt;computer connected to the Starbucks wifi&lt;&#x2F;em&gt;, you can press the big green submit button. This will complete the authentication and it should redirect you to the Starbucks homepage.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;why-does-this-work&quot;&gt;Why does this work?&lt;&#x2F;h3&gt;
-&lt;p&gt;I am not really sure. I &lt;em&gt;think&lt;&#x2F;em&gt; the reason might be that an unauthenticated connection to the network (a connection that has not made it past the connection page) has limited bandwidth.&lt;&#x2F;p&gt;
-&lt;p&gt;This means that all pages are trying to load with a throttled speed. Typically, the browser will only try to connect for so long before it gives up and assumes the site is unreachable (a timeout occurs).&lt;&#x2F;p&gt;
-&lt;p&gt;With my process, you are using a connection that is already authenticated, so you have the full speed you need in order to load the necessary page without it timing out on you.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;side-note&quot;&gt;Side Note&lt;&#x2F;h3&gt;
-&lt;p&gt;You can probably use your phones &lt;em&gt;data network&lt;&#x2F;em&gt; to load the initial Starbucks connection page. Then switch from the phone to Starbucks and press the green button.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;did-this-work&quot;&gt;Did this work?&lt;&#x2F;h3&gt;
-&lt;p&gt;This always works for me. It is a hell of a lot better than waiting a solid 30 minutes before the network finally connects. If this works for you, please &lt;strong&gt;leave a comment&lt;&#x2F;strong&gt; and let me know. If it doesn&#x27;t work, let me know &lt;strong&gt;what you did&lt;&#x2F;strong&gt; in order to get it to work.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Lico</title>
-        <published>2014-08-04T00:00:00+00:00</published>
-        <updated>2014-08-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/lico-luvit-cms/"/>
-        <id>https://ohdoylerules.com/personal-project/lico-luvit-cms/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/lico-luvit-cms/">&lt;p&gt;I have re-created Pico (&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;picocms&#x2F;Pico&quot;&gt;github&lt;&#x2F;a&gt; or &lt;a href=&quot;http:&#x2F;&#x2F;picocms.org&#x2F;&quot;&gt;homepage&lt;&#x2F;a&gt;) using the awesome &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;luvit&#x2F;luvit&quot;&gt;Luvit&lt;&#x2F;a&gt; framework. Luvit is a &lt;a href=&quot;http:&#x2F;&#x2F;luajit.org&#x2F;&quot;&gt;LuaJIT&lt;&#x2F;a&gt; wrapper for &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;joyent&#x2F;libuv&quot;&gt;libuv&lt;&#x2F;a&gt;, of &lt;a href=&quot;http:&#x2F;&#x2F;nodejs.org&#x2F;&quot;&gt;node.js&lt;&#x2F;a&gt; fame. It is called &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;Lico&quot; title=&quot;Lico On Github&quot;&gt;Lico&lt;&#x2F;a&gt;!&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;what-is-lico&quot;&gt;What is Lico?&lt;&#x2F;h3&gt;
-&lt;p&gt;Pico says, &lt;em&gt;&amp;quot;Pico is a stupidly simple, blazing fast, flat file CMS&amp;quot;&lt;&#x2F;em&gt;. Lico aims for the same thing. There is a very close parity with Pico even though this is very early.&lt;&#x2F;p&gt;
-&lt;p&gt;I used the static server from the Luvit examples as a base and went from there.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;how-to-create-content&quot;&gt;How to create content?&lt;&#x2F;h3&gt;
-&lt;p&gt;You can understand the basics by looking at the included content directory and just running the &lt;code&gt;server.lua&lt;&#x2F;code&gt; file and hitting the index page.&lt;&#x2F;p&gt;
-&lt;p&gt;If you need more information you can see the &lt;a href=&quot;http:&#x2F;&#x2F;picocms.org&#x2F;docs.html&quot;&gt;Pico docs&lt;&#x2F;a&gt; and understand what is happening and how it works.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;what-features-are-implemented&quot;&gt;What features are implemented?&lt;&#x2F;h3&gt;
-&lt;ul&gt;
-&lt;li&gt;Markdown Parsing using &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;mneudert&#x2F;luvit-markdown&quot;&gt;luvit-markdown&lt;&#x2F;a&gt; -- &lt;em&gt;looking to switch to &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;torch&#x2F;sundown-ffi&#x2F;tree&#x2F;hoedown&quot;&gt;Hoedown&lt;&#x2F;a&gt;&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;HTML Templating (using my own modified version of &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;sltluv&quot;&gt;SLT2&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;Flexible Meta schema (Uses HTML comments instead of PHP style)&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h3 id=&quot;whats-missing&quot;&gt;Whats missing?&lt;&#x2F;h3&gt;
-&lt;p&gt;Plugins. Although with the native of the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;luvit&#x2F;luvit&#x2F;blob&#x2F;master&#x2F;examples&#x2F;event-emitters.lua&quot;&gt;Event Emitter&lt;&#x2F;a&gt; inside Luvit, this should be rather easy to re-create.&lt;&#x2F;p&gt;
-&lt;p&gt;You can use SLTLuv to add new functions and features to your templates. You can see the &lt;code&gt;modules&#x2F;slt-extensions.lua&lt;&#x2F;code&gt; on how to add extensions to the templates. I also added in some examples in the &lt;code&gt;default&#x2F;themes&#x2F;index.html&lt;&#x2F;code&gt;, if you want to see how they work.&lt;&#x2F;p&gt;
-&lt;p&gt;Check out the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;henix&#x2F;slt2#example&quot;&gt;slt2 examples&lt;&#x2F;a&gt; to see how to write proper templates.&lt;&#x2F;p&gt;
-&lt;p&gt;The markdown engine is rather simple. There is no fenced code blocks, and sometimes it will wrap uncommon HTML tags with &lt;code&gt;&amp;lt;p&amp;gt;&lt;&#x2F;code&gt; tags (I tried using a &lt;code&gt;figure&lt;&#x2F;code&gt; element and it was wrapped in p tags). I want switch to &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;torch&#x2F;sundown-ffi&#x2F;tree&#x2F;hoedown&quot;&gt;Hoedown&lt;&#x2F;a&gt; soon.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;performance&quot;&gt;Performance&lt;&#x2F;h3&gt;
-&lt;p&gt;Well, this is very interesting. Running the default setup for Pico and Lico, reveals Lico is twice as fast in at the browser level.&lt;&#x2F;p&gt;
-&lt;p&gt;Using the Chrome Devtools Network Panel, I measured the index page of each system. I consistently got around 120ms for each request. For Pico, the results were varied quite a bit. They ranged from 200ms to as high as 500ms, but never going under 200ms.&lt;&#x2F;p&gt;
-&lt;p&gt;There are a lot of factors here, but the default Pico has 3 pages and my Lico testing suite (same one as this repo) had 6 pages.&lt;&#x2F;p&gt;
-&lt;p&gt;I did some other testing against my other project, &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;PhileCMS&#x2F;Phile#performance-with-20-pages&quot;&gt;PhileCMS&lt;&#x2F;a&gt;. You can see that Pico doesn&#x27;t handle large amounts of pages very well.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;there-are-issues&quot;&gt;There are issues!&lt;&#x2F;h3&gt;
-&lt;p&gt;Yeah I bet. I am not a Lua developer. I made this over a week-long period trying to learn Lua. If you notice some funky stuff or clean n00b issues, please create issues or pull requests.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;repo&quot;&gt;Repo?&lt;&#x2F;h3&gt;
-&lt;p&gt;Here is the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;Lico&quot;&gt;link to the Github repository&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Typeform Vector Logo</title>
-        <published>2014-07-31T00:00:00+00:00</published>
-        <updated>2014-07-31T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/typeform-vector-logo/"/>
-        <id>https://ohdoylerules.com/web/typeform-vector-logo/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/typeform-vector-logo/">&lt;p&gt;Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events, and other general uses.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;typeform.svg&quot; title=&quot;typeform svg vector&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;typeform svg vector&quot; src=&quot;&#x2F;images&#x2F;typeform.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;If you are a photoshopper, you can also &lt;a href=&quot;&#x2F;images&#x2F;typeform.eps&quot; title=&quot;typeform eps vector&quot; target=&quot;_blank&quot;&gt;grab the EPS file&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;update&quot;&gt;Update&lt;&#x2F;h3&gt;
-&lt;p&gt;Here is the &lt;a href=&quot;http:&#x2F;&#x2F;bit.ly&#x2F;WPjXfZ&quot;&gt;official repository of Typeform branding graphics&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Using Node.js in an AppleScript</title>
-        <published>2014-07-12T00:00:00+00:00</published>
-        <updated>2014-07-12T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/using-node-in-applescript/"/>
-        <id>https://ohdoylerules.com/snippets/using-node-in-applescript/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/using-node-in-applescript/">&lt;p&gt;A few days ago, I wrote an article about &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;snippets&#x2F;copy-file-path-clipboard-osx&quot; title=&quot;Copy filepath to clipboard in OSX&quot;&gt;how to create a service in Automator to copy the selected file&#x27;s path to the clipboard while in the Finder.app&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I was playing around some more and thought it would be cool to be able to right click and convert a markdown file to HTML. This can be useful for lazy people who don&#x27;t want to open and app or terminal just to convert.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Here is the trick, you need absolute paths to node and the target module (or bin entry js file) file you are trying to run&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Here is the code:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;applescript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-applescript &quot;&gt;&lt;code class=&quot;language-applescript&quot; data-lang=&quot;applescript&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- setup some valid extensions for markdown files
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;property &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;validExtensions &lt;&#x2F;span&gt;&lt;span&gt;: {&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;md&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;markdown&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;mdown&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;tell &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;application &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Finder&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;theFile &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;to &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;item &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1 &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;of &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;get&lt;&#x2F;span&gt;&lt;span&gt; selection)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- check if the extension is correct
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;the &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt; extension &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span&gt; theFile is in &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;the&lt;&#x2F;span&gt;&lt;span&gt; validExtensions) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;then
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;selectedItem &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;to the&lt;&#x2F;span&gt;&lt;span&gt; selection as &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;text
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;thePath &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;to &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;POSIX path &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span&gt; selectedItem
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- created a quoted path in case there are special characters
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;nicePath &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;to &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;quoted form &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span&gt; thePath
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- here is the trick, you need absolute paths to node and the target bin
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- just tack on the extension for html
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;do shell script &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&#x2F;usr&#x2F;local&#x2F;bin&#x2F;node &#x2F;usr&#x2F;local&#x2F;share&#x2F;npm&#x2F;bin&#x2F;marked --gfm &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &amp;amp; nicePath &amp;amp; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; &amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &amp;amp; nicePath &amp;amp; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.html&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- find out what the new file is called
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;outName &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;to &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;do shell script &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;basename &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &amp;amp; nicePath &amp;amp; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.html &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;of &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;result
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- since there is no progress, let me know when your done
-&lt;&#x2F;span&gt;&lt;span&gt;    display notification outName &amp;amp; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; created successfully&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;with&lt;&#x2F;span&gt;&lt;span&gt; title &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Markdown Conversion Finished&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- allow time for the notification to show
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;delay &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;else
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- wrong file so show this
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;display dialog &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;the file is not a valid Markdown file&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;with&lt;&#x2F;span&gt;&lt;span&gt; title &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Conversion Error&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;-- allow time for the notification to show
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;delay &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end if
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end tell
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now this can be used in an &lt;em&gt;Automator Service&lt;&#x2F;em&gt;, which you can find out how to make in the &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;snippets&#x2F;copy-file-path-clipboard-osx&quot; title=&quot;Copy filepath to clipboard in OSX&quot;&gt;previous article&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;If you modify this for any other cool node tools, please let me know!&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;PS&lt;&#x2F;strong&gt;: Keep in mind that this doesn&#x27;t iterate through multiple files. Only single files.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Copy filepath to clipboard in OSX</title>
-        <published>2014-07-10T00:00:00+00:00</published>
-        <updated>2014-07-10T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/"/>
-        <id>https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/">&lt;p&gt;At &lt;a href=&quot;http:&#x2F;&#x2F;warpaintmedia.ca&quot; title=&quot;WARPAINT Media&quot;&gt;WARPAINT&lt;&#x2F;a&gt;, we use &lt;a href=&quot;https:&#x2F;&#x2F;www.dropbox.com&quot; title=&quot;Dropbox Homepage&quot;&gt;Dropbox&lt;&#x2F;a&gt; for collaborating on our files. This is awesome, but a lot of the times you get some pretty nasty file paths. Especially when you are trying to guide someone to a place where you saved a file.&lt;&#x2F;p&gt;
-&lt;p&gt;I wanted to solve this problem by creating an AppleScript service that would allow everyone to &lt;strong&gt;Copy the selected file&#x27;s path to the clipboard&lt;&#x2F;strong&gt;. Here is how I did it.&lt;&#x2F;p&gt;
-&lt;p&gt;+++&lt;&#x2F;p&gt;
-&lt;p&gt;We are going to be using &lt;a href=&quot;http:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Automator_(software)&quot;&gt;Automator&lt;&#x2F;a&gt; to create a new service. Here is the description of Automator in case you don&#x27;t know what it is:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Automator is an application developed by Apple Inc. for OS X that implements point-and-click (or drag and drop) creation of workflows for automating repetitive tasks into batches for quicker alteration, thus saving time and effort over human intervention to manually change each file separately.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;So the first thing is to open Automator and create a new service. Like so:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;clipboard-1.png&quot; target=&quot;_blank&quot; &gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;clipboard-1.png&quot; width=&quot;720&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Then you need to select &lt;code&gt;files or folders&lt;&#x2F;code&gt; for &amp;quot;Service receives selected&amp;quot; and choose &lt;code&gt;Finder.app&lt;&#x2F;code&gt; for the second option. The do a search for &lt;code&gt;applescript&lt;&#x2F;code&gt; and drag the &lt;code&gt;Run AppleScript&lt;&#x2F;code&gt; choice into the window on the right.&lt;&#x2F;p&gt;
-&lt;p&gt;You will need to paste the following code into the AppleScript window:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;applescript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-applescript &quot;&gt;&lt;code class=&quot;language-applescript&quot; data-lang=&quot;applescript&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;tell &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;application &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Finder&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;set &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;sel &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;to the&lt;&#x2F;span&gt;&lt;span&gt; selection as &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;text
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;set the&lt;&#x2F;span&gt;&lt;span&gt; clipboard to &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;POSIX path &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span&gt; sel
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;end tell
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;When that is all done, it should look something like this.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;clipboard-2.png&quot; target=&quot;_blank&quot; &gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;clipboard-2.png&quot; width=&quot;720&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Go to &lt;code&gt;File &amp;gt; Save&lt;&#x2F;code&gt; or press &lt;code&gt;⌘S&lt;&#x2F;code&gt;. &lt;strong&gt;Do not Save-As&lt;&#x2F;strong&gt;. Enter in &lt;code&gt;Copy Path To Clipboard&lt;&#x2F;code&gt; as the name. &lt;em&gt;It shouldn&#x27;t ask for a location&lt;&#x2F;em&gt;, it will just show an input field. This is perfectly fine.&lt;&#x2F;p&gt;
-&lt;p&gt;Now open a new finder window and go to &lt;code&gt;Finder &amp;gt; Services &amp;gt; Services Preferences...&lt;&#x2F;code&gt; or &lt;code&gt;System Preferences &amp;gt; Keyboard &amp;gt; Shortcuts&lt;&#x2F;code&gt;. Select services on the left menu if it isn&#x27;t already and scroll down to find &lt;code&gt;Copy Path To Clipboard&lt;&#x2F;code&gt;. This will open a window like this:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;clipboard-3.png&quot; target=&quot;_blank&quot; &gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;clipboard-3.png&quot; width=&quot;720&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Click on that item and make sure it is checked off, it should be by default. Then add a shortcut by clicking on the right side where it says &amp;quot;add shortcut&amp;quot;. I made mine &lt;code&gt;⌃⌘\&lt;&#x2F;code&gt;. But if you have &lt;a href=&quot;http:&#x2F;&#x2F;www.alfredapp.com&#x2F;&quot;&gt;Alfred.app&lt;&#x2F;a&gt; that might conflict with it&#x27;s copy feature. So you choose.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;clipboard-4.png&quot; target=&quot;_blank&quot; &gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;clipboard-4.png&quot; width=&quot;720&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;You can use these steps to run any AppleScript on a file you choose. Pretty slick!&lt;&#x2F;p&gt;
-&lt;p&gt;Now when you have a file of folder selected in the Finder, you can right-click, go to Services, and select &lt;code&gt;Copy Path To Clipboard&lt;&#x2F;code&gt;!&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;clipboard-5.png&quot; target=&quot;_blank&quot; &gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;clipboard-5.png&quot; width=&quot;646&quot; &#x2F;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>The Simple Spam Stopper</title>
-        <published>2014-05-27T00:00:00+00:00</published>
-        <updated>2014-05-27T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/simple-spam-stopper/"/>
-        <id>https://ohdoylerules.com/web/simple-spam-stopper/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/simple-spam-stopper/">&lt;p&gt;For the last year at &lt;a href=&quot;http:&#x2F;&#x2F;warpaintmedia.ca&quot;&gt;WARPAINT Media&lt;&#x2F;a&gt;, we have been getting assaulted with spam. Everything from &amp;quot;Chinese Jerseys&amp;quot; and &amp;quot;Super SEO Ultra Elite Package Extreme&amp;quot; offers.&lt;&#x2F;p&gt;
-&lt;p&gt;We are using &lt;a href=&quot;http:&#x2F;&#x2F;pyrocms.com&quot;&gt;PyroCMS&lt;&#x2F;a&gt; for the website. The default contact plugin is pretty awesome. It has some really great features and couldn&#x27;t be easier to use. There is a little &lt;a href=&quot;http:&#x2F;&#x2F;www.sitepoint.com&#x2F;forums&#x2F;showthread.php?946120-Spam-Honey-Pot-trap&amp;amp;s=9cfd3419319d5c9bd1f5d597cdfa6113&amp;amp;p=5278832&amp;amp;viewfull=1#post5278832&quot;&gt;honeypot&lt;&#x2F;a&gt; for spam bots, but it seems to not be doing a great job, at least for us.&lt;&#x2F;p&gt;
-&lt;p&gt;The great thing about the Pyro contact form is that it lets the developer define some validation without much work. In the past I have added questions like &lt;em&gt;&amp;quot;what is one plus one? (use a number)&amp;quot;&lt;&#x2F;em&gt;, other times I have tried &lt;em&gt;&amp;quot;are you a human?&amp;quot;&lt;&#x2F;em&gt; with a dropdown. Both seemed fine. But I wanted something a little more transparent and more conventional than strange questions about math or your species.&lt;&#x2F;p&gt;
-&lt;p&gt;The solution that I came up with was, 2 email fields. That&#x27;s it. I have one that is called &amp;quot;email&amp;quot; and another field that is called &amp;quot;check&amp;quot;. When the user submits the form, the email and check field and validated. The rules for them are that they need to be identical, &lt;em&gt;but&lt;&#x2F;em&gt; they also need to be valid emails.&lt;&#x2F;p&gt;
-&lt;p&gt;So there is a sort of a double validation going on. They need to be putting in a real email and they need to know that the email needs to match the check field. The label for this second check field is just &amp;quot;Enter Your Email Again&amp;quot;. Since it comes after the first field with an Email label, people tend to figure it out.&lt;&#x2F;p&gt;
-&lt;p&gt;How about the results? Well we used to get about 10-20 spam per day. Now we get about 1-3 a week and none of them are from our websites contact form.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;tl-dr&quot;&gt;Tl;Dr&lt;&#x2F;h4&gt;
-&lt;p&gt;I added a second email input and practically eliminated our spam.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Flexible SVG Placeholder Images</title>
-        <published>2014-05-24T00:00:00+00:00</published>
-        <updated>2014-05-24T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/flexible-svg-placeholders/"/>
-        <id>https://ohdoylerules.com/web/flexible-svg-placeholders/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/flexible-svg-placeholders/">&lt;p&gt;Do you use &lt;a href=&quot;http:&#x2F;&#x2F;placehold.it&quot; title=&quot;Placehold.it Homepage&quot;&gt;placehold.it&lt;&#x2F;a&gt;? It is a great service. The only thing is when you are offline, or you are testing a page that needs a lot of placeholders, it may not be the greatest solution.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;Enter the SVG placeholder.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Here are the properties you can set:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;width and height&lt;&#x2F;li&gt;
-&lt;li&gt;background-fill&lt;&#x2F;li&gt;
-&lt;li&gt;font-color&lt;&#x2F;li&gt;
-&lt;li&gt;font-family&lt;&#x2F;li&gt;
-&lt;li&gt;font-size&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Here is the actual SVG file. As you can see it is a PHP file, but you are serving it as an SVG (see the &lt;code&gt;Content-Type&lt;&#x2F;code&gt; part?). Here we grab the URL arguments and assign them to the SVG.&lt;&#x2F;p&gt;
-&lt;iframe class=&quot;iframes&quot; id=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;3aad1d22163c3c3e5cfd.js?file=placeholder-svg.php&quot; src=&quot;about:blank&quot; srcdoc=&quot;`&lt;script src=&#x27;https:&amp;#x2F;&amp;#x2F;gist.github.com&amp;#x2F;3aad1d22163c3c3e5cfd.js?file=placeholder-svg.php&#x27;&gt;&lt;&#x2F;script&gt;`&quot;&gt;&lt;&#x2F;iframe&gt;
-&lt;p&gt;If you saved the file as &lt;code&gt;placeholder-svg.php&lt;&#x2F;code&gt; then it would be used like so:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;img &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;src&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;placeholder-svg.php?wh=400x400&amp;amp;fill=bada55&amp;amp;color=000000&amp;amp;font=Georgia&amp;amp;size=20&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This would be the output:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;placeholder.png&quot; alt=&quot;Placeholder Example&quot;&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Purge A File From A Github Repo</title>
-        <published>2014-05-18T00:00:00+00:00</published>
-        <updated>2014-05-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/purge-file-from-github/"/>
-        <id>https://ohdoylerules.com/snippets/purge-file-from-github/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/purge-file-from-github/">&lt;p&gt;Ever wanted to permanently remove a file from a repo and it&#x27;s history?&lt;&#x2F;p&gt;
-&lt;p&gt;Add this snippet to the end of your &lt;code&gt;.bashrc&lt;&#x2F;code&gt; (or &lt;code&gt;.zshrc&lt;&#x2F;code&gt; if you are a cool guy developer):&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# remove a file from the repo and from the history
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;git-purge&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;FN&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;git rm --cached --ignore-unmatch &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; filter-branch&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; --force --index-filter &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;FN --prune-empty --tag-name-filter&lt;&#x2F;span&gt;&lt;span&gt; cat -- --all
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This was taken from the &lt;a href=&quot;https:&#x2F;&#x2F;help.github.com&#x2F;articles&#x2F;remove-sensitive-data&quot; title=&quot;Github - Remove Sensitive Data&quot;&gt;Github article about removing files&lt;&#x2F;a&gt;. Here is what they said about the function:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Run git filter-branch, forcing (--force) Git to process—but not check out (--index-filter)—the entire history of every branch and tag (--tag-name-filter cat -- --all), removing the specified file (&#x27;git rm --cached --ignore-unmatch MYFILE&#x27;) and any empty commits generated as a result (--prune-empty). Note that you need to specify the path to the file you want to remove, not just its filename. Be careful! This will overwrite your existing tags.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;You should also add the file to your &lt;code&gt;.gitignore&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;MYFILE&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &amp;gt;&amp;gt; .gitignore
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; add .gitignore
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; commit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -m &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Add MYFILE to .gitignore&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Then to update the live repo, run &lt;code&gt;git push origin master --force&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;This process will remove the file from your repo, and from the history. This is in-case you committed a sensitive file. If you get in a real pickle, you can use the &lt;a href=&quot;http:&#x2F;&#x2F;rtyley.github.io&#x2F;bfg-repo-cleaner&#x2F;&quot; title=&quot;BFG Repo-Cleaner&quot;&gt;BFG Repo-Cleaner&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Tips For Using SVGs</title>
-        <published>2014-05-17T00:00:00+00:00</published>
-        <updated>2014-05-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/tips-for-using-svgs/"/>
-        <id>https://ohdoylerules.com/web/tips-for-using-svgs/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/tips-for-using-svgs/">&lt;p&gt;I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;use-viewbox&quot;&gt;Use Viewbox&lt;&#x2F;h3&gt;
-&lt;p&gt;This one is a little gem. The &lt;code&gt;viewBox&lt;&#x2F;code&gt; property allows you to set the dimensions of the image but it will also allow you can have responsive SVGs.&lt;&#x2F;p&gt;
-&lt;p&gt;They maintain their ratios, but they will scale to 100% width and height. If you have an SVG that is 64 by 64, the syntax for the viewBox property would be &lt;code&gt;viewBox=&amp;quot;0 0 64 64&amp;quot;&lt;&#x2F;code&gt;. Pretty simple. Just make sure you remove the width and height on the base SVG tag when using viewBox.&lt;&#x2F;p&gt;
-&lt;p&gt;If you open an SVG in a new window, like opening a new file in the browser, you will notice that when zooming in, if &lt;code&gt;viewBox&lt;&#x2F;code&gt; property set properly, the image stays the same size. It won&#x27;t zoom.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;use-base64-images&quot;&gt;Use base64 Images&lt;&#x2F;h3&gt;
-&lt;p&gt;So there are a couple ways you can embed an image in an SVG. I have found that the best way is to use a &lt;a href=&quot;http:&#x2F;&#x2F;b1nary.ch&#x2F;base64&#x2F;&quot; title=&quot;embed base64 - easy, client side base64 encoder&quot;&gt;base 64 encoded string&lt;&#x2F;a&gt; as the image href.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;xml&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-xml &quot;&gt;&lt;code class=&quot;language-xml&quot; data-lang=&quot;xml&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;svg &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;viewBox&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;0 0 64 64&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;xmlns&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;www.w3.org&#x2F;2000&#x2F;svg&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;xmlns:svg&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;www.w3.org&#x2F;2000&#x2F;svg&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;xmlns:xlink&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xlink&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;defs&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pattern &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;background-image&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;patternUnits&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;userSpaceOnUse&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;width&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;64&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;height&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;64&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&amp;lt;!-- the width and height of the image should match the pattern, in most cases --&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;image &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;xlink:href&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;data:image&#x2F;gif;base64,R0lGODdhQABAAOMAAMzMzJaWlr6+vqOjo8XFxZycnLGxsbe3t6qqqgAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAQABAAAAEpBDISau9OOvNu&#x2F;9gKI5kaZ5oqq5s675wLM90bd94ru987&#x2F;&#x2F;AoHBILBqPyKRyyRwSQk+bYDA5IDbT6rVGKAgmhSim+5WEbYbBQWItTBDwLSC9BrRthcHgGnaD&#x2F;WZ6fF1cAQBdBAEFAXUAcBOJh2GKjDUBBAdUkpAFZxKXmRKENQedZaMAAwZpVaaigE2xsrO0tba3uLm6u7y9vr&#x2F;AwcLDxMXGxxURADs=&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;x&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;y&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;width&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;64&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;height&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;64&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;svg-background&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pattern&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;defs&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;g&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ellipse &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;ry&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;32&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;rx&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;32&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;svg_1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;cy&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;32&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;cx&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;32&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;fill&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;url(#background-image)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;g&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;svg&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This is what the &lt;a href=&quot;&#x2F;images&#x2F;placeholder.svg&quot;&gt;outputted image&lt;&#x2F;a&gt; would look like.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;I&#x27;m using a very small gif so that the base64 string isn&#x27;t giant&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;You can also see &lt;code&gt;viewBox&lt;&#x2F;code&gt; in action (try zooming). The reason I use this technique, is because it cuts down on requests but also cuts down on file size (for the most part). When you need to have multiple images inside the SVG, this works very well. Instead of having multiple requests (SVG, image1.jpg, image2.jpg, etc.) you get one request.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;note&quot;&gt;Note&lt;&#x2F;h4&gt;
-&lt;hr &#x2F;&gt;
-&lt;p&gt;For some reason, Safari does not like the following scenario: &lt;strong&gt;an SVG, in an img tag, that has a base64 image in it&lt;&#x2F;strong&gt;. I solved this problem, and this is how I did it.&lt;&#x2F;p&gt;
-&lt;p&gt;I changed this:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;img &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;src&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;img&#x2F;fun.svg&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;height&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;989&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;width&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;989&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;To this:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;object &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;height&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;989px&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;width&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;989px&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;img&#x2F;fun.svg&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;image&#x2F;svg+xml&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;object&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Then it worked. In an &lt;code&gt;img&lt;&#x2F;code&gt; tag, the image worked fine in all browsers, yes even IE (checked 11 and 10), but in Safari (7.0.3) it would not render. If I opened the SVG directly in a new tab, it worked fine. So there was some sort of reason that it would not render inside of an &lt;code&gt;img&lt;&#x2F;code&gt; tag. Annoying.&lt;&#x2F;p&gt;
-&lt;hr &#x2F;&gt;
-&lt;h3 id=&quot;be-careful-with-masks&quot;&gt;Be Careful With Masks&lt;&#x2F;h3&gt;
-&lt;p&gt;Masking in SVG seems to be a magical mistress. I find sometimes it works wonderfully, and sometimes it is just wrong. Firefox is a pain with this one.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;simple-is-better&quot;&gt;Simple Is Better&lt;&#x2F;h3&gt;
-&lt;p&gt;Always check your files to make sure there aren&#x27;t any hidden layers. Firefox, again, will punish you for this. I find a lot of SVG documents will have some strange layers that are just empty paths or unfilled objects. This usually is the product of using live trace.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;text-to-outlines&quot;&gt;Text To Outlines&lt;&#x2F;h3&gt;
-&lt;p&gt;Always outline your text. Enough said. Without it, the person may see a font that you didn&#x27;t intend. I would only use a system font if I had to make sure it stayed as text. A case for this might be dynamically creating SVGs on the fly or something.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;use-css-fo&quot;&gt;Use CSS Fo&lt;&#x2F;h3&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Koding Interview</title>
-        <published>2014-04-29T00:00:00+00:00</published>
-        <updated>2014-04-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/koding-interview/"/>
-        <id>https://ohdoylerules.com/personal-project/koding-interview/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/koding-interview/">&lt;p&gt;A few months back I was interviewed by the developer socila network Koding.&lt;&#x2F;p&gt;
-&lt;p&gt;The initiative was for them to showcase some of the people using their network to build their skill and circle of friends. It is a really cool social network that has been gaining a lot of traction lately.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is &lt;a href=&quot;http:&#x2F;&#x2F;stories.koding.com&#x2F;story&#x2F;james-doyle&#x2F;&quot;&gt;the link to the interview&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Kaenon Vector Logo</title>
-        <published>2014-04-10T00:00:00+00:00</published>
-        <updated>2014-04-10T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/kaenon-logo/"/>
-        <id>https://ohdoylerules.com/personal-project/kaenon-logo/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/kaenon-logo/">&lt;p&gt;Here is another logo. This one is for the Kaenon sunglasses brand. This was very hard to find. It doesn&#x27;t include the little gradient on the original logo. Maybe I will add that in the future.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;kaenon.svg&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;kaenon svg vector&quot; src=&quot;&#x2F;images&#x2F;kaenon.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;h5 id=&quot;hint&quot;&gt;Hint&lt;&#x2F;h5&gt;
-&lt;p&gt;If you are looking for these hard to find logos, sometimes you can find them in a lookbook or catalog PDF. The assets are usually high DPI because most of the time these documents are for printing.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Bash select example</title>
-        <published>2014-04-07T00:00:00+00:00</published>
-        <updated>2014-04-07T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/bash-select-example/"/>
-        <id>https://ohdoylerules.com/snippets/bash-select-example/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/bash-select-example/">&lt;p&gt;I recently bought 2 &lt;a href=&quot;http:&#x2F;&#x2F;raspberrypi.org&quot;&gt;raspberry pi computers&lt;&#x2F;a&gt;. One is for home, and one is for the office.&lt;&#x2F;p&gt;
-&lt;p&gt;Since we have dynamic IPs setup in the office, and I have the same at my house, I needed to be able to connect using the MAC address of the pi. I ended up writing a little script to get the IP based on the MAC Address, and then ssh into the computer. Pretty slick.&lt;&#x2F;p&gt;
-&lt;p&gt;To make my life easier I used the &lt;code&gt;select&lt;&#x2F;code&gt; command in bash. The &lt;a href=&quot;http:&#x2F;&#x2F;www.gnu.org&#x2F;software&#x2F;bash&#x2F;manual&#x2F;bashref.html#Conditional-Constructs&quot;&gt;documentation for select&lt;&#x2F;a&gt; leaves a lot to be desired. So I had to fiddle with it until I got it right. Here is a simple boilerplate for a bash script using select:&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;function&quot;&gt;Function&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;#!&#x2F;usr&#x2F;bin&#x2F;env bash
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;speak&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1 &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;break&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# we are done
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;What do you want me to say?&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;select&lt;&#x2F;span&gt;&lt;span&gt; ab in &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Hello&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Bonjour&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;do
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;case &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ab &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;in
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Hello&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;speak &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Hello&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;my friend&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;;;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Bonjour&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;speak &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Bonjour&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;mon ami&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;;;
-&lt;&#x2F;span&gt;&lt;span&gt;    *&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;invalid option&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# you picked anything but 1 or 2
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;esac
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;done
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Save that in a file called &lt;code&gt;say-hello.sh&lt;&#x2F;code&gt; and change the rights to allow execution by using &lt;code&gt;chmod +x say-hello.sh&lt;&#x2F;code&gt;. Then you can run it:&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;output&quot;&gt;Output:&lt;&#x2F;h4&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;$ .&#x2F;say-hello.sh
-&lt;&#x2F;span&gt;&lt;span&gt;  1) Hello
-&lt;&#x2F;span&gt;&lt;span&gt;  2) Bonjour
-&lt;&#x2F;span&gt;&lt;span&gt;  #? 1
-&lt;&#x2F;span&gt;&lt;span&gt;  Hello my friend
-&lt;&#x2F;span&gt;&lt;span&gt;$
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can see that in this example I push &lt;code&gt;1&lt;&#x2F;code&gt;. If I run it again and push &lt;code&gt;2&lt;&#x2F;code&gt;, you will see the French words show up.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Sublime Node Snippets</title>
-        <published>2014-03-25T00:00:00+00:00</published>
-        <updated>2014-03-25T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/sublime-node-snippets/"/>
-        <id>https://ohdoylerules.com/personal-project/sublime-node-snippets/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/sublime-node-snippets/">&lt;p&gt;I created a &lt;a href=&quot;https:&#x2F;&#x2F;sublime.wbond.net&#x2F;packages&#x2F;Node%20Completions&quot;&gt;huge snippet library&lt;&#x2F;a&gt; based on the docs for node 10.26. There are &lt;strong&gt;783&lt;&#x2F;strong&gt; total right now (&lt;em&gt;2014-03-25&lt;&#x2F;em&gt;).&lt;&#x2F;p&gt;
-&lt;p&gt;The way that I quickly made this big repository, was I wrote a script that would generate new sublime snippets based on a text file.&lt;&#x2F;p&gt;
-&lt;p&gt;The &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;sublime-node-snippets&#x2F;blob&#x2F;master&#x2F;convert.php&quot;&gt;converter&lt;&#x2F;a&gt; just reads &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;sublime-node-snippets&#x2F;blob&#x2F;master&#x2F;sources.txt&quot;&gt;the text file&lt;&#x2F;a&gt; line by line and then generates a &lt;code&gt;.sublime-completions&lt;&#x2F;code&gt; file.&lt;&#x2F;p&gt;
-&lt;p&gt;There is a template that is sort of setup. So you can actually just clone the repo, drop in a new sources file, and then generate a new snippets library with the converter.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is an excerpt from &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;sublime-node-snippets&quot;&gt;the github repo&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;installing&quot;&gt;Installing&lt;&#x2F;h2&gt;
-&lt;h4 id=&quot;package-control&quot;&gt;Package Control&lt;&#x2F;h4&gt;
-&lt;p&gt;Just look for &lt;code&gt;sublime-node-snippets&lt;&#x2F;code&gt; on &lt;a href=&quot;https:&#x2F;&#x2F;sublime.wbond.net&#x2F;packages&#x2F;Node%20Completions&quot;&gt;Package Control&lt;&#x2F;a&gt;. It is called &amp;quot;Node Completions&amp;quot; on the site, but comes up as &amp;quot;sublime-node-snippets&amp;quot;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;manual-install&quot;&gt;Manual Install&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;Open the Commands Palette (command+shift+p)&lt;&#x2F;li&gt;
-&lt;li&gt;Package Control: Add Repository&lt;&#x2F;li&gt;
-&lt;li&gt;Past in this repos URL&lt;&#x2F;li&gt;
-&lt;li&gt;Press Enter&lt;&#x2F;li&gt;
-&lt;li&gt;Open the palette again&lt;&#x2F;li&gt;
-&lt;li&gt;press enter on &amp;quot;sublime-node-snippets&amp;quot;&lt;&#x2F;li&gt;
-&lt;li&gt;watch it install&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h2 id=&quot;using&quot;&gt;Using&lt;&#x2F;h2&gt;
-&lt;p&gt;Pressing &lt;code&gt;.&lt;&#x2F;code&gt; (period) will end the snippet lookup.&lt;&#x2F;p&gt;
-&lt;p&gt;You will have better results if you pretend the period isn&#x27;t needed. So if you are looking for &lt;code&gt;fs.readdir&lt;&#x2F;code&gt;, you would type &lt;code&gt;fsread&lt;&#x2F;code&gt; and you would see the results coming up.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;snippet-categories&quot;&gt;Snippet Categories&lt;&#x2F;h2&gt;
-&lt;p&gt;Node Populars&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;async&lt;&#x2F;li&gt;
-&lt;li&gt;underscore&lt;&#x2F;li&gt;
-&lt;li&gt;lodash&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Node Core&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Assert&lt;&#x2F;li&gt;
-&lt;li&gt;Buffer&lt;&#x2F;li&gt;
-&lt;li&gt;Child&lt;&#x2F;li&gt;
-&lt;li&gt;Console&lt;&#x2F;li&gt;
-&lt;li&gt;Cluster&lt;&#x2F;li&gt;
-&lt;li&gt;Crypto&lt;&#x2F;li&gt;
-&lt;li&gt;Decoder&lt;&#x2F;li&gt;
-&lt;li&gt;Domain&lt;&#x2F;li&gt;
-&lt;li&gt;Dns&lt;&#x2F;li&gt;
-&lt;li&gt;Event&lt;&#x2F;li&gt;
-&lt;li&gt;Http&lt;&#x2F;li&gt;
-&lt;li&gt;Https&lt;&#x2F;li&gt;
-&lt;li&gt;Fs&lt;&#x2F;li&gt;
-&lt;li&gt;Global&lt;&#x2F;li&gt;
-&lt;li&gt;Module&lt;&#x2F;li&gt;
-&lt;li&gt;Net&lt;&#x2F;li&gt;
-&lt;li&gt;Path&lt;&#x2F;li&gt;
-&lt;li&gt;Punnycode&lt;&#x2F;li&gt;
-&lt;li&gt;Process&lt;&#x2F;li&gt;
-&lt;li&gt;Querystring&lt;&#x2F;li&gt;
-&lt;li&gt;Readline&lt;&#x2F;li&gt;
-&lt;li&gt;Repl&lt;&#x2F;li&gt;
-&lt;li&gt;Timers&lt;&#x2F;li&gt;
-&lt;li&gt;Tls Ssl&lt;&#x2F;li&gt;
-&lt;li&gt;Tty&lt;&#x2F;li&gt;
-&lt;li&gt;Udp&lt;&#x2F;li&gt;
-&lt;li&gt;Util&lt;&#x2F;li&gt;
-&lt;li&gt;Url&lt;&#x2F;li&gt;
-&lt;li&gt;Os&lt;&#x2F;li&gt;
-&lt;li&gt;Vm&lt;&#x2F;li&gt;
-&lt;li&gt;Zlib&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h2 id=&quot;adding-new-snippets&quot;&gt;Adding New Snippets&lt;&#x2F;h2&gt;
-&lt;p&gt;Here is how I quickly got all these snippets.&lt;&#x2F;p&gt;
-&lt;p&gt;I will use &lt;a href=&quot;http:&#x2F;&#x2F;expressjs.com&#x2F;3x&#x2F;api.html&quot;&gt;Express&lt;&#x2F;a&gt; as an example since it isn&#x27;t in here.&lt;&#x2F;p&gt;
-&lt;p&gt;First I went to the docs for the framework, and I looked to see what the code examples were wrapped in.&lt;&#x2F;p&gt;
-&lt;p&gt;For the &lt;a href=&quot;http:&#x2F;&#x2F;expressjs.com&#x2F;3x&#x2F;api.html&quot;&gt;express&lt;&#x2F;a&gt; docs site, the codes are shown in &lt;code&gt;section h3&lt;&#x2F;code&gt; tags. So to quickly get the list, I ran the following code:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Array&lt;&#x2F;span&gt;&lt;span&gt;.prototype.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span&gt;(document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;querySelectorAll&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;section h3&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;), &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;item&lt;&#x2F;span&gt;&lt;span&gt;){
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;item&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;textContent&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;trim&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;}).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span&gt;(&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Then copied the output and pasted it in the &lt;code&gt;sources.txt&lt;&#x2F;code&gt; file. Done!&lt;&#x2F;p&gt;
-&lt;h5 id=&quot;cool-feature&quot;&gt;Cool Feature&lt;&#x2F;h5&gt;
-&lt;p&gt;&lt;strong&gt;The word &lt;code&gt;callback&lt;&#x2F;code&gt; will automagically be converted into a function.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;building&quot;&gt;Building&lt;&#x2F;h2&gt;
-&lt;p&gt;I went to each page of the &lt;a href=&quot;http:&#x2F;&#x2F;nodejs.org&#x2F;api&#x2F;&quot;&gt;node docs&lt;&#x2F;a&gt;, and copied the functions. Then I wrote a &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;sublime-node-snippets&#x2F;blob&#x2F;master&#x2F;convert.php&quot;&gt;converter&lt;&#x2F;a&gt; to take each function and convert it to a snippet.&lt;&#x2F;p&gt;
-&lt;p&gt;For Example, this line:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;setTimeout(fun, delay)
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Is going to get converted to:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;setTimeout(${1:fun}, ${2:delay})${0}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;When the word &lt;code&gt;callback&lt;&#x2F;code&gt; appears, it will convert it to the standard
-&lt;code&gt;fun&lt;&#x2F;code&gt; snippet.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;fs&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;readdir&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;callback&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;will become&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;fs&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;readdir&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;args&lt;&#x2F;span&gt;&lt;span&gt;}){
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; body}
-&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h2 id=&quot;sources-txt&quot;&gt;sources.txt&lt;&#x2F;h2&gt;
-&lt;p&gt;This file is cool.&lt;&#x2F;p&gt;
-&lt;p&gt;It is just a line-by-line output of the node docs functions. This is the file that is raked over to generate the snippets.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;running-the-build&quot;&gt;Running The Build&lt;&#x2F;h2&gt;
-&lt;p&gt;Just run &lt;code&gt;php convert.php&lt;&#x2F;code&gt; and it will rake the sources.txt file and then write the new snippet in the snippets folder.&lt;&#x2F;p&gt;
-&lt;p&gt;Everything before the first &lt;code&gt;(&lt;&#x2F;code&gt; will be used as the filename and tab snippet.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;contributing&quot;&gt;Contributing&lt;&#x2F;h2&gt;
-&lt;p&gt;Just add (or edit) a line in the source file. Then run &lt;code&gt;php convert.php&lt;&#x2F;code&gt; to generate the new snippets.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;why-php&quot;&gt;Why PHP?!&lt;&#x2F;h2&gt;
-&lt;p&gt;Well, PHP is actually pretty good at manipulating strings and writing files. Maybe at some point I will convert the converter and release it as a separate tool.&lt;&#x2F;p&gt;
-&lt;h2 id=&quot;source&quot;&gt;Source&lt;&#x2F;h2&gt;
-&lt;p&gt;You can find the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;sublime-node-snippets&quot;&gt;source code on github&lt;&#x2F;a&gt;. You can also install via package control by looking for &lt;code&gt;sublime-node-snippets&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Simple Binder</title>
-        <published>2014-03-14T00:00:00+00:00</published>
-        <updated>2014-03-14T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/simple-binder/"/>
-        <id>https://ohdoylerules.com/personal-project/simple-binder/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/simple-binder/">&lt;p&gt;The other day I was working on a custom form that had a lot of javascript interaction. It got a little too far before I realized I should have been using something like &lt;a href=&quot;http:&#x2F;&#x2F;angularjs.org&#x2F;&quot;&gt;Angular.js&lt;&#x2F;a&gt;. I was looking for a simple one-way databinding library, but I couldn&#x27;t find anything that wasn&#x27;t overkill.&lt;&#x2F;p&gt;
-&lt;p&gt;So I created &lt;a href=&quot;http:&#x2F;&#x2F;james2doyle.github.io&#x2F;simplebinder&#x2F;&quot;&gt;Simple Binder&lt;&#x2F;a&gt;. Simple Binder is a zero dependency one-way databinder for javascript. The great thing about it is that, not only is it very simple, but it is super small as well. No dependencies is also nice.&lt;&#x2F;p&gt;
-&lt;p&gt;Using the lib is pretty straightforward. Here is the markup required for a simplebinder element:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;lt;p data-model=&amp;quot;number&amp;quot;&amp;gt;number&amp;lt;&#x2F;p&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;input type=&amp;quot;number&amp;quot; data-controller=&amp;quot;number&amp;quot; &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;As you can see, you must have a &lt;em&gt;data-model&lt;&#x2F;em&gt; and a &lt;em&gt;data-controller&lt;&#x2F;em&gt; set on your items. Models are like the destination for the data-controllers value.&lt;&#x2F;p&gt;
-&lt;p&gt;This would be the javascript for this element:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;var sb = SimpleBinder(&amp;#39;number&amp;#39;, function(input, model) {
-&lt;&#x2F;span&gt;&lt;span&gt;  console.log(input.value);
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now the &lt;code&gt;sb&lt;&#x2F;code&gt; variable it a simplebinder object. It has a few nice methods that you can use now:&lt;&#x2F;p&gt;
-&lt;p&gt;Destroy a simplebinder element.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;sb.destroy();
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Add a new controller to a simplebinder element.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;sb.addController(&amp;#39;new-controller-name&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Add a new model to a simplebinder element.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;sb.addModel(&amp;#39;new-model-name&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;See all models on a simplebinder element. Returns an arrary of strings with querySelectorAll queries.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;sb.models;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;See all controllers on a simplebinder element. Returns an arrary of strings with querySelectorAll queries.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;sb.controllers;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Custom events and attributes&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;var sb = SimpleBinder(&amp;#39;modelname&amp;#39;, {
-&lt;&#x2F;span&gt;&lt;span&gt;  watch: &amp;#39;value&amp;#39;, &#x2F;&#x2F; what controller attribute are we watching?
-&lt;&#x2F;span&gt;&lt;span&gt;  change: &amp;#39;className&amp;#39; &#x2F;&#x2F; the attribute to change on the model, default = textContent
-&lt;&#x2F;span&gt;&lt;span&gt;}, function(input, model) {
-&lt;&#x2F;span&gt;&lt;span&gt;  console.log(input.value);
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;That&#x27;s it. I will be adding the ability to remove a Model or Controller in the future. I tested this on a variety of devices. This library uses &lt;code&gt;querySelectorAll&lt;&#x2F;code&gt;, so if you don&#x27;t have that... well you&#x27;re fucked.&lt;&#x2F;p&gt;
-&lt;p&gt;Check out the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;simplebinder&quot;&gt;source on github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Vim Vector Logo</title>
-        <published>2014-03-04T00:00:00+00:00</published>
-        <updated>2014-06-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/vim-svg/"/>
-        <id>https://ohdoylerules.com/personal-project/vim-svg/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/vim-svg/">&lt;p&gt;Here is a beauty. People have been looking for this Vim logo in a vector format for quite some time. There is of course the &lt;a href=&quot;http:&#x2F;&#x2F;commons.wikimedia.org&#x2F;wiki&#x2F;File:Vimlogo.svg&quot;&gt;old logo&lt;&#x2F;a&gt;, but it looks pretty strange. It reminds me of Tron for some reason.&lt;&#x2F;p&gt;
-&lt;p&gt;Anyway this was a pain to make because of all the layers and custom shaping of the V. Also I had to make a bunch of changes to everything once I tested it in the browser because it was all busted.&lt;&#x2F;p&gt;
-&lt;p&gt;I usually test my SVGs in the browser as a final OK point. I know if it renders there, then everything should be fine. Also people want it for using as a retina icon now, since the advent of responsive design and development.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;vim.svg&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;vim svg vector&quot; src=&quot;&#x2F;images&#x2F;vim.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;If you happen to use this for anything, it would be nice to recieve some credit for it. I actually couldn&#x27;t find who made the original Vim logo. It might just be lost in time.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;update&quot;&gt;Update&lt;&#x2F;h4&gt;
-&lt;p&gt;I made a icns version for OSX. You can &lt;a href=&quot;&#x2F;images&#x2F;vim.icns&quot;&gt;download it here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;You can change the MacVim icon if you want. I happen to think this one is a little nicer.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;update-2&quot;&gt;Update 2&lt;&#x2F;h4&gt;
-&lt;p&gt;I have found another person who wanted a new vim icon. They added it to the fork of &lt;a href=&quot;https:&#x2F;&#x2F;code.google.com&#x2F;p&#x2F;macvim&#x2F;&quot;&gt;MacVim&lt;&#x2F;a&gt;. Here is the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;kaishin&#x2F;macvim&#x2F;commit&#x2F;fedcb4579b68439dba85b9d7fa4b076faac7ebad&quot;&gt;commit from his repo&lt;&#x2F;a&gt; with the new icon.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Atom Monokai Dark</title>
-        <published>2014-02-27T00:00:00+00:00</published>
-        <updated>2014-02-27T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/atom-monokai-dark/"/>
-        <id>https://ohdoylerules.com/personal-project/atom-monokai-dark/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/atom-monokai-dark/">&lt;p&gt;I made a &lt;a href=&quot;http:&#x2F;&#x2F;atom.io&#x2F;packages&#x2F;monokai-dark&quot;&gt;dark monokai&lt;&#x2F;a&gt; syntax theme for &lt;a href=&quot;http:&#x2F;&#x2F;atom.io&#x2F;&quot;&gt;Atom&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Originally converted from &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;kevinsawicki&#x2F;monokai&quot;&gt;monokai&lt;&#x2F;a&gt; which in turn came from the &lt;a href=&quot;http:&#x2F;&#x2F;www.monokai.nl&#x2F;blog&#x2F;wp-content&#x2F;asdev&#x2F;Monokai.tmTheme&quot;&gt;TextMate&lt;&#x2F;a&gt; theme using the &lt;a href=&quot;http:&#x2F;&#x2F;atom.io&#x2F;docs&#x2F;latest&#x2F;converting-a-text-mate-theme&quot;&gt;TextMate bundle converter&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;atom-monokai-dark.png&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;atom monokai dark screenshot&quot; src=&quot;&#x2F;images&#x2F;atom-monokai-dark.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I would also suggest editing your main stylesheet and adding the following CSS:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* really nice smooth fonts *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;body &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  -webkit-font-smoothing: antialiased;
-&lt;&#x2F;span&gt;&lt;span&gt;  text-rendering: optimizeLegibility;
-&lt;&#x2F;span&gt;&lt;span&gt;  -moz-osx-font-smoothing: grayscale;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* custom scrollbars *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;tree-view-resizer &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  ::-webkit-scrollbar {
-&lt;&#x2F;span&gt;&lt;span&gt;    width: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.5em&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    height: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.5em&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;-webkit-scrollbar-track &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    background-color: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;#303030&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;::&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;-webkit-scrollbar-thumb &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    background-color: lighten(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;#303030&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;15%&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* fix website scroll styling flash *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;tree-view-scroller &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  overflow: hidden;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;amp;:hover {
-&lt;&#x2F;span&gt;&lt;span&gt;    overflow: auto;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This adds some nicer smoothing and also adds some custom scrollbars to both panes. This gets rid of the ugly strange white ones. I would also suggest checking out &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;web&#x2F;source-code-pro-sublime&quot;&gt;Source Code Pro&lt;&#x2F;a&gt; for your font!&lt;&#x2F;p&gt;
-&lt;p&gt;You can download the theme on &lt;a href=&quot;http:&#x2F;&#x2F;atom.io&#x2F;packages&#x2F;monokai-dark&quot;&gt;Atom&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>The Alternative Cms</title>
-        <published>2014-02-26T00:00:00+00:00</published>
-        <updated>2014-02-26T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/the-alternative-cms/"/>
-        <id>https://ohdoylerules.com/personal-project/the-alternative-cms/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/the-alternative-cms/">&lt;p&gt;The Explode Code presentation was last night. I spoke about &lt;a href=&quot;&#x2F;images&#x2F;the-alternative-cms.pdf&quot; title=&quot;The Alternative CMS PDF&quot;&gt;The Alternative CMS&lt;&#x2F;a&gt;. It was about the problems with Wordpress, why &lt;em&gt;WYSIWYG&lt;&#x2F;em&gt; is hard, and why Flat File and Markdown could be the solution you are looking for.&lt;&#x2F;p&gt;
-&lt;p&gt;Pretty good reception overall. Some of the things people asked were about complexity. The real answer is if you are doing things that are super complex, you should&#x27;nt really use a flat-file cms.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;the idea is really more 60% client and 40% developer&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;I don&#x27;t mention this in the slides, but the idea is really more 60% client and 40% developer. Using that flat-file is much faster to develop, but it makes it easier to manage for the client.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;&#x2F;images&#x2F;the-alternative-cms.pdf&quot; title=&quot;The Alternative CMS PDF&quot;&gt;Here is the download&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here are some of the links to things I mentioned in the talk:&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;flat-file-cmss&quot;&gt;Flat File CMSs&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;https:&#x2F;&#x2F;github.com&#x2F;PhileCMS&#x2F;Phile&lt;&#x2F;li&gt;
-&lt;li&gt;https:&#x2F;&#x2F;github.com&#x2F;gilbitron&#x2F;Pico&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;assemble.io&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;https:&#x2F;&#x2F;ghost.org&#x2F;features&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;getkirby.com&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;jekyllrb.com&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;octopress.org&#x2F;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;markdown-editors&quot;&gt;Markdown Editors&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;http:&#x2F;&#x2F;mouapp.com&#x2F; -- OSX Only&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;pad.haroopress.com&#x2F; -- Node Webkit&lt;&#x2F;li&gt;
-&lt;li&gt;https:&#x2F;&#x2F;stackedit.io&#x2F; -- Online&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;dillinger.io&#x2F; -- Online&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;www.sublimetext.com&#x2F; -- Duh&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;macromates.com&#x2F; -- TextMate&lt;&#x2F;li&gt;
-&lt;li&gt;https:&#x2F;&#x2F;github.com&#x2F;plasticboy&#x2F;vim-markdown -- Vim markdown&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;jblevins.org&#x2F;projects&#x2F;markdown-mode&#x2F; -- Emacs&lt;&#x2F;li&gt;
-&lt;li&gt;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;9045390 -- Markdown Cheatsheet&lt;&#x2F;li&gt;
-&lt;li&gt;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;6540193 -- Mou Markdown Cheatsheet&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;full-cmss-with-markdown-support&quot;&gt;Full CMSs With Markdown Support&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;http:&#x2F;&#x2F;anchorcms.com&#x2F; -- markdown only&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;buildwithcraft.com&#x2F; -- wysiwyg, markdown, simple&#x2F;text&lt;&#x2F;li&gt;
-&lt;li&gt;https:&#x2F;&#x2F;www.pyrocms.com&#x2F; -- wysiwyg, markdown, simple&#x2F;text&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;wordpress.org&#x2F;plugins&#x2F;wp-markdown&#x2F;screenshots&#x2F; -- who knows&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;dropplets.com&#x2F; -- markdown and simple&#x2F;text&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;inline-editors-content-editable&quot;&gt;Inline Editors (Content Editable)&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;http:&#x2F;&#x2F;jakiestfu.github.io&#x2F;Medium.js&#x2F;docs&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;www.zenpen.io&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;mattduvall.com&#x2F;grande.js&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;ckeditor.com&#x2F;demo#inline&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;sofish.github.io&#x2F;pen&#x2F;&lt;&#x2F;li&gt;
-&lt;li&gt;http:&#x2F;&#x2F;goo.gl&#x2F;b4ECsb -- pen, grande, medium breakdown&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Again you can find the &lt;a href=&quot;&#x2F;images&#x2F;the-alternative-cms.pdf&quot; title=&quot;The Alternative CMS PDF&quot;&gt;PDF here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Randomly Generate A Password In Bash</title>
-        <published>2014-02-16T00:00:00+00:00</published>
-        <updated>2014-02-16T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/bash-random-password-generation/"/>
-        <id>https://ohdoylerules.com/snippets/bash-random-password-generation/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/bash-random-password-generation/">&lt;p&gt;When installing or setting up frameworks, in this case I was playing around with &lt;a href=&quot;http:&#x2F;&#x2F;laravel.com&#x2F;&quot;&gt;Laravel&lt;&#x2F;a&gt;, you usually need to set a session&#x2F;secret&#x2F;encryption key.&lt;&#x2F;p&gt;
-&lt;p&gt;I know why this is, but I always end up looking around for some random password generator so I can get a random string that is exactly 32 characters. Isn&#x27;t there an easier way?!?!&lt;&#x2F;p&gt;
-&lt;p&gt;Yes there is. If you have the magical &lt;a href=&quot;https:&#x2F;&#x2F;www.openssl.org&#x2F;&quot; title=&quot;OpenSSL Website&quot;&gt;OpenSSL&lt;&#x2F;a&gt; installed, which most do, you can use it to generate a random string.&lt;&#x2F;p&gt;
-&lt;p&gt;I found a &lt;a href=&quot;http:&#x2F;&#x2F;osxdaily.com&#x2F;2011&#x2F;05&#x2F;10&#x2F;generate-random-passwords-command-line&#x2F;&quot; title=&quot;Generate Random Passwords from the Command Line&quot;&gt;article online&lt;&#x2F;a&gt; that uses base64 to generate a string of a certain length. The only thing is that base64 is padded with 8 bits. Which means that if you want 32 then you need to use 24. This goes up exponentially as the number gets bigger. So there is a trim part of the function that clips off the extra characters.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the function broken down into steps:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;pass a number to the function&lt;&#x2F;li&gt;
-&lt;li&gt;cut the resulting string&lt;&#x2F;li&gt;
-&lt;li&gt;generate a base64 string using that number&lt;&#x2F;li&gt;
-&lt;li&gt;echo out the result&lt;&#x2F;li&gt;
-&lt;li&gt;copy the output to the clipboard with a newline&lt;&#x2F;li&gt;
-&lt;li&gt;echo out a success&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;I put a check in there if the argument is not a number. This is just for the dummies out there.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;pbcopy-is-not-defined&quot;&gt;pbcopy is not defined&lt;&#x2F;h4&gt;
-&lt;p&gt;You are probably on Linux. I found &lt;a href=&quot;http:&#x2F;&#x2F;whereswalden.com&#x2F;2009&#x2F;10&#x2F;23&#x2F;pbcopy-and-pbpaste-for-linux&#x2F;&quot; title=&quot;pbcopy and pbpaste for Linux&quot;&gt;this little snippet&lt;&#x2F;a&gt; for the lazy. This way you can forget about translating it each time.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;alias &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;pbcopy&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;xsel --clipboard --input&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;alias &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;pbpaste&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;xsel --clipboard --output&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now for the actual shell function:&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;code&quot;&gt;Code&lt;&#x2F;h3&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# if the argument is a number
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# cut the string so that there is no base64 padding
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# generate a random password of the specified length
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# then copy it to the clipboard without a newline
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# usage: password 32
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;password&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;LENGTH&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;REGEX&lt;&#x2F;span&gt;&lt;span&gt;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;^[0-9]+$&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;[[ &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;LENGTH &lt;&#x2F;span&gt;&lt;span&gt;=~ $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;REGEX &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;]] &lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;then
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;PASSWD&lt;&#x2F;span&gt;&lt;span&gt;=$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;openssl&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; rand&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -base64 &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;LENGTH &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;head -c&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;LENGTH&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;PASSWD
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;PASSWD &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;tr -d &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; | &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pbcopy
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Password copied to clipboard&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;else
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Argument must be a number&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;fi
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here is how you would use it, and what the results would look like:&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;output&quot;&gt;Output&lt;&#x2F;h3&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt; ❯ password 32
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;gY4zLES+WWF5+iNWo0FYx+os6EmDwecf
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Password&lt;&#x2F;span&gt;&lt;span&gt; copied to clipboard
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt; ❯ password fu
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Argument&lt;&#x2F;span&gt;&lt;span&gt; must be a number
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt; ❯
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This function would be put in your &lt;code&gt;.bashrc&lt;&#x2F;code&gt; file, or you &lt;code&gt;.zshrc&lt;&#x2F;code&gt; file if you are a cool ZSH user.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>PHP WebSocket Chat</title>
-        <published>2014-02-08T00:00:00+00:00</published>
-        <updated>2014-02-08T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/php-websocket-chat/"/>
-        <id>https://ohdoylerules.com/personal-project/php-websocket-chat/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/php-websocket-chat/">&lt;p&gt;About 6 months ago, I made a little &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;socket-chat-example&quot;&gt;socket.io chat app&lt;&#x2F;a&gt;. At the time, this was really only possible with Node.js because the &lt;a href=&quot;http:&#x2F;&#x2F;caniuse.com&#x2F;#feat=websockets&quot;&gt;HTML5 WebSocket support&lt;&#x2F;a&gt; was too low.&lt;&#x2F;p&gt;
-&lt;p&gt;But now, months later, the support for WebSockets is actually very good.Looking at &lt;a href=&quot;http:&#x2F;&#x2F;caniuse.com&quot;&gt;caniuse.com&lt;&#x2F;a&gt; right now, there is better support for WebSocket than there is WebGL. I would argue that WebGL support is actually more important than the WebSocket support, but I digress. Here is a non-jargon-laden explanation from &lt;a href=&quot;http:&#x2F;&#x2F;www.html5rocks.com&#x2F;en&#x2F;tutorials&#x2F;websockets&#x2F;basics&#x2F;#toc-introduction-sockets&quot;&gt;HTML5Rocks&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;The WebSocket specification defines an API establishing &amp;quot;socket&amp;quot; connections between a web browser and a server. In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Here is a little more technical explanation.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;A WebSocket creates a TCP connection to server, and keeps it as long as needed. The Server or client can easily close it. It uses Bidirectional communication - so server and client can exchange data both directions at any time. It is very efficient if the application requires frequent messages. WebSockets have data framing that includes masking for each message sent from client to server so data is simply encrypted.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;If you want a technically in-depth overview, checkout &lt;a href=&quot;http:&#x2F;&#x2F;www.websocket.org&#x2F;quantum.html&quot;&gt;websocket.org&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Anyway, I made a &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;php-socket-chat&quot;&gt;little chat app&lt;&#x2F;a&gt; with &lt;a href=&quot;http:&#x2F;&#x2F;socketo.me&#x2F;&quot;&gt;Ratchet&lt;&#x2F;a&gt;. People knock PHP for all the bad things it does. But getting the WebSocket example running, actually wasn&#x27;t that bad. Apparently Apache doesn&#x27;t play nice with Ratchet (not sure about &lt;em&gt;pure&lt;&#x2F;em&gt; WebSockets) so you have to use the &lt;a href=&quot;http:&#x2F;&#x2F;www.php.net&#x2F;manual&#x2F;en&#x2F;features.commandline.webserver.php&quot;&gt;built-in PHP server&lt;&#x2F;a&gt; which comes with PHP 5.4.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;php-socket-animation.gif&quot; target=&quot;_blank&quot; title=&quot;php ratchet socket server form example&quot;&gt;&lt;img alt=&quot;php ratchet socket server form example&quot; src=&quot;&#x2F;images&#x2F;php-socket-animation.gif&quot; width=&quot;252&quot; height=&quot;246&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;The app I made is pretty much a copy paste from the &lt;a href=&quot;http:&#x2F;&#x2F;socketo.me&#x2F;docs&#x2F;hello-world&quot;&gt;Rachet Hello World Example&lt;&#x2F;a&gt; but tried to make the simplest chat app I could. The server is actually pretty close the Hello World code, just with a bunch of extra client-side javascript.&lt;&#x2F;p&gt;
-&lt;p&gt;Once you &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;php-socket-chat&quot;&gt;download the app&lt;&#x2F;a&gt;, if you have PHP properly installed and in your path, you can use &lt;code&gt;php bin&#x2F;chat-server.php&lt;&#x2F;code&gt; in the root folder to start the server. You can then hit the index page and see the green connection message. You will also see some information in your terminal.&lt;&#x2F;p&gt;
-&lt;p&gt;You can then open a new browser (or incognito&#x2F;private window) and &amp;quot;create&amp;quot; another user to chat with.&lt;&#x2F;p&gt;
-&lt;p&gt;You can see your messages going back and forth. Pretty slick. With the way I develop things at &lt;a href=&quot;http:&#x2F;&#x2F;warpaintmedia.ca&quot;&gt;WARPAINT Media&lt;&#x2F;a&gt;, I really can&#x27;t wait to create some sites and apps that use the WebSocket server.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>All About PhileCMS Video</title>
-        <published>2014-02-07T00:00:00+00:00</published>
-        <updated>2014-02-07T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/phile-intro-video/"/>
-        <id>https://ohdoylerules.com/personal-project/phile-intro-video/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/phile-intro-video/">&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;PhileCMS&#x2F;Phile&quot;&gt;PhileCMS&lt;&#x2F;a&gt; now has a &lt;a href=&quot;http:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=8GLMe371RuI&quot;&gt;new instructional video&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here are some of the points I hit on in the video:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Installation&lt;&#x2F;li&gt;
-&lt;li&gt;Differences To Pico&lt;&#x2F;li&gt;
-&lt;li&gt;About Twig&lt;&#x2F;li&gt;
-&lt;li&gt;Creating Content&lt;&#x2F;li&gt;
-&lt;li&gt;Using Meta Data&lt;&#x2F;li&gt;
-&lt;li&gt;Themes&lt;&#x2F;li&gt;
-&lt;li&gt;Conditional Navigations&lt;&#x2F;li&gt;
-&lt;li&gt;Plugins&lt;&#x2F;li&gt;
-&lt;li&gt;Tricks&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;The video is about 35 minutes. So there is quite a lot of stuff in there. I plan on making a few more videos. One about making themes and using the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;PhileCMS&#x2F;phileGruntThemeing&quot;&gt;phileGruntThemeing&lt;&#x2F;a&gt; project, and creating plugins with the events system.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=8GLMe371RuI&quot;&gt;Watch it on YouTube&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Font Awesome SVG Icons</title>
-        <published>2014-02-06T00:00:00+00:00</published>
-        <updated>2014-02-06T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/font-awesome-svg-icons/"/>
-        <id>https://ohdoylerules.com/web/font-awesome-svg-icons/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/font-awesome-svg-icons/">&lt;p&gt;This one was kind of annoying. I was looking for all the &lt;a href=&quot;http:&#x2F;&#x2F;fontawesome.io&#x2F;&quot;&gt;font-awesome icons&lt;&#x2F;a&gt; in a nice sheet so that &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;web&#x2F;font-awesome-svg-icons&#x2F;warpaintmedia.ca&quot;&gt;WARPAINT&lt;&#x2F;a&gt; could design some mockups for a client. Well, of course this sheet doesn&#x27;t exists.&lt;&#x2F;p&gt;
-&lt;p&gt;So I used the following code to grab the icons from the &lt;a href=&quot;http:&#x2F;&#x2F;fontawesome.io&#x2F;cheatsheet&#x2F;&quot;&gt;cheatsheet page&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;arr &lt;&#x2F;span&gt;&lt;span&gt;= &amp;quot;&amp;quot;;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.container .col-md-4&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;each&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;e&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;arr &lt;&#x2F;span&gt;&lt;span&gt;+= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;e&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;innerText&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;) + &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;, &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;arr&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;I then took that output and pasted it into Sublime Text. I split the output into multiple lines, and replaced the commas with double spaces. That was then pasted into Illustrator and exported as SVG.&lt;&#x2F;p&gt;
-&lt;p&gt;Voila! There you have this sprite sheet.&lt;&#x2F;p&gt;
-&lt;p&gt;You can &lt;a href=&quot;&#x2F;images&#x2F;font-awesome-sheet.svg&quot;&gt;download it here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;These icons are from version 4.0.2&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Groupon SVG logo</title>
-        <published>2014-01-24T00:00:00+00:00</published>
-        <updated>2014-01-24T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/groupon-green-logo-svg/"/>
-        <id>https://ohdoylerules.com/personal-project/groupon-green-logo-svg/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/groupon-green-logo-svg/">&lt;p&gt;Lo and behold, a new vector. This one is for the Groupon logo. This is actually based on another logo that was black. It wasn&#x27;t very nice, so I picked the Groupon greens from their site and applied them to the background gradient. I also removed the gaudy font gradient and left them as flat white.&lt;&#x2F;p&gt;
-&lt;p&gt;Below is the source SVG for download.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;groupon.svg&quot; title=&quot;groupon svg vector&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;groupon svg vector&quot; src=&quot;&#x2F;images&#x2F;groupon.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Chrome Reverse Geocode App</title>
-        <published>2014-01-08T00:00:00+00:00</published>
-        <updated>2014-01-08T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/chrome-reverse-geocode/"/>
-        <id>https://ohdoylerules.com/personal-project/chrome-reverse-geocode/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/chrome-reverse-geocode/">&lt;p&gt;I have created a new app (with the help of &lt;a href=&quot;https:&#x2F;&#x2F;twitter.com&#x2F;beatricelaw&quot;&gt;Beatrice Law&lt;&#x2F;a&gt;) called &lt;a href=&quot;http:&#x2F;&#x2F;goo.gl&#x2F;Z15Teh&quot; title=&quot;Reverse Geocode on the Chrome Web Store&quot;&gt;Reverse Geocode&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;In the process of building the site for &lt;a href=&quot;http:&#x2F;&#x2F;textbooksforchange.ca&#x2F;&quot;&gt;Textbooks For Change&lt;&#x2F;a&gt;, a &lt;a href=&quot;http:&#x2F;&#x2F;warpaintmedia.ca&quot;&gt;WARPAINT Media&lt;&#x2F;a&gt; client, I realized I needed an easy way for them to reverse geocode an address for their map listings.&lt;&#x2F;p&gt;
-&lt;p&gt;The site is built on &lt;a href=&quot;http:&#x2F;&#x2F;philecms.github.io&#x2F;Phile&#x2F;&quot;&gt;PhileCMS&lt;&#x2F;a&gt; so it is very fast, but requires a little more savvy-ness than normal. I added the static Google Map that is based on the list of coordinates they enter in.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;http:&#x2F;&#x2F;goo.gl&#x2F;Z15Teh&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;chrome reverse geocode app screenshot&quot; src=&quot;&#x2F;images&#x2F;reverse-geocode.png&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;It is very easy to update, but not quite that easy to get the coordinates. There is a Google tool to do this, but it is actually not as nice (but I have an obvious bias).&lt;&#x2F;p&gt;
-&lt;p&gt;The app allows you to enter in an address, then they app goes and gets the latitude and longitude. Then, because this is a &lt;a href=&quot;http:&#x2F;&#x2F;developer.chrome.com&#x2F;apps&#x2F;about_apps.html&quot;&gt;Chrome Packaged App&lt;&#x2F;a&gt;, you can copy it right to your clipboard with a single click!&lt;&#x2F;p&gt;
-&lt;p&gt;You can download the app on the &lt;a href=&quot;http:&#x2F;&#x2F;goo.gl&#x2F;Z15Teh&quot; title=&quot;Reverse Geocode on the Chrome Web Store&quot;&gt;Chrome Web Store&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;The app &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;WARPAINTMedia&#x2F;chrome-reverse-geocode&quot; title=&quot;Reverse Geocode on Github&quot;&gt;is also on github&lt;&#x2F;a&gt; so anyone can submit some changes and improvements.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>IICRC Vector Logo</title>
-        <published>2013-12-18T00:00:00+00:00</published>
-        <updated>2013-12-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/iicrc-vector-logo/"/>
-        <id>https://ohdoylerules.com/web/iicrc-vector-logo/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/iicrc-vector-logo/">&lt;p&gt;Another lost logo, this one is for the IICRC (institute of inspection cleaning and restoration). They are an international cleaning certification institure. Clearly. Here is their vector logo.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;iicrc.svg&quot; title=&quot;iicrc svg vector&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;iicrc svg vector&quot; src=&quot;&#x2F;images&#x2F;iicrc.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Enjoy. This was a huge pain to get right.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>List File Permission Numbers</title>
-        <published>2013-12-08T00:00:00+00:00</published>
-        <updated>2013-12-08T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/list-file-permission-numbers/"/>
-        <id>https://ohdoylerules.com/snippets/list-file-permission-numbers/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/list-file-permission-numbers/">&lt;p&gt;I wanted to see the chmod numbers for the files in a directory. So I can copy them to the other files. Since I don&#x27;t want to do that dumb chmod math, I looked for a way to do it easily.&lt;&#x2F;p&gt;
-&lt;p&gt;I found the following code:&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;function&quot;&gt;Function&lt;&#x2F;h4&gt;
-&lt;p&gt;Add the following to your .bashrc (or .zshrc file if you are cool) and then reload the source of your terminal.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;show-permissions&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ls -l &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;awk &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;{k=0;for(i=0;i&amp;lt;=8;i++)k+=((substr($1,i+2,1)~&#x2F;[rwx]&#x2F;) \
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;            *2^(8-i));if(k)printf(&amp;quot;%0o &amp;quot;,k);print}&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h4 id=&quot;usage&quot;&gt;Usage:&lt;&#x2F;h4&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;show-permissions
-&lt;&#x2F;span&gt;&lt;span&gt;644 -rw-r--r--   1 james2doyle   README.md
-&lt;&#x2F;span&gt;&lt;span&gt;644 -rw-r--r--   1 james2doyle   LICENSE
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;greping the output&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;show-permissions | grep README.md
-&lt;&#x2F;span&gt;&lt;span&gt;644 -rw-r--r--   1 james2doyle   README.md
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here is the &lt;a href=&quot;http:&#x2F;&#x2F;goo.gl&#x2F;HS9Ar3&quot;&gt;stackoverflow question&lt;&#x2F;a&gt; where I stole this from.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Easy Command Line Reverse Geocoding</title>
-        <published>2013-11-27T00:00:00+00:00</published>
-        <updated>2013-11-27T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/"/>
-        <id>https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/">&lt;p&gt;Using this function you can easily reverse geocode an address into a &lt;em&gt;lat and lang&lt;&#x2F;em&gt; position. This uses the &lt;a href=&quot;http:&#x2F;&#x2F;stedolan.github.io&#x2F;jq&#x2F;&quot;&gt;jq executable&lt;&#x2F;a&gt; and the &lt;a href=&quot;https:&#x2F;&#x2F;developers.google.com&#x2F;maps&#x2F;documentation&#x2F;geocoding&#x2F;#GeocodingRequests&quot;&gt;Google Maps API&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;requirements&quot;&gt;Requirements&lt;&#x2F;h4&gt;
-&lt;p&gt;This little snippet &lt;a href=&quot;http:&#x2F;&#x2F;stedolan.github.io&#x2F;jq&#x2F;&quot;&gt;requires jq to be installed&lt;&#x2F;a&gt;. It is very easy to install.&lt;&#x2F;p&gt;
-&lt;p&gt;From the site:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;jq is a lightweight and flexible command-line JSON processor&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;It is multi-platform, so no worries for Windows users.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the meat:&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;function&quot;&gt;Function&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;reverse-geocode&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# replace spaces with + signs
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;STRING&lt;&#x2F;span&gt;&lt;span&gt;=$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1 &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;tr &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; &amp;#39; &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# save results
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;CURLED&lt;&#x2F;span&gt;&lt;span&gt;=$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;curl &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;http:&#x2F;&#x2F;maps.googleapis.com&#x2F;maps&#x2F;api&#x2F;geocode&#x2F;json?address=&lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;STRING&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;amp;sensor=true&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# save lat and lng
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;LANG&lt;&#x2F;span&gt;&lt;span&gt;=$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;CURLED &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;jq &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.results[0].geometry.location.lng&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;LAT&lt;&#x2F;span&gt;&lt;span&gt;=$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;CURLED &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;jq &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.results[0].geometry.location.lat&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# echo them out
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Lat: &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;LAT&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;, Lang: &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;LANG&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h4 id=&quot;usage&quot;&gt;Usage:&lt;&#x2F;h4&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;reverse-geocode &amp;quot;998 Oxford Street E, London ON, N5Y 3K7&amp;quot;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This return the curl results as well as the Lat and Lang output for the location.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Grunt Highlight Plugin</title>
-        <published>2013-11-25T00:00:00+00:00</published>
-        <updated>2013-11-25T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/grunt-highlight/"/>
-        <id>https://ohdoylerules.com/personal-project/grunt-highlight/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/grunt-highlight/">&lt;p&gt;Over the weekend, in a couple hours, I wrote this grunt plugin for &lt;a href=&quot;http:&#x2F;&#x2F;highlightjs.org&quot;&gt;Highlight.js&lt;&#x2F;a&gt;. I know that &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;chjj&#x2F;marked&quot;&gt;marked&lt;&#x2F;a&gt; does an excellent job of parsing markdown, and can also use highlight, but I wanted something I could use in &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;assemble&#x2F;assemble&#x2F;&quot;&gt;assemble&lt;&#x2F;a&gt; for HTML parsing or full css&#x2F;js files.&lt;&#x2F;p&gt;
-&lt;p&gt;This was made much easier thanks to the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;yeoman&#x2F;generator-gruntplugin&quot;&gt;yeoman-gruntplugin&lt;&#x2F;a&gt; project.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;getting-started&quot;&gt;Getting Started&lt;&#x2F;h3&gt;
-&lt;p&gt;This plugin requires Grunt.&lt;&#x2F;p&gt;
-&lt;p&gt;If you haven&#x27;t used &lt;a href=&quot;http:&#x2F;&#x2F;gruntjs.com&#x2F;&quot;&gt;Grunt&lt;&#x2F;a&gt; before, be sure to check out the &lt;a href=&quot;http:&#x2F;&#x2F;gruntjs.com&#x2F;getting-started&quot;&gt;Getting Started&lt;&#x2F;a&gt; guide, as it explains how to create a &lt;a href=&quot;http:&#x2F;&#x2F;gruntjs.com&#x2F;sample-gruntfile&quot;&gt;Gruntfile&lt;&#x2F;a&gt; as well as install and use Grunt plugins. Once you&#x27;re familiar with that process, you may install this plugin with this command:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;npm&lt;&#x2F;span&gt;&lt;span&gt; install grunt-highlight&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; --save-dev
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;grunt&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;loadNpmTasks&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;grunt-highlight&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;the-highlight-task&quot;&gt;The &amp;quot;highlight&amp;quot; task&lt;&#x2F;h3&gt;
-&lt;h4 id=&quot;overview&quot;&gt;Overview&lt;&#x2F;h4&gt;
-&lt;p&gt;In your project&#x27;s Gruntfile, add a section named &lt;code&gt;highlight&lt;&#x2F;code&gt; to the data object passed into &lt;code&gt;grunt.initConfig()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;grunt&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;initConfig&lt;&#x2F;span&gt;&lt;span&gt;({
-&lt;&#x2F;span&gt;&lt;span&gt;  highlight: {
-&lt;&#x2F;span&gt;&lt;span&gt;    task: {
-&lt;&#x2F;span&gt;&lt;span&gt;      options: {
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; Task-specific options go here.
-&lt;&#x2F;span&gt;&lt;span&gt;      },
-&lt;&#x2F;span&gt;&lt;span&gt;      your_target: {
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; Target-specific file lists and&#x2F;or options go here.
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h4 id=&quot;options&quot;&gt;Options&lt;&#x2F;h4&gt;
-&lt;h5 id=&quot;options-lang&quot;&gt;options.lang&lt;&#x2F;h5&gt;
-&lt;p&gt;Type: &lt;code&gt;Boolean&lt;&#x2F;code&gt;
-Default value: &lt;code&gt;false&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;If you know the highlight language, use this.&lt;&#x2F;p&gt;
-&lt;h5 id=&quot;options-usecheerio&quot;&gt;options.useCheerio&lt;&#x2F;h5&gt;
-&lt;p&gt;Type: &lt;code&gt;Boolean&lt;&#x2F;code&gt;
-Default value: &lt;code&gt;true&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;You target files are HTML and you want to parse over them and highlight code blocks. &lt;em&gt;Turn off for raw code input&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;h5 id=&quot;options-selector&quot;&gt;options.selector&lt;&#x2F;h5&gt;
-&lt;p&gt;Type: &lt;code&gt;Boolean&lt;&#x2F;code&gt;
-Default value: &lt;code&gt;pre code&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;This is what cheerio will be looking for as code block in your HTML. &lt;em&gt;Only used when useCheerio is true&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;usage-examples&quot;&gt;Usage Examples&lt;&#x2F;h4&gt;
-&lt;h5 id=&quot;default-options&quot;&gt;Default Options&lt;&#x2F;h5&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;grunt&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;initConfig&lt;&#x2F;span&gt;&lt;span&gt;({
-&lt;&#x2F;span&gt;&lt;span&gt;  highlight: {
-&lt;&#x2F;span&gt;&lt;span&gt;    task: {
-&lt;&#x2F;span&gt;&lt;span&gt;      options: {},
-&lt;&#x2F;span&gt;&lt;span&gt;      files: {
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;dest&#x2F;out.html&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;: [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;src&#x2F;in.html&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;],
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h5 id=&quot;full-code-files&quot;&gt;Full Code Files&lt;&#x2F;h5&gt;
-&lt;p&gt;If you want to highlight an entire file then use the following:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;grunt&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;initConfig&lt;&#x2F;span&gt;&lt;span&gt;({
-&lt;&#x2F;span&gt;&lt;span&gt;  highlight: {
-&lt;&#x2F;span&gt;&lt;span&gt;    task: {
-&lt;&#x2F;span&gt;&lt;span&gt;      options: {
-&lt;&#x2F;span&gt;&lt;span&gt;        useCheerio: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;        lang: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;javascript&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; treat the file as a javascript file
-&lt;&#x2F;span&gt;&lt;span&gt;      },
-&lt;&#x2F;span&gt;&lt;span&gt;      files: {
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;dest&#x2F;highlighted.html&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;: [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;src&#x2F;bunch-o-javascript.js&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;],
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h5 id=&quot;many-files&quot;&gt;Many Files&lt;&#x2F;h5&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;grunt&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;initConfig&lt;&#x2F;span&gt;&lt;span&gt;({
-&lt;&#x2F;span&gt;&lt;span&gt;  highlight: {
-&lt;&#x2F;span&gt;&lt;span&gt;    scripts: {
-&lt;&#x2F;span&gt;&lt;span&gt;      options: {
-&lt;&#x2F;span&gt;&lt;span&gt;        useCheerio: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;        lang: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;javascript&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;      },
-&lt;&#x2F;span&gt;&lt;span&gt;      files: {
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;javascript.html&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;: [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;src&#x2F;script.js&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;]
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    },
-&lt;&#x2F;span&gt;&lt;span&gt;    styles: {
-&lt;&#x2F;span&gt;&lt;span&gt;      options: {
-&lt;&#x2F;span&gt;&lt;span&gt;        useCheerio: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;        lang: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;css&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;      },
-&lt;&#x2F;span&gt;&lt;span&gt;      files: {
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;stylesheet.html&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;: [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;src&#x2F;style.css&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;]
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Check out the project &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;grunt-highlight&quot;&gt;on github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Decrypt-Encrypt Functions From Command Line</title>
-        <published>2013-11-22T00:00:00+00:00</published>
-        <updated>2013-11-22T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/"/>
-        <id>https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/">&lt;h3 id=&quot;preamble&quot;&gt;Preamble&lt;&#x2F;h3&gt;
-&lt;p&gt;I have been reading about encryption and security since the whole NSA&#x2F;Edward Snowden thing. It is pretty intense stuff. Most of the security comes from the philosophy of &amp;quot;security through obfuscation&amp;quot;. What this means, is that you are making it extremely difficult (expensive, time-consuming) to try and look at your &amp;quot;stuff&amp;quot;.&lt;&#x2F;p&gt;
-&lt;p&gt;I would suggest reading &lt;a href=&quot;http:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Key_size&quot;&gt;this article on &amp;quot;Key Size&amp;quot;&lt;&#x2F;a&gt;. This is probably my favorite quote from the article:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;With a key of length &lt;em&gt;n&lt;&#x2F;em&gt; bits, there are &lt;em&gt;2n&lt;&#x2F;em&gt; possible keys. This number grows very rapidly as &lt;em&gt;n&lt;&#x2F;em&gt; increases. Moore&#x27;s law suggests that computing power doubles roughly every 18 to 24 months, but even this doubling effect leaves the larger symmetric key lengths currently considered acceptable well out of reach.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;The best thing you can do for this type of encryption is &lt;a href=&quot;https:&#x2F;&#x2F;tech.dropbox.com&#x2F;2012&#x2F;04&#x2F;zxcvbn-realistic-password-strength-estimation&#x2F;&quot;&gt;pick a good password&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;code&quot;&gt;Code&lt;&#x2F;h3&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# take in a file and output an encrypted one
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;encrypt&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# take in a file and output a new one with a `.enc` extension
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;openssl&lt;&#x2F;span&gt;&lt;span&gt; rc4&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -in &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -out &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;.enc
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.enc created&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# reverse of encrypt()
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;decrypt&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;FILENAME&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# save the old filename
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# decrypt the file and save it to a file with no `.enc` extension
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;openssl&lt;&#x2F;span&gt;&lt;span&gt; rc4&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -d -in &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -out &lt;&#x2F;span&gt;&lt;span&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;FILENAME&lt;&#x2F;span&gt;&lt;span&gt;%.*}
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; decrypted&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This still leave an &amp;quot;open&amp;quot; file when the file is encrypted. Remember to remove the file securely. You can use &lt;code&gt;shred&lt;&#x2F;code&gt; or &lt;code&gt;gshred&lt;&#x2F;code&gt; (for OSX). Here is the info from the &lt;code&gt;--help&lt;&#x2F;code&gt; output of gshred:&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Overwrite the specified FILE(s) repeatedly, in order to make it harder
-for even very expensive hardware probing to recover the data.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;Here is the function that I found to be pretty good:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# overwrite &amp;#39;my-unsafe-file.txt&amp;#39; 3 times, with zeros (nulls) and then remove the file
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;gshred --iterations&lt;&#x2F;span&gt;&lt;span&gt;=3&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; --zero --remove&lt;&#x2F;span&gt;&lt;span&gt; my-unsafe-file.txt
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Note: I used RC4 instead of 3DES because it is faster (95% slower than RC4), but it is not as secure.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;references&quot;&gt;References:&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;osxdaily.com&#x2F;2012&#x2F;01&#x2F;30&#x2F;encrypt-and-decrypt-files-with-openssl&#x2F;&quot;&gt;Encrypt &amp;amp; Decrypt Files from the Command Line with OpenSSL&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;blog.commandlinekungfu.com&#x2F;2009&#x2F;05&#x2F;episode-32-wiping-securely.html&quot;&gt;Wiping Securely&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;zombe.es&#x2F;post&#x2F;4078724716&#x2F;openssl-cipher-selection&quot;&gt;OpenSSL Cipher Selection&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Get Wordpress via Command Line</title>
-        <published>2013-11-21T00:00:00+00:00</published>
-        <updated>2013-11-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/wordpress-via-command-line/"/>
-        <id>https://ohdoylerules.com/snippets/wordpress-via-command-line/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/wordpress-via-command-line/">&lt;p&gt;All the cool kids are using the command line these days. This allows you to run quick commands and little functions that would be too tedious to run with a GUI or just clicking around.&lt;&#x2F;p&gt;
-&lt;p&gt;A while ago I added this little code snippet to be .bashrc file. It means I can run &lt;code&gt;download-wordpress&lt;&#x2F;code&gt; in an empty folder and then it will go and grab the latest archive, unzip it, and remove the junk.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;download-wordpress &lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;wget&lt;&#x2F;span&gt;&lt;span&gt; http:&#x2F;&#x2F;wordpress.org&#x2F;latest.tar.gz &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# get wordpress
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;tar&lt;&#x2F;span&gt;&lt;span&gt; xfz latest.tar.gz &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# unzip the archive
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;mv&lt;&#x2F;span&gt;&lt;span&gt; wordpress&#x2F;* .&#x2F; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# move the files to the root of this directory
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;rmdir&lt;&#x2F;span&gt;&lt;span&gt; .&#x2F;wordpress&#x2F; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# delete the empty directory
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;rm -f&lt;&#x2F;span&gt;&lt;span&gt; latest.tar.gz &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# delete the archive
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;wordpress installed&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# let me know we are done
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This is a handy function. You can really use it for any CMS or Zip file you have to grab on the regular. Just remember to run this in an &lt;em&gt;empty directory&lt;&#x2F;em&gt;, or it will overwrite everything and it will make a huge mess.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>HostMonster PHPMailer Settings</title>
-        <published>2013-11-19T00:00:00+00:00</published>
-        <updated>2013-11-19T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/hostmonster-phpmailer/"/>
-        <id>https://ohdoylerules.com/snippets/hostmonster-phpmailer/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/hostmonster-phpmailer/">&lt;p&gt;God Damn!! This one was a b*tch to get right. I have a small plugin for a site that makes doing AJAX contact forms a breeze.&lt;&#x2F;p&gt;
-&lt;p&gt;But, of course, it likes to be a pain in the ass when I am trying to set it up. Also you usually have to be on the correct domain to allow the script to send the right email. So doubly annoying.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the code that worked for me:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;$mail = new PHPMailer; &#x2F;&#x2F; basic class declaration
-&lt;&#x2F;span&gt;&lt;span&gt;$mail-&amp;gt;isSMTP(); &#x2F;&#x2F; duh!
-&lt;&#x2F;span&gt;&lt;span&gt;$mail-&amp;gt;SMTPDebug = 0; &#x2F;&#x2F; no debug
-&lt;&#x2F;span&gt;&lt;span&gt;$mail-&amp;gt;SMTPAuth = true; &#x2F;&#x2F; yes to auth please
-&lt;&#x2F;span&gt;&lt;span&gt;$mail-&amp;gt;Port = 26; &#x2F;&#x2F; nope not port 25, 26!!
-&lt;&#x2F;span&gt;&lt;span&gt;$mail-&amp;gt;Host = &amp;#39;host286.hostmonster.com&amp;#39;;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now your host may differ. I used &lt;a href=&quot;http:&#x2F;&#x2F;mxtoolbox.com&#x2F;&quot;&gt;this tool&lt;&#x2F;a&gt; to check the MX records for the domain. After the check is complete, you will see a small table showing the hostname, IP address, TTL, and some links. &lt;strong&gt;Click &amp;quot;SMTP Test&amp;quot;&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Once that text completes, you will see another table. The first result is the &amp;quot;SMTP Reverse Banner Check&amp;quot;. Copy the hostname, which is the domain in that value field.&lt;&#x2F;p&gt;
-&lt;p&gt;Hopefully this works for you. I had a hell of a time getting the correct settings. &lt;em&gt;My pain is your gain&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>GoDaddy Email on Digital Ocean</title>
-        <published>2013-11-18T00:00:00+00:00</published>
-        <updated>2013-11-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/demo/godaddy-digital-ocean/"/>
-        <id>https://ohdoylerules.com/demo/godaddy-digital-ocean/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/demo/godaddy-digital-ocean/">&lt;p&gt;I was recently trying to send an email to a domain I had purchased on GoDaddy but had hosting on &lt;a href=&quot;https:&#x2F;&#x2F;www.digitalocean.com&#x2F;?refcode=802f151adea5&quot;&gt;Digital Ocean&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I sent the email and a couple hours later it bounced. This wasn&#x27;t good. My email was going to GoDadddy but I want the site &lt;em&gt;hosted&lt;&#x2F;em&gt; on Digital Ocean.&lt;&#x2F;p&gt;
-&lt;p&gt;So I had to find how to keep the domain hosted on Digital Ocean but the email needs to stay on GoDaddy servers.&lt;&#x2F;p&gt;
-&lt;p&gt;Here are the DNS settings I used:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;do-records1.png&quot; title=&quot;GoDaddy Digital Ocean DNS Records&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;do-records1.png&quot; alt=&quot;GoDaddy Digital Ocean DNS Records&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Your settings may differ, so please follow these instructions in order to check if your settings are correct:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Log into GoDaddy&lt;&#x2F;li&gt;
-&lt;li&gt;Launch the domain you are looking to check&lt;&#x2F;li&gt;
-&lt;li&gt;Go to the email tab&lt;&#x2F;li&gt;
-&lt;li&gt;Hover over tools and click &amp;quot;Server Settings&amp;quot;&lt;&#x2F;li&gt;
-&lt;li&gt;You will see a popup showing all the settings&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;There you can see that there are a bunch of records listed. These are the ones for your specific domain.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;do-records2.png&quot; title=&quot;GoDaddy Default MX and DNS Records&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;do-records2.png&quot; alt=&quot;GoDaddy Default MX and DNS Records&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Hopefully this was helpful because it took a long time to figure out! It is even more painful because the records take a while to propogate. Boo!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Github Wiki To HTML</title>
-        <published>2013-11-17T00:00:00+00:00</published>
-        <updated>2013-11-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/github-wiki-to-html/"/>
-        <id>https://ohdoylerules.com/personal-project/github-wiki-to-html/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/github-wiki-to-html/">&lt;p&gt;Have you ever wanted to convert a Github wiki to a set of HTML pages? This can be an easy way to generate new gh-pages (github web pages) based on the projects Wiki.&lt;&#x2F;p&gt;
-&lt;p&gt;As of &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;blog&#x2F;699-making-github-more-open-git-backed-wikis&quot;&gt;August 2010&lt;&#x2F;a&gt;, you can actually clone a repositories wiki to your local machine just by adding .wiki at the end.&lt;&#x2F;p&gt;
-&lt;p&gt;This pulls down all the wiki pages in their current format, by default this is &lt;code&gt;.md&lt;&#x2F;code&gt; files.&lt;&#x2F;p&gt;
-&lt;p&gt;Now what can you do with these files? Well how about converting them to HTML so that you can use them in your gh-pages repo?&lt;&#x2F;p&gt;
-&lt;p&gt;After cloning the &lt;em&gt;.wiki&lt;&#x2F;em&gt; repo to your local, you can create a script to convert all the files to HTML.&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;first &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;chjj&#x2F;marked&quot;&gt;install marked globally&lt;&#x2F;a&gt; via NPM&lt;&#x2F;li&gt;
-&lt;li&gt;make a directory called &lt;code&gt;html&lt;&#x2F;code&gt; in the root of the repo&lt;&#x2F;li&gt;
-&lt;li&gt;create a file called &lt;code&gt;convert.sh&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;run &lt;code&gt;chmod +x convert.sh&lt;&#x2F;code&gt; on that file to allow execution&lt;&#x2F;li&gt;
-&lt;li&gt;paste the following into the file:&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;#!&#x2F;bin&#x2F;bash
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# for each md file in the directory
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt; file &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;in &lt;&#x2F;span&gt;&lt;span&gt;*.md
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;do
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# convert each file to html and place it in the html directory
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# --gfm == use github flavoured markdown
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;marked -o&lt;&#x2F;span&gt;&lt;span&gt; html&#x2F;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;file&lt;&#x2F;span&gt;&lt;span&gt;.html $&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;file --gfm
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;done
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now if you look in the &lt;code&gt;html&lt;&#x2F;code&gt; directory, you will see all the markdown files have been converted and are in that folder.&lt;&#x2F;p&gt;
-&lt;p&gt;In the next week or so, I will write a new post about how to use this method and the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;assemble&#x2F;assemble&quot; title=&quot;Grunt Assemble Project&quot;&gt;grunt assemble&lt;&#x2F;a&gt; plugin to make simple pages.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Phile CMS</title>
-        <published>2013-11-04T00:00:00+00:00</published>
-        <updated>2013-11-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/phile-cms/"/>
-        <id>https://ohdoylerules.com/personal-project/phile-cms/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/phile-cms/">&lt;p&gt;After being a upset at the progress with Pico, myself and a developer from Germany(&lt;a href=&quot;https:&#x2F;&#x2F;twitter.com&#x2F;neoblack&quot; title=&quot;Frank Twitter&quot;&gt;Frank&lt;&#x2F;a&gt;) have developed a fork project.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;http:&#x2F;&#x2F;philecms.github.io&#x2F;Phile&#x2F;&quot; title=&quot;PhileCMS Homepage&quot;&gt;
-    &lt;img src=&quot;&#x2F;images&#x2F;phile-logo.png&quot; alt=&quot;PhileCMS Logo&quot;&gt;
-  &lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;The project is &lt;a href=&quot;http:&#x2F;&#x2F;philecms.github.io&#x2F;Phile&#x2F;&quot; title=&quot;PhileCMS Homepage&quot;&gt;PhileCMS&lt;&#x2F;a&gt;. It maintains the philosophy of Pico, being fast and small, but it makes a lot of improvements on the core. Most the project is now OOP based with classes and models.&lt;&#x2F;p&gt;
-&lt;p&gt;Also the parser and the template engine have been pushed into services. Which means they can be overloaded and replaced with different ones. Don&#x27;t like Markdown? Use a plugin for TextTile instead. Don&#x27;t like &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;personal-project&#x2F;phile-cms&#x2F;twig.sensiolabs.org&quot;&gt;Twig&lt;&#x2F;a&gt;? Replace it with &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;pyrocms&#x2F;lex&quot;&gt;Lex&lt;&#x2F;a&gt;!&lt;&#x2F;p&gt;
-&lt;p&gt;The hooks system was completely replaced with an Evented system. The plugins have also changed. They now have a config.php file that is used instead of having to write your own file reader for each plugin.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;so-why-use-this-over-pico&quot;&gt;So why use this over Pico?&lt;&#x2F;h3&gt;
-&lt;p&gt;Here is a small list of differences in design from Pico:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;OOP based (Classes)&lt;&#x2F;li&gt;
-&lt;li&gt;Events system&lt;&#x2F;li&gt;
-&lt;li&gt;Parser Overloading&lt;&#x2F;li&gt;
-&lt;li&gt;Template Engine Overloading&lt;&#x2F;li&gt;
-&lt;li&gt;Performance Improvements (&lt;em&gt;33% to 65% speed increase&lt;&#x2F;em&gt;)&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;The main increase in speed is when there are multiple pages. Once you get to 20 pages you see a minumum of a 50% increase in load times.&lt;&#x2F;p&gt;
-&lt;p&gt;I have actually converted this site to run on Phile. It is probably the first site in production to be using it. I also use the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;PhileCMS&#x2F;Sundown-Parser-Plugin&quot;&gt;Sundown Plugin&lt;&#x2F;a&gt; I wrote since I have &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;chobie&#x2F;php-sundown&quot;&gt;PHP-Sundown&lt;&#x2F;a&gt; installed on my server.&lt;&#x2F;p&gt;
-&lt;p&gt;Anyway, check out the project. It is pretty cool and I am very happy with the work of Frank.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;PhileCMS&#x2F;Phile&quot;&gt;Github Repo&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;philecms.github.io&#x2F;Phile&#x2F;&quot; title=&quot;PhileCMS Homepage&quot;&gt;Homepage&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Google Drive Flat SVG Logo</title>
-        <published>2013-11-01T00:00:00+00:00</published>
-        <updated>2013-11-01T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/google-drive-svg-logo/"/>
-        <id>https://ohdoylerules.com/personal-project/google-drive-svg-logo/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/google-drive-svg-logo/">&lt;p&gt;Recently we needed a bunch of vector logos for a blog post. So again, in typical fashion, I had to craft a vector logo from scratch. Luckily the Google Drive logo is pretty simple. Just 3 shapes. All trapezoids (?).&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;google-drive.svg&quot; target=&quot;_blank&quot; title=&quot;google drive svg vector&quot;&gt;&lt;img width=&quot;300&quot; alt=&quot;google drive svg vector&quot; src=&quot;&#x2F;images&#x2F;google-drive.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Docracy SVG logo</title>
-        <published>2013-10-31T00:00:00+00:00</published>
-        <updated>2013-10-31T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/docracy-logo-svg/"/>
-        <id>https://ohdoylerules.com/personal-project/docracy-logo-svg/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/docracy-logo-svg/">&lt;p&gt;The other founder of my company (&lt;a href=&quot;http:&#x2F;&#x2F;warpaintmedia.ca&quot; title=&quot;WARPAINT Media Homepage&quot;&gt;WARPAINT Media&lt;&#x2F;a&gt;) was working on a blog post where we list all the PAAS&#x2F;SAAS tools that we use. One of them is &lt;a href=&quot;https:&#x2F;&#x2F;www.docracy.com&#x2F;&quot; title=&quot;Docracy Homepage&quot;&gt;Docracy&lt;&#x2F;a&gt;. It is a site that shares free legal documents. You can modify and fork them to your own account, they have signing features as well.&lt;&#x2F;p&gt;
-&lt;p&gt;Well again, I was unable to find the vector logo of their icon. So in my typical fashion, I recreated it. You can see it below.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;docracy.svg&quot; title=&quot;docracy svg vector&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;docracy svg vector&quot; src=&quot;&#x2F;images&#x2F;docracy.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Assemble Starter</title>
-        <published>2013-10-17T00:00:00+00:00</published>
-        <updated>2013-10-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/assemble-starter/"/>
-        <id>https://ohdoylerules.com/personal-project/assemble-starter/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/assemble-starter/">&lt;p&gt;Assemble starter is my starting point for any of my static &lt;a href=&quot;http:&#x2F;&#x2F;assemble.io&#x2F;&quot; title=&quot;Grunt Assemble Homepage&quot;&gt;assemble sites&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;You can find the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;assemble-starter&quot; title=&quot;Assemble Starter Repo&quot;&gt;project on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I often use assemble when I am building themes. The reason being you can do quick templating (thanks to &lt;a href=&quot;http:&#x2F;&#x2F;handlebarsjs.com&#x2F;&quot; title=&quot;Handlebars Homepage&quot;&gt;Handlebars&lt;&#x2F;a&gt;), it compiles fast, requires no server, and I am using &lt;a href=&quot;http:&#x2F;&#x2F;gruntjs.com&#x2F;&quot; title=&quot;Grunt Homepage&quot;&gt;Grunt&lt;&#x2F;a&gt; anyway.&lt;&#x2F;p&gt;
-&lt;p&gt;Extra grunt tasks:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;grunt-contrib-watch -- &lt;em&gt;live reload and compiles on save&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;grunt-sass -- &lt;em&gt;C lib SASS action&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;grunt-contrib-concat -- &lt;em&gt;combine things&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;grunt-autoprefixer -- &lt;em&gt;prefix that ugliness&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Modernizr Checks:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;cssanimations&lt;&#x2F;li&gt;
-&lt;li&gt;csstransforms&lt;&#x2F;li&gt;
-&lt;li&gt;csstransforms3d&lt;&#x2F;li&gt;
-&lt;li&gt;svg&lt;&#x2F;li&gt;
-&lt;li&gt;touch&lt;&#x2F;li&gt;
-&lt;li&gt;shiv&lt;&#x2F;li&gt;
-&lt;li&gt;cssclasses&lt;&#x2F;li&gt;
-&lt;li&gt;teststyles&lt;&#x2F;li&gt;
-&lt;li&gt;testprop&lt;&#x2F;li&gt;
-&lt;li&gt;testallprops&lt;&#x2F;li&gt;
-&lt;li&gt;prefixes&lt;&#x2F;li&gt;
-&lt;li&gt;domprefixes&lt;&#x2F;li&gt;
-&lt;li&gt;css_filters&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Other Libs:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;swipejs.com&#x2F;&quot; title=&quot;Swipe.js Homepage&quot;&gt;swipe.js&lt;&#x2F;a&gt; -- &lt;em&gt;awesome slider lib&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;saltjs&quot;&gt;salt.js&lt;&#x2F;a&gt; -- &lt;em&gt;my micro selector lib&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Javascript Goodies:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;prefix() -- &lt;em&gt;detect the js&#x2F;css prefixes for different browsers&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;li&gt;xhr() -- &lt;em&gt;function for no-jQuery AJAX&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;CSS Goodies:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;normalize.scss&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;You can find the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;assemble-starter&quot; title=&quot;Assemble Starter Repo&quot;&gt;project on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>pico-download plugin</title>
-        <published>2013-09-18T00:00:00+00:00</published>
-        <updated>2013-09-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pico-download-plugin/"/>
-        <id>https://ohdoylerules.com/personal-project/pico-download-plugin/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pico-download-plugin/">&lt;p&gt;I created a plugin to force files to download in &lt;a href=&quot;http:&#x2F;&#x2F;pico.dev7studios.com&quot;&gt;PicoCMS&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;I needed this because I wanted to PDFs to download and not just render in the browser.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;usage&quot;&gt;Usage&lt;&#x2F;h3&gt;
-&lt;p&gt;Place your files in the content folder. Then replace the word &lt;code&gt;content&#x2F;&lt;&#x2F;code&gt; in the url with the word &lt;code&gt;download&#x2F;&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;The download folder can be controlled in the plugin file. Default for downloading is &lt;code&gt;content&#x2F;&lt;&#x2F;code&gt;.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;example&quot;&gt;Example&lt;&#x2F;h3&gt;
-&lt;p&gt;If you wanted to render the file in the browser:&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;http:&#x2F;&#x2F;localhost:8888&#x2F;Pico&#x2F;content&#x2F;sub&#x2F;page.md&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Now with this plugin installed, you can force a download:&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;http:&#x2F;&#x2F;localhost:8888&#x2F;Pico&#x2F;download&#x2F;sub&#x2F;page.md&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;more-info&quot;&gt;More info&lt;&#x2F;h3&gt;
-&lt;p&gt;I have added quite a few comments in the plugin so just take a look. It&#x27;s nothing new, just bringing different snippets together.&lt;&#x2F;p&gt;
-&lt;p&gt;You can find the project &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pico_download&quot; title=&quot;james2doyle&#x2F;pico_download&quot;&gt;here on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pico-Useragent Plugin</title>
-        <published>2013-09-15T00:00:00+00:00</published>
-        <updated>2013-09-15T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pico-useragent/"/>
-        <id>https://ohdoylerules.com/personal-project/pico-useragent/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pico-useragent/">&lt;p&gt;I created another plugin for &lt;a href=&quot;http:&#x2F;&#x2F;pico.dev7studios.com&#x2F;&quot;&gt;Pico CMS&lt;&#x2F;a&gt;. It is esentially a clone of my &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;personal-project&#x2F;pyrocms-ua-sniffer-plugin&quot;&gt;pyro-sniffer-plugin&lt;&#x2F;a&gt; for &lt;a href=&quot;http:&#x2F;&#x2F;pyrocms.com&quot; title=&quot;Pyro CMS Homepage&quot;&gt;PyroCMS&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pico_useragent&quot;&gt;Github project&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;This plugin allows you to parse the user agent of the current visitor and then expose that information in an easy to use variable in your twig templates.&lt;&#x2F;p&gt;
-&lt;p&gt;Hopefully that makese sense.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;output&quot;&gt;Output&lt;&#x2F;h3&gt;
-&lt;p&gt;When using the plugin, you get a new variable called &lt;code&gt;browser&lt;&#x2F;code&gt;. The browser variable has the following properties in it when dumped from my computer:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;$browser = array (
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;useragent&amp;#39;   =&amp;gt; &amp;#39;Mozilla&#x2F;5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit&#x2F;537.36 (KHTML, like Gecko) Chrome&#x2F;30.0.1599.37 Safari&#x2F;537.36&amp;#39; &#x2F;&#x2F; full ua string
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;name&amp;#39;        =&amp;gt; &amp;#39;Google Chrome&amp;#39; &#x2F;&#x2F; name of the browser
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;browser&amp;#39;     =&amp;gt; &amp;#39;google-chrome&amp;#39; &#x2F;&#x2F; CSS safe browser name
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;version&amp;#39;     =&amp;gt; &amp;#39;30.0.1599.37&amp;#39; &#x2F;&#x2F; bowser version
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;type&amp;#39;        =&amp;gt; &amp;#39;desktop&amp;#39; &#x2F;&#x2F; device form factor
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;platform&amp;#39;    =&amp;gt; &amp;#39;mac&amp;#39; &#x2F;&#x2F; OS platform
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;#39;pattern&amp;#39;     =&amp;gt; &amp;#39;#(?Version|Chrome|other)[&#x2F; ]+(?[0-9.|a-zA-Z.]*)#&amp;#39; &#x2F;&#x2F; match pattern
-&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;example&quot;&gt;Example&lt;&#x2F;h3&gt;
-&lt;p&gt;I use this example when I want to make small modifications to my CSS. Not unlike how Modernizr is supposed to work. Except modernizr doesn&#x27;t give you browser information.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;html &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;lang&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;en&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;\{\{ browser.browser \}\} \{\{ browser.platform \}\} \{\{ browser.type \}\}&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Here is the output for that html tag:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;html &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;lang&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;en&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;class&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;google-chrome mac desktop&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;I usually use it to normalize issues across different browsers. Like something looking weird in Firefox, so I know I can modify some CSS by using a &lt;code&gt;.firefox&lt;&#x2F;code&gt; parent.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;button &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.25em 1em&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* fix padding in FF *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;firefox &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;button &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.28em 1em&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;use-cases&quot;&gt;Use Cases&lt;&#x2F;h3&gt;
-&lt;ul&gt;
-&lt;li&gt;conditional content&lt;&#x2F;li&gt;
-&lt;li&gt;conditional styles&#x2F;scripts&lt;&#x2F;li&gt;
-&lt;li&gt;layout modifications&lt;&#x2F;li&gt;
-&lt;li&gt;serving specific images&lt;&#x2F;li&gt;
-&lt;li&gt;Modernizr-esque CSS classes&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Here is the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pico_useragent&quot;&gt;Github project&lt;&#x2F;a&gt; again.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>compare multiple md5 hashes</title>
-        <published>2013-09-15T00:00:00+00:00</published>
-        <updated>2013-09-15T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/"/>
-        <id>https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/">&lt;p&gt;Sometimes you need to check a file against a &lt;code&gt;md5&lt;&#x2F;code&gt; hash. This can be annoying. Just look at this output:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# command
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;md5&lt;&#x2F;span&gt;&lt;span&gt; file.xml &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;Downloads&#x2F;file.xml file2.xml
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# output
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;MD5&lt;&#x2F;span&gt;&lt;span&gt; (file.xml) = &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;389a537b7443108f610038b4e4dd549a
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;MD5&lt;&#x2F;span&gt;&lt;span&gt; (&#x2F;Users&#x2F;james2doyle&#x2F;Downloads&#x2F;file.xml) = &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;389a537b7443108f610038b4e4dd549a
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;MD5&lt;&#x2F;span&gt;&lt;span&gt; (file.xml) = &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;389a537b7443108f610038b4e4dd549a
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Well it would be nice to not see all that junk in front of the hash. If they were lined up then it would be easier to compare them. Like so:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# command
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;md5-check&lt;&#x2F;span&gt;&lt;span&gt; file.xml &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;Downloads&#x2F;file.xml file2.xml
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# output
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;389a537b7443108f610038b4e4dd549a
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;389a537b7443108f610038b4e4dd549a
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;389a537b7443108f610038b4e4dd549a
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Better. Here is the &lt;code&gt;md5-check&lt;&#x2F;code&gt; function I wrote to take an array of arguments and then trim out all the garabage.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;md5-check&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt; ARG &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;in &lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;@&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;do
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;temp&lt;&#x2F;span&gt;&lt;span&gt;=$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;md5 &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ARG &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;cut -d&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt; -f2&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;echo &lt;&#x2F;span&gt;&lt;span&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;temp &lt;&#x2F;span&gt;&lt;span&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;tr -d &lt;&#x2F;span&gt;&lt;span&gt;&amp;#39; &amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;done
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;It is also good for saving the output of a md5 hash:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# output into file
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;md5-check&lt;&#x2F;span&gt;&lt;span&gt; Downloads&#x2F;logo.jpg | &amp;gt; check.md5
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;# check the contents of the check.md5 file
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;cat&lt;&#x2F;span&gt;&lt;span&gt; check.md5
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;6ed200ea7afa42e3bd90010fb14b06fd
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Or you can read the file contents and compare it to the file&#x27;s md5 hash:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;md5-check&lt;&#x2F;span&gt;&lt;span&gt; Downloads&#x2F;logo.jpg &amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;cat&lt;&#x2F;span&gt;&lt;span&gt; check.md5
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;this would output like so:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;6ed200ea7afa42e3bd90010fb14b06fd
-&lt;&#x2F;span&gt;&lt;span&gt;6ed200ea7afa42e3bd90010fb14b06fd
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Seems a bit easier to compare the results of the hashes. Although I never really use them, I think it makes sense when you are transfering large files or you are downloading files in chunks.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>jQuery-doodal-js</title>
-        <published>2013-09-09T00:00:00+00:00</published>
-        <updated>2013-09-09T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/jquery-doodal-js/"/>
-        <id>https://ohdoylerules.com/personal-project/jquery-doodal-js/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/jquery-doodal-js/">&lt;p&gt;jQuery.doodal.js is a very simplistic modal plugin for jQuery. It has custom events, allows stacking, and is powered by CSS transitions&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;james2doyle.github.io&#x2F;jquery.doodal.js&#x2F;&quot;&gt;See the demo&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;usage&quot;&gt;Usage&lt;&#x2F;h3&gt;
-&lt;p&gt;Instatiate a new doodal.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;$(&amp;#39;.doodal&amp;#39;).doodal({
-&lt;&#x2F;span&gt;&lt;span&gt;  type: &amp;#39;modal&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  closeclass: &amp;#39;.doodal-close&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  trueclass: &amp;#39;.doodal-true&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  falseclass: &amp;#39;.doodal-false&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;  showclass: &amp;#39;showing&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Those are all the default options so in this specific example I am not actually overwriting anything.&lt;&#x2F;p&gt;
-&lt;p&gt;Now trigger an &lt;code&gt;open&lt;&#x2F;code&gt; to see it:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;$(&amp;#39;#doodal1&amp;#39;).trigger(&amp;#39;open&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;custom-events&quot;&gt;Custom Events&lt;&#x2F;h3&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;em&gt;open&lt;&#x2F;em&gt;: - when the modal starts to open&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;em&gt;afteropen&lt;&#x2F;em&gt;: - after the animation is over and it is open&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;em&gt;ontrue&lt;&#x2F;em&gt;: - for confirms yes button&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;em&gt;onfalse&lt;&#x2F;em&gt;: - for confirms no button&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;em&gt;close&lt;&#x2F;em&gt;: - when the close is clicked&lt;&#x2F;li&gt;
-&lt;li&gt;&lt;em&gt;afterclose&lt;&#x2F;em&gt;: - after the animation is over and it is hidden&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;You can also view the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;jquery.doodal.js&quot;&gt;project on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Grunt Sundown</title>
-        <published>2013-09-08T00:00:00+00:00</published>
-        <updated>2013-09-08T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/grunt-sundown/"/>
-        <id>https://ohdoylerules.com/personal-project/grunt-sundown/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/grunt-sundown/">&lt;p&gt;&lt;strong&gt;grunt-sundown&lt;&#x2F;strong&gt; is a wrapper for &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;benmills&#x2F;robotskirt&quot;&gt;robotskirt&lt;&#x2F;a&gt;(&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;vmg&#x2F;sundown&quot;&gt;Sundown&lt;&#x2F;a&gt;) - a C implementation of &lt;a href=&quot;http:&#x2F;&#x2F;daringfireball.net&#x2F;projects&#x2F;markdown&#x2F;&quot;&gt;Markdown&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;getting-started&quot;&gt;Getting Started&lt;&#x2F;h3&gt;
-&lt;p&gt;This plugin requires Grunt &lt;code&gt;~0.4.1&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;If you haven&#x27;t used &lt;a href=&quot;http:&#x2F;&#x2F;gruntjs.com&#x2F;&quot;&gt;Grunt&lt;&#x2F;a&gt; before, be sure to check out the &lt;a href=&quot;http:&#x2F;&#x2F;gruntjs.com&#x2F;getting-started&quot;&gt;Getting Started&lt;&#x2F;a&gt; guide, as it explains how to create a &lt;a href=&quot;http:&#x2F;&#x2F;gruntjs.com&#x2F;sample-gruntfile&quot;&gt;Gruntfile&lt;&#x2F;a&gt; as well as install and use Grunt plugins. Once you&#x27;re familiar with that process, you may install this plugin with this command:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;npm install grunt-sundown --save-dev
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;grunt.loadNpmTasks(&amp;#39;grunt-sundown&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can find the project &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;grunt-sundown&quot; title=&quot;grunt-sundown on Github&quot;&gt;on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;the-sundown-task&quot;&gt;The &amp;quot;sundown&amp;quot; task&lt;&#x2F;h3&gt;
-&lt;h4 id=&quot;overview&quot;&gt;Overview&lt;&#x2F;h4&gt;
-&lt;p&gt;In your project&#x27;s Gruntfile, add a section named &lt;code&gt;sundown&lt;&#x2F;code&gt; to the data object passed into &lt;code&gt;grunt.initConfig()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;grunt.initConfig({
-&lt;&#x2F;span&gt;&lt;span&gt;  sundown: {
-&lt;&#x2F;span&gt;&lt;span&gt;    target: {
-&lt;&#x2F;span&gt;&lt;span&gt;      options: {
-&lt;&#x2F;span&gt;&lt;span&gt;        extensions: {
-&lt;&#x2F;span&gt;&lt;span&gt;          fenced_code: true
-&lt;&#x2F;span&gt;&lt;span&gt;        },
-&lt;&#x2F;span&gt;&lt;span&gt;        render_flags: {
-&lt;&#x2F;span&gt;&lt;span&gt;          skip_html: true
-&lt;&#x2F;span&gt;&lt;span&gt;        }
-&lt;&#x2F;span&gt;&lt;span&gt;      },
-&lt;&#x2F;span&gt;&lt;span&gt;      files: {
-&lt;&#x2F;span&gt;&lt;span&gt;        &amp;#39;output.html&amp;#39;: [&amp;#39;input1.md&amp;#39;, &amp;#39;input2.md&amp;#39;]
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h4 id=&quot;options&quot;&gt;Options&lt;&#x2F;h4&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;options: {
-&lt;&#x2F;span&gt;&lt;span&gt;  extensions: {
-&lt;&#x2F;span&gt;&lt;span&gt;    autolink: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    fenced_code: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    lax_html_blocks: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    no_intra_emphasis: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    space_headers: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    strikethrough: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    tables: false
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  render_flags: {
-&lt;&#x2F;span&gt;&lt;span&gt;    skip_html: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    skip_style: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    skip_images: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    skip_links: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    expand_tabs: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    safelink: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    toc: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    hard_wrap: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    use_xhtml: false,
-&lt;&#x2F;span&gt;&lt;span&gt;    escape: false
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  separator: &amp;#39;\n\n&amp;#39; &#x2F;&#x2F; concat option for multiple files
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h4 id=&quot;more-information&quot;&gt;More Information&lt;&#x2F;h4&gt;
-&lt;p&gt;You can try your luck on the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;vmg&#x2F;sundown&quot;&gt;Sundown&lt;&#x2F;a&gt; homepage. Or check out some of the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;vmg&#x2F;sundown#bindings&quot;&gt;other wrappers&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Render PHP File With Data</title>
-        <published>2013-08-29T00:00:00+00:00</published>
-        <updated>2013-08-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/render-php-with-data/"/>
-        <id>https://ohdoylerules.com/snippets/render-php-with-data/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/render-php-with-data/">&lt;p&gt;I am modifying an open source CMS to use the &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;snippets&#x2F;render-php-with-data&#x2F;phalconphp.com&#x2F;en&#x2F;&quot; title=&quot;Phalcon PHP Framework&quot;&gt;Phalcon PHP framework&lt;&#x2F;a&gt;, as well as the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;chobie&#x2F;php-sundown&quot; title=&quot;PHP-Sundown&quot;&gt;PHP-Sundown&lt;&#x2F;a&gt; C implementation of Markdown.&lt;&#x2F;p&gt;
-&lt;p&gt;It is a very simple CMS which previously would just echo out compiled HTML. But I am using the Volt template engine in Phalcon. It renders &lt;code&gt;.volt&lt;&#x2F;code&gt; files to native PHP. This means that I cannot just spit out raw HTML. I need to create a render function that passes an array of data to my PHP file.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is that function:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;function renderPhpFile($filename, $vars = null) {
-&lt;&#x2F;span&gt;&lt;span&gt;  if (is_array($vars) &amp;amp;&amp;amp; !empty($vars)) {
-&lt;&#x2F;span&gt;&lt;span&gt;    extract($vars);
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;  ob_start();
-&lt;&#x2F;span&gt;&lt;span&gt;  include $filename;
-&lt;&#x2F;span&gt;&lt;span&gt;  return ob_get_clean();
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&#x2F; usage
-&lt;&#x2F;span&gt;&lt;span&gt;echo renderPhpFile(&amp;#39;views&#x2F;templates&#x2F;index.php&amp;#39;, $view_data);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;This works! It is a handy little function for passing data into a PHP file.&lt;&#x2F;p&gt;
-&lt;p&gt;If you wanted to use an object, you would need to cast it to an array first.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Simple HTML5 Notifications</title>
-        <published>2013-08-29T00:00:00+00:00</published>
-        <updated>2013-08-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/simple-html5-notification/"/>
-        <id>https://ohdoylerules.com/snippets/simple-html5-notification/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/simple-html5-notification/">&lt;p&gt;I was playing around with HTML5 Notifications the other day. They are pretty slick! It allows you to essentially send growl notifications to your desktop from the browser.&lt;&#x2F;p&gt;
-&lt;p&gt;This little function would be used during an event to request permission for notifications and then display it with a simple abstraction of the native API.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;notify&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;body&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;timeout&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;timeout &lt;&#x2F;span&gt;&lt;span&gt;= (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;timeout&lt;&#x2F;span&gt;&lt;span&gt;) ? &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;timeout &lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3000&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Notification&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;requestPermission&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;nf &lt;&#x2F;span&gt;&lt;span&gt;= new Notification(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;title&lt;&#x2F;span&gt;&lt;span&gt;, {
-&lt;&#x2F;span&gt;&lt;span&gt;      body: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;body&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;      iconUrl: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;test.png&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;
-&lt;&#x2F;span&gt;&lt;span&gt;    });
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;nf&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;onshow &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;setTimeout&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;nf&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;close&lt;&#x2F;span&gt;&lt;span&gt;()
-&lt;&#x2F;span&gt;&lt;span&gt;      }, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;timeout&lt;&#x2F;span&gt;&lt;span&gt;)
-&lt;&#x2F;span&gt;&lt;span&gt;    };
-&lt;&#x2F;span&gt;&lt;span&gt;  });
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; usage
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;notify&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;My Title&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;My hot body with a bunch of lorem in it&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;It will then ask for permission, if your page doesn&#x27;t have it already, then show the notification. Right now it just shows a small grey box for the test image.&lt;&#x2F;p&gt;
-&lt;p&gt;The last parameter is for a custom timeout. I like the default of 3 seconds but if you need to you can override it without modifying the function.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pyro Twitter Widget</title>
-        <published>2013-08-08T00:00:00+00:00</published>
-        <updated>2013-08-08T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-twitter-widget/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-twitter-widget/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-twitter-widget/">&lt;p&gt;I created another widget for PyroCMS. This one is for Twitter. I didn&#x27;t find one that I liked or thought was very good, so I created my own. This widget actually uses a 3rd party sub-module, for the Twitter authentication, called &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;J7mbo&#x2F;twitter-api-php&quot; title=&quot;J7mbo&#x2F;twitter-api-php&quot;&gt;twitter-api-php&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here are the current supported (basically just tested) API endpoints:&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;statuses&#x2F;mentions_timeline&lt;&#x2F;li&gt;
-&lt;li&gt;statuses&#x2F;user_timeline&lt;&#x2F;li&gt;
-&lt;li&gt;statuses&#x2F;home_timeline&lt;&#x2F;li&gt;
-&lt;li&gt;statuses&#x2F;retweetsofme&lt;&#x2F;li&gt;
-&lt;li&gt;favorites&#x2F;list&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;Here is the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-twitter-widget&quot; title=&quot;james2doyle&#x2F;pyro-twitter-widget&quot;&gt;widget on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pico Get By Filename Plugin</title>
-        <published>2013-07-27T00:00:00+00:00</published>
-        <updated>2013-07-27T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/"/>
-        <id>https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/">&lt;p&gt;I wrote another small plugin for PicoCMS that actually lets you load files based on the filename. I called it &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pico_get_by_filename&quot; title=&quot;james2doyle&#x2F;pico_get_by_filename&quot;&gt;pico_get_by_filename&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Markdown Logo Vector SVG</title>
-        <published>2013-07-26T00:00:00+00:00</published>
-        <updated>2013-07-26T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/"/>
-        <id>https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/">&lt;p&gt;The markdown logo in SVG vector format. I found this was not that easy to find. So I whipped one up of my own.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;markdown.svg&quot; target=&quot;_blank&quot; title=&quot;Markdown Vector SVG logo&quot;&gt;&lt;img alt=&quot;Markdown Vector SVG logo&quot; src=&quot;&#x2F;images&#x2F;markdown.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>CMS Watch List</title>
-        <published>2013-07-26T00:00:00+00:00</published>
-        <updated>2013-07-26T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/cms-watch-list/"/>
-        <id>https://ohdoylerules.com/web/cms-watch-list/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/cms-watch-list/">&lt;p&gt;I created a new post on WARPAINT about some of the upcoming CMS platforms you may not have heard of.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;warpaintmedia.ca&#x2F;blog&#x2F;2013&#x2F;07&#x2F;cms-watch-list&quot; title=&quot;CMS Watch List&quot;&gt;Here is the article&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>The $100 Website</title>
-        <published>2013-07-23T00:00:00+00:00</published>
-        <updated>2013-07-23T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/the-100-dollar-website/"/>
-        <id>https://ohdoylerules.com/web/the-100-dollar-website/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/the-100-dollar-website/">&lt;p&gt;I wrote a post on WARPAINT Media about people who ask about getting a website for $100. It isn&#x27;t an angry rant, although there is some frustration. It is more about courtesy.&lt;&#x2F;p&gt;
-&lt;p&gt;I wouldn&#x27;t ask you to take $100 for an entire weeks worth of work. So please, don&#x27;t ask me. &lt;a href=&quot;http:&#x2F;&#x2F;warpaintmedia.ca&#x2F;blog&#x2F;2013&#x2F;07&#x2F;the-100-dollar-website&quot; title=&quot;The $100 Website&quot;&gt;Here is the article&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Kube in Styl&#x2F;Rework</title>
-        <published>2013-07-19T00:00:00+00:00</published>
-        <updated>2013-07-19T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/kube-in-stylrework/"/>
-        <id>https://ohdoylerules.com/personal-project/kube-in-stylrework/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/kube-in-stylrework/">&lt;p&gt;I finally finished the conversion of the &lt;a href=&quot;http:&#x2F;&#x2F;imperavi.com&#x2F;kube&#x2F;&quot;&gt;Kube CSS Framework&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;The original is written in &lt;a href=&quot;http:&#x2F;&#x2F;lesscss.org&#x2F;&quot; title=&quot;LESSCSS Homepage&quot;&gt;LESS&lt;&#x2F;a&gt; and I have rewrote it to work with &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;visionmedia&#x2F;styl&quot; title=&quot;visionmedia&#x2F;styl&quot;&gt;Styl&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;visionmedia&#x2F;rework&quot; title=&quot;visionmedia&#x2F;rework&quot;&gt;Rework&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;kube-styl&quot; title=&quot;james2doyle&#x2F;kube-styl&quot;&gt;Here is the github repo&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pico Slider Plugin</title>
-        <published>2013-07-17T00:00:00+00:00</published>
-        <updated>2013-07-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pico-slider-plugin/"/>
-        <id>https://ohdoylerules.com/personal-project/pico-slider-plugin/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pico-slider-plugin/">&lt;p&gt;I wrote a small plugin for the Pico CMS. I recently discovered a very cool PHP-based CMS called, &lt;a href=&quot;http:&#x2F;&#x2F;pico.dev7studios.com&#x2F;&quot; title=&quot;Pico CMS Homepage&quot;&gt;Pico CMS&lt;&#x2F;a&gt;. This CMS is a no-database flat-file CMS. It is really fast and very easy. There was no real way to handle images in the base version. So I developed a plugin that can list images in a folder. I named it pico_slider but it could probably be named pico_image_list because all it really does is expose an image array to the front-end variables. &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pico_slider&quot; title=&quot;james2doyle&#x2F;pico_slider&quot;&gt;Here it is on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>NPM logo SVG</title>
-        <published>2013-07-07T00:00:00+00:00</published>
-        <updated>2013-07-07T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/npm-logo-svg/"/>
-        <id>https://ohdoylerules.com/personal-project/npm-logo-svg/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/npm-logo-svg/">&lt;p&gt;I made a vector version of the logo for &lt;a href=&quot;http:&#x2F;&#x2F;npmjs.org&quot; title=&quot;NPM Homepage&quot;&gt;NPM&lt;&#x2F;a&gt;. Here is the vector version as a SVG.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;&#x2F;images&#x2F;npm-logo.svg&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;npm-logo.svg&quot; alt=&quot;npm vector svg logo&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Apax apache theme in htdocs</title>
-        <published>2013-07-02T00:00:00+00:00</published>
-        <updated>2013-07-02T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/apax-in-htdocs/"/>
-        <id>https://ohdoylerules.com/snippets/apax-in-htdocs/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/apax-in-htdocs/">&lt;p&gt;I was tired of looking at the ugly default no-style of the htdocs file listing. I had seen &lt;a href=&quot;http:&#x2F;&#x2F;adamwhitcroft.com&#x2F;apaxy&#x2F;&quot; title=&quot;Apaxy Homepage&quot;&gt;Apaxy theme&lt;&#x2F;a&gt; before and thought it was really nice. But I couldn&#x27;t figure out how to get it to work with the default htdocs MAMP folder. I tried again tonight, and I got it working without much hassle.&lt;&#x2F;p&gt;
-&lt;ol&gt;
-&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;AdamWhitcroft&#x2F;Apaxy&#x2F;archive&#x2F;master.zip&quot; title=&quot;Apaxy Download Link&quot;&gt;Download Apaxy&lt;&#x2F;a&gt; and move everything from the apaxy folder into your MAMP htdocs folder.&lt;&#x2F;li&gt;
-&lt;li&gt;open &amp;quot;htaccess.txt&amp;quot; and replace &amp;quot;&#x2F;{FOLDERNAME}&#x2F;theme&amp;quot; with &amp;quot;&#x2F;.theme&#x2F;&amp;quot;&lt;&#x2F;li&gt;
-&lt;li&gt;rename the &amp;quot;htaccess.txt&amp;quot; file to &amp;quot;.htaccess&amp;quot; which will hide the file&lt;&#x2F;li&gt;
-&lt;li&gt;rename the &amp;quot;theme&amp;quot; folder to &amp;quot;.theme&amp;quot; which will hide the directory&lt;&#x2F;li&gt;
-&lt;li&gt;go to your localhost url and refresh&lt;&#x2F;li&gt;
-&lt;li&gt;enjoy a not-ugly page&lt;&#x2F;li&gt;
-&lt;&#x2F;ol&gt;
-&lt;p&gt;Now you can edit the files in the &amp;quot;.theme&amp;quot; folder and style your page. I changed the &amp;quot;.wrapper&amp;quot; to have no max-width or margin, this way it was full screen.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;&#x2F;images&#x2F;Screen-Shot-2013-07-02-at-12.38.08-AM.png&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;Screen-Shot-2013-07-02-at-12.38.08-AM.png&quot; alt=&quot;apaxy theme applied to htdocs&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Above is a screenshot of what my htdocs&#x2F;localhost:8888 now looks like.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;optional&quot;&gt;OPTIONAL&lt;&#x2F;h4&gt;
-&lt;p&gt;You can also hide the &amp;quot;.theme&amp;quot; folder. You will see a section that looks
-like this, in your .htaccess file:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;# HIDE &#x2F;theme DIRECTORY
-&lt;&#x2F;span&gt;&lt;span&gt;IndexIgnore .htaccess &#x2F;.theme
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The old version should read &amp;quot;&#x2F;theme&amp;quot; and not &amp;quot;&#x2F;.theme&amp;quot;. If change this
-line, it will NOT show the .theme folder in the localhost listing.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Disqus Comments</title>
-        <published>2013-06-27T00:00:00+00:00</published>
-        <updated>2013-06-27T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/disqus-comments/"/>
-        <id>https://ohdoylerules.com/personal-project/disqus-comments/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/disqus-comments/">&lt;p&gt;I have finally added a decent comment system to this site. I installed Disqus. It is pretty awesome. I have used it before and it is a great system. I have enabled comments on &lt;em&gt;every&lt;&#x2F;em&gt; post on the site.&lt;&#x2F;p&gt;
-&lt;p&gt;I may go back and turn some off but for the most part they are enabled by default. You could be really meta and comment on this post about the new comments! &lt;em&gt;wink wink!&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pyro Github Markdown Field Type</title>
-        <published>2013-06-23T00:00:00+00:00</published>
-        <updated>2013-06-23T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-github-markdown/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-github-markdown/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-github-markdown/">&lt;p&gt;Github flavoured markdown field type for PyroCMS.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the link to the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-github-markdown&quot; title=&quot;pyro-github-markdown field type&quot;&gt;Github
-Repo&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Most of the work for this repo is taken from &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;evansolomon&#x2F;wp-github-flavored-markdown-comments&quot;&gt;GitHub-Flavored Markdown Comments&lt;&#x2F;a&gt; plugin for Wordpress. That repository is also based on &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;michelf&#x2F;php-markdown&#x2F;&quot;&gt;Michel Fortin&#x27;s PHP markdown library&lt;&#x2F;a&gt; with added features from &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;github&#x2F;github-flavored-markdown&quot;&gt;GitHub-flavored Markdown&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;em&gt;All I did was just bring it all together and make it play nice with
-Pyro.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;usage&quot;&gt;&lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;personal-project&#x2F;pyro-github-markdown&#x2F;#usage&quot;&gt;&lt;&#x2F;a&gt;Usage&lt;&#x2F;h3&gt;
-&lt;ul&gt;
-&lt;li&gt;Install the field type as normal.&lt;&#x2F;li&gt;
-&lt;li&gt;Add the field type to a page type or stream&lt;&#x2F;li&gt;
-&lt;li&gt;Enter in your sexy Github Markdown&lt;&#x2F;li&gt;
-&lt;li&gt;Just use &amp;quot;the_field_slug&amp;quot; to render the HTML&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h3 id=&quot;examples&quot;&gt;&lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;personal-project&#x2F;pyro-github-markdown&#x2F;#examples&quot;&gt;&lt;&#x2F;a&gt;Examples&lt;&#x2F;h3&gt;
-&lt;p&gt;Input:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;markdown&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-markdown &quot;&gt;&lt;code class=&quot;language-markdown&quot; data-lang=&quot;markdown&quot;&gt;&lt;span&gt;GitHub-Flavored Markdown Comments
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;=============================
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;Based on &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;[Michel Fortin&amp;#39;s PHP markdown library](https:&#x2F;&#x2F;github.com&#x2F;michelf&#x2F;php-markdown&#x2F;)&lt;&#x2F;span&gt;&lt;span&gt; with added features from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;[GitHub-flavored Markdown](https:&#x2F;&#x2F;github.com&#x2F;github&#x2F;github-flavored-markdown)&lt;&#x2F;span&gt;&lt;span&gt;.
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;* Single linebreaks are treated as new paragraphs
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;* Code &amp;quot;fencing&amp;quot; with three backticks (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;```)
-&lt;&#x2F;span&gt;&lt;span style=&quot;background-color:#bf616a;color:#2b303b;&quot;&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;### Heading 3
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Output:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;GitHub-Flavored Markdown Comments&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Based on &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;https:&#x2F;&#x2F;github.com&#x2F;michelf&#x2F;php-markdown&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;Michel Fortin&amp;#39;s PHP markdown library&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt; with added features from &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;https:&#x2F;&#x2F;github.com&#x2F;github&#x2F;github-flavored-markdown&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;&amp;gt;GitHub-flavored Markdown&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;.&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ul&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;li&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Single linebreaks are treated as new paragraphs&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;li&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;li&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Code &amp;quot;fencing&amp;quot; with three backticks (```)&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;li&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;ul&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h3&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Heading 3&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;h3&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;more-info&quot;&gt;&lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;personal-project&#x2F;pyro-github-markdown&#x2F;#more-info&quot;&gt;&lt;&#x2F;a&gt;More Info!&lt;&#x2F;h3&gt;
-&lt;p&gt;If you need to know more about the caveats of this plugin, please &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;evansolomon&#x2F;wp-github-flavored-markdown-comments&#x2F;blob&#x2F;master&#x2F;README.md&quot;&gt;see
-the
-README&lt;&#x2F;a&gt;
-for the original lib.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;update&quot;&gt;UPDATE&lt;&#x2F;h3&gt;
-&lt;p&gt;I added the ability to preview your results too!&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-github-markdown&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;write.png&quot; alt=&quot;pyro github markdown write preview&quot; &#x2F;&gt;&lt;&#x2F;a&gt;
-&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-github-markdown&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;preview.png&quot; alt=&quot;pyro github markdown preview&quot; &#x2F;&gt;&lt;&#x2F;a&gt;
-Go check out this badboy!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>PyroCMS UA Sniffer Plugin</title>
-        <published>2013-06-23T00:00:00+00:00</published>
-        <updated>2013-06-23T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/"/>
-        <id>https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/">&lt;p&gt;This plugin lets you sniff information from the user agent for use in the frontend. I use it for adding classes or conditional loading of partials and templates.&lt;&#x2F;p&gt;
-&lt;p&gt;You can see the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-sniffer-plugin&quot; title=&quot;pyro-sniffer-plugin github&quot;&gt;github repository here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;This plugin is &lt;strong&gt;not&lt;&#x2F;strong&gt; built on the &lt;a href=&quot;http:&#x2F;&#x2F;ellislab.com&#x2F;codeigniter&#x2F;user-guide&#x2F;libraries&#x2F;user_agent.html&quot;&gt;CodeIgniter User Agent Library&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;The reason I did not use the built in CodeIgniter lib, was because Pyro is only going to have CodeIgniter for a few more months(right?!?!), and I also want to have the information returned in a different way. This plugin is pretty small and only really gets information that is helpful to be used in CSS and Javascript (CSS custom classes and js feature detection&#x2F;fallbacks).&lt;&#x2F;p&gt;
-&lt;p&gt;If you are looking for a plugin that uses the user agent library, check out &lt;a href=&quot;https:&#x2F;&#x2F;www.pyrocms.com&#x2F;store&#x2F;details&#x2F;agent_plugin&quot;&gt;this plugin called Agent&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;usage&quot;&gt;&lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;personal-project&#x2F;pyrocms-ua-sniffer-plugin&#x2F;#usage&quot;&gt;&lt;&#x2F;a&gt;Usage&lt;&#x2F;h3&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;lt;body class=&amp;quot;\{\{ sniffer:get key=&amp;quot;browser|platform|type&amp;quot; \}\}&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;On my Mac running Google Chrome, this would return:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;lt;body class=&amp;quot; google-chrome mac desktop&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;On my iPhone, this would return:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;lt;body class=&amp;quot; apple-mobile-safari ios mobile&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h4 id=&quot;conditional-content&quot;&gt;&lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;personal-project&#x2F;pyrocms-ua-sniffer-plugin&#x2F;#conditional-content&quot;&gt;&lt;&#x2F;a&gt;conditional content&lt;&#x2F;h4&gt;
-&lt;p&gt;This works in 2.2&#x2F;develop. Not sure about 2.3 or 2.1.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;\{\{ if \{ sniffer:get key=&amp;quot;type&amp;quot; \} == &amp;#39;desktop&amp;#39; \}\}
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;div class=&amp;quot;huge-slider&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;div class=&amp;quot;slide&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;img src=&amp;quot;img&#x2F;kitten1.jpg&amp;quot; width=&amp;quot;1400&amp;quot; height=&amp;quot;500&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;div&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;div class=&amp;quot;slide&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;img src=&amp;quot;img&#x2F;puppy1.jpg&amp;quot; width=&amp;quot;1400&amp;quot; height=&amp;quot;500&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;div&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;div class=&amp;quot;slide&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;img src=&amp;quot;img&#x2F;snake1.jpg&amp;quot; width=&amp;quot;1400&amp;quot; height=&amp;quot;500&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;div&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;div&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;\{\{ else \}\}
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;div class=&amp;quot;mobile-logo&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;img src=&amp;quot;img&#x2F;mobile-logo.png&amp;quot; width=&amp;quot;200&amp;quot; height=&amp;quot;200&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;div&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;\{\{ endif \}\}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;here is the full dump of the &lt;code&gt;$results&lt;&#x2F;code&gt; object for my machine:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;$results = array (
-&lt;&#x2F;span&gt;&lt;span&gt;  [&amp;#39;useragent&amp;#39;] =&amp;gt; &amp;#39;Mozilla&#x2F;5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit&#x2F;537.36 (KHTML, like Gecko) Chrome&#x2F;28.0.1500.44 Safari&#x2F;537.36&amp;#39; &#x2F;&#x2F; full ua string
-&lt;&#x2F;span&gt;&lt;span&gt;  [&amp;#39;name&amp;#39;] =&amp;gt; &amp;#39;Google Chrome&amp;#39; &#x2F;&#x2F; name of the browser
-&lt;&#x2F;span&gt;&lt;span&gt;  [&amp;#39;browser&amp;#39;] =&amp;gt; &amp;#39;google-chrome&amp;#39; &#x2F;&#x2F; CSS safe browser name
-&lt;&#x2F;span&gt;&lt;span&gt;  [&amp;#39;version&amp;#39;] =&amp;gt; &amp;#39;28.0.1500.44&amp;#39; &#x2F;&#x2F; bowser version
-&lt;&#x2F;span&gt;&lt;span&gt;  [&amp;#39;type&amp;#39;] =&amp;gt; &amp;#39;desktop&amp;#39; &#x2F;&#x2F; device form factor
-&lt;&#x2F;span&gt;&lt;span&gt;  [&amp;#39;platform&amp;#39;] =&amp;gt; &amp;#39;mac&amp;#39; &#x2F;&#x2F; OS platform
-&lt;&#x2F;span&gt;&lt;span&gt;  [&amp;#39;pattern&amp;#39;] =&amp;gt; &amp;#39;#(?Version|Chrome|other)[&#x2F; ]+(?[0-9.|a-zA-Z.]*)#&amp;#39; &#x2F;&#x2F; match pattern
-&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>rework-math</title>
-        <published>2013-06-23T00:00:00+00:00</published>
-        <updated>2013-06-23T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/rework-math/"/>
-        <id>https://ohdoylerules.com/personal-project/rework-math/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/rework-math/">&lt;p&gt;I created a plugin for &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;visionmedia&#x2F;rework&quot; title=&quot;rework&quot;&gt;Rework&lt;&#x2F;a&gt; CSS preprocessor to do math. Here is the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;rework-math&quot; title=&quot;rework-math&quot;&gt;github repo&lt;&#x2F;a&gt;. It is also my first ever NPM package and it can be found on the website &lt;a href=&quot;https:&#x2F;&#x2F;npmjs.org&#x2F;package&#x2F;rework-math&quot; title=&quot;rework-math on NPM&quot;&gt;here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* input *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: math(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;5+5px&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* output *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;10px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;It also works with the rework-vars plugin.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* input *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;root &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  var-fontSize: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;10px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: math((&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt;(fontSize) * &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;) + 10px);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* output *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;root &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  var-fontSize: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;10px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;30px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>rework-shade</title>
-        <published>2013-06-23T00:00:00+00:00</published>
-        <updated>2013-06-23T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/rework-shade/"/>
-        <id>https://ohdoylerules.com/personal-project/rework-shade/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/rework-shade/">&lt;p&gt;I created another plugin for Rework that makes it easy to do lighten and darken functions. I called it &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;rework-shade&quot; title=&quot;rework-shade github&quot;&gt;rework-shade&lt;&#x2F;a&gt;. This package is also available &lt;a href=&quot;https:&#x2F;&#x2F;npmjs.org&#x2F;package&#x2F;rework-shade&quot; title=&quot;rework-shade on NPM&quot;&gt;on NPM here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the basic usage.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* input *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;body &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;10px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  background: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;shade&lt;&#x2F;span&gt;&lt;span&gt;(rgba(0, 0, 0, 0.5), &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;5&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* using points *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;stuff &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  color: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;shade&lt;&#x2F;span&gt;&lt;span&gt;(rgb(0, 200, 50), &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1.3&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;bright &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  background: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;shade&lt;&#x2F;span&gt;&lt;span&gt;(#004080, 30);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;dark &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  background: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;shade&lt;&#x2F;span&gt;&lt;span&gt;(#fff, -50);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* output *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;body &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;10px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  background: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgb&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;13&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;13&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;13&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.5&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;stuff &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  color: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgb&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;203&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;53&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;bright &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  background: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgb&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;77&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;141&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;205&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;dark &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  background: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgb&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;128&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;128&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;128&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>grunt terminal-notifier setup</title>
-        <published>2013-06-07T00:00:00+00:00</published>
-        <updated>2013-06-07T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/"/>
-        <id>https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/">&lt;p&gt;I just downloaded the new Mountain Lion, finally. One of the biggest new things is the cool little native notifications akin to growl. I thought it would be cool to get a nice notification when my &amp;quot;grunt watch&amp;quot; task finished. First things first. You need to install &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;alloy&#x2F;terminal-notifier&quot; title=&quot;alloy&#x2F;terminal notifier&quot;&gt;terminal-notifier&lt;&#x2F;a&gt;. This allows you to interact with the native OSX notifications system.&lt;&#x2F;p&gt;
-&lt;p&gt;There is a ruby gem and a standalone &amp;quot;.app&amp;quot;. Once this is installed, you will need to grab the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;alextucker&#x2F;grunt-growl&quot; title=&quot;alextucker&#x2F;grunt-growl&quot;&gt;grunt-growl&lt;&#x2F;a&gt; plugin. There are more instructions there for the terminal-notifier app. Now you will need to setup a new task in your gruntfile:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span&gt;growl: {
-&lt;&#x2F;span&gt;&lt;span&gt;  css: {
-&lt;&#x2F;span&gt;&lt;span&gt;    title: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;STYLUS BUILT&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;    message: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;css&#x2F;style.css has been created&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  js: {
-&lt;&#x2F;span&gt;&lt;span&gt;    title: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;JAVASCRIPT BUILT&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;    message: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;dist&#x2F;js&#x2F;scripts.js has been created&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now my watch task looks like this:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span&gt;watch: {
-&lt;&#x2F;span&gt;&lt;span&gt;  scripts: {
-&lt;&#x2F;span&gt;&lt;span&gt;    files: [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;&amp;lt;%= concat.dist.src %&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;],
-&lt;&#x2F;span&gt;&lt;span&gt;    tasks: [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;jshint&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;concat&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;growl:js&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;],
-&lt;&#x2F;span&gt;&lt;span&gt;    options: {}
-&lt;&#x2F;span&gt;&lt;span&gt;  },
-&lt;&#x2F;span&gt;&lt;span&gt;  styles: {
-&lt;&#x2F;span&gt;&lt;span&gt;    files: [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;css&#x2F;*.styl&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;],
-&lt;&#x2F;span&gt;&lt;span&gt;    tasks: [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;stylus&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;growl:css&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;],
-&lt;&#x2F;span&gt;&lt;span&gt;    options: {}
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;You can see that the growl task runs after the initial stylus and javascript watch tasks.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>NudeProject - a starting point for simple websites</title>
-        <published>2013-06-04T00:00:00+00:00</published>
-        <updated>2013-06-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/nudeproject/"/>
-        <id>https://ohdoylerules.com/personal-project/nudeproject/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/nudeproject/">&lt;p&gt;NudeProject is meant to be a starting point for new landing pages, single-page sites, or even just basic mockups. The point is to get me off the ground quickly. It only provides the most basic things that I need most of the time. These include &lt;a href=&quot;http:&#x2F;&#x2F;gruntjs.com&#x2F;&quot; title=&quot;gruntjs homepage&quot;&gt;grunt tasks&lt;&#x2F;a&gt;, &lt;a href=&quot;http:&#x2F;&#x2F;necolas.github.io&#x2F;normalize.css&#x2F;&quot; title=&quot;normalize css&quot;&gt;normalized CSS&lt;&#x2F;a&gt;, &lt;a href=&quot;http:&#x2F;&#x2F;modernizr.com&quot; title=&quot;modernizr&quot;&gt;modernizr&lt;&#x2F;a&gt;, and a &lt;a href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;5659710&quot; title=&quot;modernizr-svg-replace.js&quot;&gt;SVG fallback snippet&lt;&#x2F;a&gt; in javascript. Check out the project &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;nudeproject&quot; title=&quot;james2doyle&#x2F;nudeproject&quot;&gt;on github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;grunt&quot;&gt;grunt&lt;&#x2F;h4&gt;
-&lt;p&gt;included grunt taks&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;clean -- removing files before tasks run&lt;&#x2F;li&gt;
-&lt;li&gt;cssmin -- minify and concat css files&lt;&#x2F;li&gt;
-&lt;li&gt;imagemin -- compress images and jpeg&lt;&#x2F;li&gt;
-&lt;li&gt;svgmin -- compress svg files&lt;&#x2F;li&gt;
-&lt;li&gt;uglify -- minify and concat js&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;stylesheets&quot;&gt;stylesheets&lt;&#x2F;h4&gt;
-&lt;ul&gt;
-&lt;li&gt;normalize.css&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h4 id=&quot;javascript&quot;&gt;javascript&lt;&#x2F;h4&gt;
-&lt;p&gt;modernizr custom build&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;cssanimations&lt;&#x2F;li&gt;
-&lt;li&gt;csstransforms&lt;&#x2F;li&gt;
-&lt;li&gt;csstransforms3d&lt;&#x2F;li&gt;
-&lt;li&gt;csstransitions&lt;&#x2F;li&gt;
-&lt;li&gt;canvas&lt;&#x2F;li&gt;
-&lt;li&gt;audio&lt;&#x2F;li&gt;
-&lt;li&gt;video&lt;&#x2F;li&gt;
-&lt;li&gt;localstorage&lt;&#x2F;li&gt;
-&lt;li&gt;svg&lt;&#x2F;li&gt;
-&lt;li&gt;touch&lt;&#x2F;li&gt;
-&lt;li&gt;webgl&lt;&#x2F;li&gt;
-&lt;li&gt;shiv&lt;&#x2F;li&gt;
-&lt;li&gt;cssclasses&lt;&#x2F;li&gt;
-&lt;li&gt;teststyles&lt;&#x2F;li&gt;
-&lt;li&gt;testprop&lt;&#x2F;li&gt;
-&lt;li&gt;testallprops&lt;&#x2F;li&gt;
-&lt;li&gt;prefixes&lt;&#x2F;li&gt;
-&lt;li&gt;domprefixes&lt;&#x2F;li&gt;
-&lt;li&gt;css_boxsizing&lt;&#x2F;li&gt;
-&lt;li&gt;script_async&lt;&#x2F;li&gt;
-&lt;li&gt;script_defer&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Detect Animation Events in Javascript</title>
-        <published>2013-05-31T00:00:00+00:00</published>
-        <updated>2013-05-31T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/animation-events-in-javascript/"/>
-        <id>https://ohdoylerules.com/snippets/animation-events-in-javascript/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/animation-events-in-javascript/">&lt;p&gt;Whenever I am doing animations that have javascript and CSS, most of the time, I want an callback to fire in javascript when the animations are complete. I have used this event for modals and little UI plugins. Normally, I would have a start event(click or touch) that just adds a class that has a CSS animation attached to it. Lets say we have a class called &#x27;on&#x27;.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;modal&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;on &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;  animation: showModal &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1s &lt;&#x2F;span&gt;&lt;span&gt;ease;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@keyframes &lt;&#x2F;span&gt;&lt;span&gt;showModal {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0% &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    opacity: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;100% &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    opacity: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;So now in javascript I might have a button click that adds &#x27;on&#x27; to my modal. In my javascript I would have a function to detect different animation events(start, iterate and end). Here is the code that I modified from a &lt;a href=&quot;http:&#x2F;&#x2F;www.sitepoint.com&#x2F;css3-animation-javascript-event-handlers&#x2F;&quot; title=&quot;Sitepoint&quot;&gt;SitePoint Article&lt;&#x2F;a&gt; that was posting about the same topic.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pfx &lt;&#x2F;span&gt;&lt;span&gt;= [&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;webkit&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;moz&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;MS&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;o&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;, &amp;quot;&amp;quot;];
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;doAnim&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;element&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;animClass&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;callback&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;l &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pfx&lt;&#x2F;span&gt;&lt;span&gt;.length;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;removeAndCall&lt;&#x2F;span&gt;&lt;span&gt;(){
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;removeEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pfx&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;]+&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span&gt;.callee,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;callback&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for &lt;&#x2F;span&gt;&lt;span&gt;(; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p &lt;&#x2F;span&gt;&lt;span&gt;&amp;lt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;l&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;++) {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(!&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pfx&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;]) {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;type &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;toLowerCase&lt;&#x2F;span&gt;&lt;span&gt;();
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;element&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;classList&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;animClass&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;element&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;pfx&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;]+&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;removeAndCall&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; doAnim(elem, &amp;#39;show&amp;#39;, &amp;#39;AnimationEnd&amp;#39;, function(){
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F;   this function will fire when the animation is finished
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F;   elem.classList.remove(&amp;#39;show&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; });
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;In this particular example I would do:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;doAnim&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;myModalElement&lt;&#x2F;span&gt;&lt;span&gt;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;on&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;AnimationEnd&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(){
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; this function will fire when the animation is finished
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;myModalElement&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;classList&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;remove&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;on&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;So now I have a function that will add a class to an element and then fire my callback when the animation is complete.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>CrunchBase SVG logo</title>
-        <published>2013-05-29T00:00:00+00:00</published>
-        <updated>2013-05-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/crunchbase-svg/"/>
-        <id>https://ohdoylerules.com/personal-project/crunchbase-svg/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/crunchbase-svg/">&lt;p&gt;I needed the CrunchBase logo in a vector so I had to create it from
-scratch.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;crunchbase.svg&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;crunchbase svg vector&quot; src=&quot;&#x2F;images&#x2F;crunchbase.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Startup Canada SVG logos</title>
-        <published>2013-05-29T00:00:00+00:00</published>
-        <updated>2013-05-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/startup-canada-svg/"/>
-        <id>https://ohdoylerules.com/personal-project/startup-canada-svg/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/startup-canada-svg/">&lt;p&gt;I had to create these SVGs for the new &lt;a href=&quot;http:&#x2F;&#x2F;spotlander.com&quot; title=&quot;Spotlander&quot;&gt;Spotlander&lt;&#x2F;a&gt; website. They are 2 of them, one for the parent company; Startup Canada. The last one is for the divisions, in this case: Startup London. I figured I would share.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;startupcanada.svg&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;startupcanada svg vector&quot; src=&quot;&#x2F;images&#x2F;startupcanada.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;startuplondon.svg&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;startuplondon svg vector&quot; src=&quot;&#x2F;images&#x2F;startuplondon.svg&quot; &gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Modernizr SVG Fallback to PNG</title>
-        <published>2013-05-27T00:00:00+00:00</published>
-        <updated>2013-05-27T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/"/>
-        <id>https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/">&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;githubgistlogo.png&quot; alt=&quot;Github Gists Logo&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I have been building a small project boilerplate for when I am starting new projects. I wrote this small snippet based on &lt;a href=&quot;http:&#x2F;&#x2F;toddmotto.com&#x2F;mastering-svg-use-for-a-retina-web-fallbacks-with-png-script&#x2F;&quot; title=&quot;Todd Motto - mastering-svg-use-for-a-retina-web-fallbacks-with-png-script&quot;&gt;this article&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;The only changes I made were wrapping it in a closure and combining all the vars to make it smaller. Of course your minifier would do this anyway unless you are using it inline after including Modernizr.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;james2doyle&#x2F;5659710&quot; title=&quot;modernizr-svg-replace.js&quot;&gt;Here is the gist&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Or you can copy the current version from right here.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(!&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;Modernizr&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;svg&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; wrap this in a closure to not expose any conflicts
-&lt;&#x2F;span&gt;&lt;span&gt;  (&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;() {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; grab all images. getElementsByTagName works with IE5.5 and up
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;imgs &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getElementsByTagName&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;img&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;),&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;endsWithDotSvg &lt;&#x2F;span&gt;&lt;span&gt;= &#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;*&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;\.svg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;l &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;imgs&lt;&#x2F;span&gt;&lt;span&gt;.length;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; quick for loop
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt;(; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span&gt;&amp;lt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;l&lt;&#x2F;span&gt;&lt;span&gt;; ++&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;imgs&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;src&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;match&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;endsWithDotSvg&lt;&#x2F;span&gt;&lt;span&gt;)) {
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; replace the png suffix with the svg one
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;imgs&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;src &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;imgs&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;src&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, -&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span&gt;) + &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;png&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;      }
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;  })();
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Custom Google Forms</title>
-        <published>2013-05-22T00:00:00+00:00</published>
-        <updated>2014-09-20T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/custom-google-forms/"/>
-        <id>https://ohdoylerules.com/web/custom-google-forms/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/custom-google-forms/">&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;googleforms.png&quot; alt=&quot;&quot; align=&quot;middle&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;&lt;strong&gt;Update: Google has added the tools to customize a form with logos, colours, fonts, and backgrounds. Use this guide if you want even more custom styles, or if you want to embed the form within another page.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something. After a bit of research I have found a way to create custom forms rather easily.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;how-to-create-a-custom-form&quot;&gt;How to create a custom form&lt;&#x2F;h3&gt;
-&lt;p&gt;This is just the normal way to make a new google form. If you have made one before then just skip this.&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Create a form as normal&lt;&#x2F;li&gt;
-&lt;li&gt;Click the view live form&lt;&#x2F;li&gt;
-&lt;li&gt;Copy everything inside the form tag including the form tag itself&lt;&#x2F;li&gt;
-&lt;li&gt;Create a new blank HTML file&lt;&#x2F;li&gt;
-&lt;li&gt;Create an empty div with a container class&lt;&#x2F;li&gt;
-&lt;li&gt;Paste all the form markup inside there&lt;&#x2F;li&gt;
-&lt;li&gt;Link the style.css stylsheet&lt;&#x2F;li&gt;
-&lt;li&gt;Test the form and check the response in Google drive&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;h3 id=&quot;hosting-the-form&quot;&gt;Hosting the form&lt;&#x2F;h3&gt;
-&lt;p&gt;&lt;strong&gt;Edit: This feature is &lt;a href=&quot;https:&#x2F;&#x2F;support.google.com&#x2F;drive&#x2F;answer&#x2F;2881970?hl=en&quot;&gt;no longer avaliable&lt;&#x2F;a&gt; to the new google drive.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Something relatively new to Google drive is the ability to host static HTML pages.&lt;&#x2F;p&gt;
-&lt;ul&gt;
-&lt;li&gt;Create a public shared folder&lt;&#x2F;li&gt;
-&lt;li&gt;Upload all your static html files&lt;&#x2F;li&gt;
-&lt;li&gt;Open the index.html file in drive and click the preview button&lt;&#x2F;li&gt;
-&lt;li&gt;Copy the link to the page it sends you too&lt;&#x2F;li&gt;
-&lt;li&gt;Share that link with whoever because you are done!&lt;&#x2F;li&gt;
-&lt;li&gt;This is how the &lt;a href=&quot;https:&#x2F;&#x2F;googledrive.com&#x2F;host&#x2F;0B3SHb_huRFdyNENfQjVzSGpIOFU&#x2F;index.html&quot; title=&quot;Hosted Demo of custom Google Form&quot;&gt;demo form&lt;&#x2F;a&gt; is hosted.&lt;&#x2F;li&gt;
-&lt;&#x2F;ul&gt;
-&lt;p&gt;As a starting point I basically just copied the stylesheet from the default Google form page. Then I took all the colors and placed them into variables. The stylesheet needs to be stripped of things not necessary.&lt;&#x2F;p&gt;
-&lt;h3 id=&quot;moving-forward&quot;&gt;Moving Forward&lt;&#x2F;h3&gt;
-&lt;p&gt;I do not want to add any extra markup to the pages. The idea hear is to just copy the form mark that Google gives you and then just add a stylesheet that will make it themed.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;strong&gt;Think themes for bootstrap. Markup stays, stylesheets change.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;But right now I am just going to try and normalize the current stylsheet into something as default as possible so that I can then create a my-theme-name.css file that contains all the variables to do the styling. I am currently only using the variables in LESS but eventually I will use more of the feaures to get everything nice and themeable.&lt;&#x2F;p&gt;
-&lt;p&gt;You can check out the &lt;a href=&quot;https:&#x2F;&#x2F;googledrive.com&#x2F;host&#x2F;0B3SHb_huRFdyNENfQjVzSGpIOFU&#x2F;index.html&quot; title=&quot;Hosted Demo of custom Google Form&quot;&gt;Demo form in action&lt;&#x2F;a&gt; or just jump right to the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;google-form-styling&quot; title=&quot;james2doyle&#x2F;google-form-styling&quot;&gt;Github Repo&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Salt.js micro selector library</title>
-        <published>2013-05-12T00:00:00+00:00</published>
-        <updated>2013-05-12T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/"/>
-        <id>https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/">&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;saltjs.png&quot; alt=&quot;Slat.js Logo&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I made a tiny dom selector library called &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;saltjs&quot; title=&quot;james2doyle&#x2F;saltjs&quot;&gt;Salt.js&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;It uses a regular expression to map different queries you pass through it to their native get functions. The reason I don’t just use &lt;code&gt;querySelectorAll&lt;&#x2F;code&gt; for everything is because it is slower than the native get commands. &lt;a href=&quot;http:&#x2F;&#x2F;jsperf.com&#x2F;getelementbyid-vs-queryselector&#x2F;11&quot;&gt;See this jsperf test&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;Yes, I see that the mapping is slower for newer versions of Chrome. But, almost every other browser and device is slower using &lt;code&gt;querySelectorAll&lt;&#x2F;code&gt; over the mapping method. Also keep in mind the regex used in that example is much more complicated than mine.&lt;&#x2F;p&gt;
-&lt;p&gt;Here are some examples of how you would use the library:&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;salt-js-examples&quot;&gt;Salt.js Examples&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get by id
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;#iddiv&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get by class name
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.classdiv&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get by element name
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;@namediv&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get by element tag name
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;=div&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; get element using querySelectorAll
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;*div div.inside&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; getAttribute of name
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;#iddiv&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getAttribute&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; getAttribute of name from nodelist
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;.classdiv&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;)[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;getAttribute&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;saltjs&quot; title=&quot;james2doyle&#x2F;saltjs&quot;&gt;Check out the library on Github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;update&quot;&gt;Update&lt;&#x2F;h4&gt;
-&lt;p&gt;Looks like there are a bunch of better ways to make this smaller! I’ve updated the github to reflect the new libraries. I have also added a &lt;a href=&quot;http:&#x2F;&#x2F;jsperf.com&#x2F;micro-selector-libraries&quot;&gt;jsPerf test&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>CSS3 badge logo in SVG</title>
-        <published>2013-04-21T00:00:00+00:00</published>
-        <updated>2013-04-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/css3-badge-logo-in-svg/"/>
-        <id>https://ohdoylerules.com/web/css3-badge-logo-in-svg/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/css3-badge-logo-in-svg/">&lt;p&gt;I have been trying to find the CSS3 badge in a SVG format but it wasn’t that easy. The HTML5 one was the first result on Google. Now finally I found one. I am posting it here because now I will never lose it!&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;html5css3badges.png&quot; alt=&quot;HTML5 and CSS3 badges&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Here is the CSS3 logo:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;css3.svg&quot; target=&quot;_blank&quot; title=&quot;Download CSS3.svg&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;css3.svg&quot; alt=&quot;CSS3 Scalable vector graphic&quot;&gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;Here is the HTML5 logo in-case you need it:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;&#x2F;images&#x2F;html5.svg&quot; target=&quot;_blank&quot; title=&quot;Download HTML5.svg&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;html5.svg&quot; alt=&quot;HTML5 Scalable vector graphic&quot;&gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;h3 id=&quot;references&quot;&gt;References&lt;&#x2F;h3&gt;
-&lt;p&gt;I found the logos on &lt;a href=&quot;http:&#x2F;&#x2F;www.bobbyberberyan.com&#x2F;2012&#x2F;03&#x2F;html-5-css-3-logos&#x2F;&quot; title=&quot;bobby berberyan - html-5-css-3-logos&quot;&gt;this website&lt;&#x2F;a&gt;. They were in one single SVG file and I split them up.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>April 2013 Redesign!</title>
-        <published>2013-04-17T00:00:00+00:00</published>
-        <updated>2013-04-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/april-2013-redesign/"/>
-        <id>https://ohdoylerules.com/personal-project/april-2013-redesign/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/april-2013-redesign/">&lt;p&gt;Another redesign. This one is completely by me, with a little help from the &lt;a href=&quot;http:&#x2F;&#x2F;html5blank.com&quot; title=&quot;html5blank wordpress theme&quot;&gt;html5blank&lt;&#x2F;a&gt; Wordpress template. I am using SVGs exclusively. Although I only have 2 images for the entire site, the logo and the mobile nav hamburger&#x2F;menu button. I think the best part is the new code highlighter. It has some cool features.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&#x2F;&#x2F; here is some javascript
-&lt;&#x2F;span&gt;&lt;span&gt;var item = document.getElementById(&amp;#39;#item&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span&gt;item.style.background = &amp;#39;red&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;item.setAttribute(&amp;#39;data-index&amp;#39;, 1);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;There it is. If you inspect you will see something, strange. I used the new CSS3 generated content. It allows you to use element attributes as css content attributes. Here is the special CSS for prettyprint, highlighted with prettyprint. How meta.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;pre[title]:before {
-&lt;&#x2F;span&gt;&lt;span&gt;  font-family: &amp;#39;Source Code Pro&amp;#39;,monospace;
-&lt;&#x2F;span&gt;&lt;span&gt;  font-weight: 700;
-&lt;&#x2F;span&gt;&lt;span&gt;  display: block;
-&lt;&#x2F;span&gt;&lt;span&gt;  position: relative;
-&lt;&#x2F;span&gt;&lt;span&gt;  top: -10px;
-&lt;&#x2F;span&gt;&lt;span&gt;  left: -25px;
-&lt;&#x2F;span&gt;&lt;span&gt;  content: attr(title);
-&lt;&#x2F;span&gt;&lt;span&gt;  width: auto;
-&lt;&#x2F;span&gt;&lt;span&gt;  height: 20px;
-&lt;&#x2F;span&gt;&lt;span&gt;  color: #FFF;
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: .1em 1.5em .3em;
-&lt;&#x2F;span&gt;&lt;span&gt;  background: #91B6C7;
-&lt;&#x2F;span&gt;&lt;span&gt;  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
-&lt;&#x2F;span&gt;&lt;span&gt;  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
-&lt;&#x2F;span&gt;&lt;span&gt;  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
-&lt;&#x2F;span&gt;&lt;span&gt;  overflow: hidden;
-&lt;&#x2F;span&gt;&lt;span&gt;  text-overflow: ellipsis;
-&lt;&#x2F;span&gt;&lt;span&gt;  white-space: nowrap;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The special part of this style is the &lt;code&gt;content: attr(title);&lt;&#x2F;code&gt;. This grabs the title attribute, and its value, and sets it as the content. This is pretty cool. Also the support is high, IE7 and down. Let me know what you think in the newly enabled comments section!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>AngularJS Hangout - Promises Promises</title>
-        <published>2013-04-17T00:00:00+00:00</published>
-        <updated>2013-04-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/angularjs-hangout-promises-promises/"/>
-        <id>https://ohdoylerules.com/web/angularjs-hangout-promises-promises/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/angularjs-hangout-promises-promises/">&lt;p&gt;I somehow managed to find my way into an &lt;a href=&quot;https:&#x2F;&#x2F;plus.google.com&#x2F;u&#x2F;0&#x2F;events&#x2F;cljavmi7kpup1fso43k3fkpk2eg&quot; title=&quot;AngularJS Promises&quot;&gt;AngularJS hangout&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;The hangout is about promises and deffereds. On the google plus &lt;a href=&quot;https:&#x2F;&#x2F;plus.google.com&#x2F;u&#x2F;0&#x2F;events&#x2F;cljavmi7kpup1fso43k3fkpk2eg&quot; title=&quot;Angularjs Promises Event Page&quot;&gt;event page&lt;&#x2F;a&gt;, there are links to all the plunkrs in the video. Here is the direct &lt;a href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=XLaYaaq2Miw&quot; title=&quot;Angularjs Promises Youtube&quot;&gt;youtube link&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Switching to SVG on Grey Nimbus</title>
-        <published>2013-04-14T00:00:00+00:00</published>
-        <updated>2013-04-14T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/"/>
-        <id>https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/">&lt;p&gt;So I recently bought the &lt;a href=&quot;http:&#x2F;&#x2F;www.bohemiancoding.com&#x2F;sketch&#x2F;&quot; title=&quot;Sketch Website&quot;&gt;Sketch app&lt;&#x2F;a&gt; for Mac. I am using it because I don&#x27;t have illustrator. But to be honest, it is much better at doing small things. It&#x27;s been about 2 hours switching the whole thing over and I have to say it is worth it.&lt;&#x2F;p&gt;
-&lt;p&gt;I also found a &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;svg&#x2F;svgo&quot; title=&quot;svg&#x2F;svgo&quot;&gt;SVG minifier&lt;&#x2F;a&gt; that I will definitely be using in the future. It managed to save about 50-60% on each image. Which, for compression, is very good. After all is said and done, I saved about 10kb. Now this is not a lot but I also eliminated the use of retina.js. Which cause a second request for each image that has an @2x version. So on mobile I have made the site much faster.&lt;&#x2F;p&gt;
-&lt;p&gt;Also, because of the way that FuelPHP does it&#x27;s caching, I was not able to cache the images. Because it would append a query at the end for the cache and retina.js would not be able to find the retina version. That means that any retina device would take double(approximately) requests to get the full page.&lt;&#x2F;p&gt;
-&lt;p&gt;I did something I think is rather clever. What I did was, since SVG support is high, I sniffed the user agent to see if it is one of the browsers that doesn&#x27;t support SVG. Then I set a global and used that to define the extension I was going to use.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;lt;a href=&amp;quot;#welcome&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;?php echo Asset::img(&amp;#39;nimbus&amp;#39;.$ext, array(&amp;quot;width&amp;quot;=&amp;gt;&amp;quot;275&amp;quot;, &amp;quot;height&amp;quot;=&amp;gt;&amp;quot;57&amp;quot;, &amp;quot;alt&amp;quot;=&amp;gt;&amp;quot;Grey Nimbus Logo&amp;quot;)); ?&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;a&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Now $ext would be equal to &amp;quot;.png&amp;quot; or &amp;quot;.svg&amp;quot; depending on the browser you were in. Now the changes are live so you can see that everything is all SVG! It should also look quite pretty on retina screens. &lt;a href=&quot;http:&#x2F;&#x2F;greynimbus.com&quot; title=&quot;Grey Nimbus Website&quot;&gt;Have a look&lt;&#x2F;a&gt;. The site still loads in under 1 second. Which, according to Google, is a good thing.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>PyroCMS Module Generator</title>
-        <published>2013-04-13T00:00:00+00:00</published>
-        <updated>2013-04-13T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-module-generator/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-module-generator/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-module-generator/">&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;pmgh.png&quot; alt=&quot;PyroCMS Module generator header image&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;h3 id=&quot;update&quot;&gt;UPDATE&lt;&#x2F;h3&gt;
-&lt;p&gt;I created a &lt;a href=&quot;http:&#x2F;&#x2F;pyromg.aws.af.cm&#x2F;&quot; title=&quot;Hosted Pyro Module Generator&quot;&gt;hosted version&lt;&#x2F;a&gt; of the module generator.&lt;&#x2F;p&gt;
-&lt;p&gt;FINALLY!! I finished my module generator. It lets you create modules by just filling in a simple form. The module it generates can be used with 2.2. There is no support for any other version at this time.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=g7moZUqIwHU&quot; title=&quot;Pyro Module generator video&quot;&gt;See the Video&lt;&#x2F;a&gt; or go to the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-module-generator&quot; title=&quot;james2doyle&#x2F;pyro-module-generator&quot;&gt;github repo&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;The “app” is just installed to your localhost. It uses no database and relies strictly on writing files and reading files.&lt;&#x2F;p&gt;
-&lt;p&gt;It is built using &lt;a href=&quot;http:&#x2F;&#x2F;laravel.com&#x2F;&quot; title=&quot;Laravel Homepage&quot;&gt;Laravel&lt;&#x2F;a&gt; because Pyro is eventually going to move to Laravel. It is kind of funny that a Laravel based app is building a CodeIgniter based CMS! Hehehee.&lt;&#x2F;p&gt;
-&lt;p&gt;There is a lot of extra junk in there now just because I may create a dedicated site for it. I also want to make it more dynamic for when you are creating dropdown&#x2F;multiselect and radio&#x2F;checkbox inputs. But that depends. Right now it can just run locally and be used&#x2F;customized that way.&lt;&#x2F;p&gt;
-&lt;p&gt;This is actually my fourth iteration of the generator. I created one with no framework, just straight PHP. That was rough. Then I made one with just CodeIgniter. It was a little better. Next, I went kind of crazy and made a PHP command line tool. It can actually make plugins and widgets quite nicely.&lt;&#x2F;p&gt;
-&lt;p&gt;In the end I chose Laravel because I might as well start learning it and it was pretty easy to use. Sp please &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-module-generator&quot; title=&quot;james2doyle&#x2F;pyro-module-generator&quot;&gt;check it out&lt;&#x2F;a&gt; and help clean it up if you can.&lt;&#x2F;p&gt;
-&lt;p&gt;Some little screenshots:&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;pmg1.png&quot; alt=&quot;PyroCMS Module generator input form&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;pmg2.png&quot; alt=&quot;PyroCMS Module generator field input&quot;&gt;
-&lt;&#x2F;div&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pyro Swipe.js Module</title>
-        <published>2013-04-13T00:00:00+00:00</published>
-        <updated>2013-04-13T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-swipe-js-module/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-swipe-js-module/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-swipe-js-module/">&lt;p&gt;Yep, another module. This one is for the awesome &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;bradbirdsall&#x2F;Swipe&quot; title=&quot;bradbirdsall&#x2F;Swipe&quot;&gt;Swipe.js library&lt;&#x2F;a&gt;. Swipe is amazing because it is touch-capable, lightweight and has no dependencies(no jQuery). This module allows users to create multiple slideshows just by choosing a folder they want to pull the images from.&lt;&#x2F;p&gt;
-&lt;p&gt;Then using the modules plugin, they can call it anywhere on a page.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is is &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-swipe-module&quot; title=&quot;james2doyle&#x2F;pyro-swipe-module&quot;&gt;on github&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;It should also make it to the PyroCMS store.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Grey Nimbus website</title>
-        <published>2013-04-11T00:00:00+00:00</published>
-        <updated>2013-04-11T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/portfolio/grey-nimbus-website/"/>
-        <id>https://ohdoylerules.com/portfolio/grey-nimbus-website/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/portfolio/grey-nimbus-website/">&lt;p&gt;Finally took the time and initiative to launch &lt;a href=&quot;http:&#x2F;&#x2F;greynimbus.com&quot; title=&quot;Grey Nimbus Website&quot;&gt;Grey Nimbus&lt;&#x2F;a&gt;, my business. The website itself is built using &lt;a href=&quot;http:&#x2F;&#x2F;fuelphp.com&quot; title=&quot;FuelPHP&quot;&gt;FuelPHP&lt;&#x2F;a&gt;. The reason I chose it was because I was curious and it was pretty light weight.&lt;&#x2F;p&gt;
-&lt;p&gt;The website has no database so that was pretty much ignored. But I wanted easy validation for forms and a good email library. This is handled nicely by Fuel. The docs are mostly good. I had to do a little google searching when I was trying to tie things in together.&lt;&#x2F;p&gt;
-&lt;p&gt;I knew I wanted parallax and responsive. I found &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;spencerbaynton&#x2F;cool-kitten&quot; title=&quot;spencerbaynton&#x2F;cool kitten&quot;&gt;a fork&lt;&#x2F;a&gt; of the &lt;a href=&quot;http:&#x2F;&#x2F;www.jalxob.com&#x2F;cool-kitten&#x2F;&quot; title=&quot;cool-kitten homepage&quot;&gt;cool-kitten&lt;&#x2F;a&gt; framework that I liked and created &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;cool-kitten&quot; title=&quot;james2doyle&#x2F;cool kitten&quot;&gt;my own fork&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;In my fork, the first thing I did was add &lt;a href=&quot;http:&#x2F;&#x2F;retinajs.com&#x2F;&quot; title=&quot;Retina.js Homepage&quot;&gt;retina.js&lt;&#x2F;a&gt;. I know some people knock retina.js because it uses &lt;a href=&quot;http:&#x2F;&#x2F;mir.aculo.us&#x2F;2012&#x2F;09&#x2F;22&#x2F;dont-use-javascript-for-retinafying&#x2F;&quot; title=&quot;Thomas Fuchs - Don’t use JavaScript for Retinafying&quot;&gt;javascript&lt;&#x2F;a&gt; to replace images with an @2x version.&lt;&#x2F;p&gt;
-&lt;blockquote&gt;
-&lt;p&gt;Maybe in the next update I will switch to SVG images, but I digress.&lt;&#x2F;p&gt;
-&lt;&#x2F;blockquote&gt;
-&lt;p&gt;The second thing I did was create a &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;cool-kitten&#x2F;blob&#x2F;master&#x2F;compile.sh&quot; title=&quot;james2doyle&#x2F;cool-kitten build script&quot;&gt;build script&lt;&#x2F;a&gt; to concatenate and minify the javascript and css. It uses &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;GoalSmashers&#x2F;clean-css&quot; title=&quot;GoalSmashers&#x2F;clean-css&quot;&gt;clean-css&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;mishoo&#x2F;UglifyJS&quot; title=&quot;mishoo&#x2F;UglifyJS&quot;&gt;uglifyjs&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;The reason I didn&#x27;t use something like grunt.js is because I only had 2 tasks to run and it was only when I was ready to push to the server. I added a condition in the head and footer to check to see if the site was in production and load the minified versions or the normal big list of separate files. The rest was just testing and building. Creating content is always tough for me. I want to sound casual which some people don&#x27;t like. But it reflects me better so, whatever.&lt;&#x2F;p&gt;
-&lt;p&gt;I ended up adding &lt;a href=&quot;http:&#x2F;&#x2F;daneden.me&#x2F;animate&#x2F;&quot; title=&quot;daneden.me&#x2F;animate&#x2F;&quot;&gt;animate.css&lt;&#x2F;a&gt; too. I didn&#x27;t create any fallbacks for no css animation support because they just won&#x27;t show if you don&#x27;t have support. I&#x27;ve used the library before and it is pretty great. I created a custom build because I am trying to keep my footprint small. In the end, even with all the images and javascript libs, I managed to get the page to load in &lt;a href=&quot;http:&#x2F;&#x2F;blog.kissmetrics.com&#x2F;loading-time&#x2F;?wide=1&quot; title=&quot;How Loading Time Affects Your Bottom Line&quot;&gt;under 1 second&lt;&#x2F;a&gt; (at least on desktop...).&lt;&#x2F;p&gt;
-&lt;p&gt;In conclusion, I am very happy with it. I have gotten a lot of positive feedback and suggestions. Everyday I make a few minor tweaks. Please &lt;a href=&quot;http:&#x2F;&#x2F;greynimbus.com&#x2F;&quot; title=&quot;Grey Nimbus Website&quot;&gt;check it out&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pyro Image Select Field</title>
-        <published>2013-03-28T00:00:00+00:00</published>
-        <updated>2013-03-28T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-image-select-field/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-image-select-field/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-image-select-field/">&lt;p&gt;Another &lt;a href=&quot;http:&#x2F;&#x2F;pyrocms.com&quot; title=&quot;PyroCMS Website&quot;&gt;PyroCMS&lt;&#x2F;a&gt; field type. This one is called Image Select. Why? Because it does exactly that. It lets you select images. But wait! There is already an image field type. Yes, but that is for uploading images. Sometimes you just want to choose and image you already have. An image drop down is good for this.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img alt=&quot;pyro image select screen3&quot; src=&quot;&#x2F;images&#x2F;screen3.png&quot; &gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I think a nice grid with thumbnail previews is even better!! I have the project &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-image-select&quot; title=&quot;pyro image select github page&quot;&gt;hosted on github&lt;&#x2F;a&gt;. It will also be submitted to the PyroCMS store.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>jQuery Plugin Snippets for Sublime Text 2</title>
-        <published>2013-03-28T00:00:00+00:00</published>
-        <updated>2013-03-28T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/jquery-plugin-snippets/"/>
-        <id>https://ohdoylerules.com/snippets/jquery-plugin-snippets/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/jquery-plugin-snippets/">&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;jquery.png&quot; alt=&quot;jquery logo&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I created a &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;jquery-plugin-snippets&quot; title=&quot;james2doyle&#x2F;jquery-plugin-snippets&quot;&gt;bunch of snippets&lt;&#x2F;a&gt; out of the patterns from &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;shichuan&#x2F;javascript-patterns&#x2F;tree&#x2F;master&#x2F;jquery-plugin-patterns&quot; title=&quot;shichuan javascript patterns&quot;&gt;shichuans javascript patterns repo&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;These are for &lt;a href=&quot;http:&#x2F;&#x2F;www.sublimetext.com&#x2F;&quot; title=&quot;sublime text site&quot;&gt;Sublime Text 2&lt;&#x2F;a&gt; which everyone knows. You just clone the repo into the packages directory and they magically appear. If you don’t use sublime text…&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;yunost2.jpg&quot; alt=&quot;y u no use sublime text 2&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I had to create that image because it didn’t exists for some reason.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;jquery-plugin-snippets&quot; title=&quot;james2doyle&#x2F;jquery-plugin-snippets&quot;&gt;Github Linky&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>PHP Variables in strings</title>
-        <published>2013-03-21T00:00:00+00:00</published>
-        <updated>2013-03-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/demo/php-variables-in-strings/"/>
-        <id>https://ohdoylerules.com/demo/php-variables-in-strings/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/demo/php-variables-in-strings/">&lt;p&gt;I have been getting quite annoyed lately when escaping a string to output a PHP variable. So I decided to make a little test so I could see what the best way to tackle this was.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;&#x2F;&#x2F; tested on PHP 5.4.4
-&lt;&#x2F;span&gt;&lt;span&gt;$var = &amp;quot;variable value&amp;quot;;
-&lt;&#x2F;span&gt;&lt;span&gt;echo &amp;quot;tell me the &amp;quot;.$var.&amp;quot; please&amp;quot;; &#x2F;&#x2F; variable value
-&lt;&#x2F;span&gt;&lt;span&gt;echo &amp;quot;tell me the &amp;quot;,$var,&amp;quot; please&amp;quot;; &#x2F;&#x2F; variable value
-&lt;&#x2F;span&gt;&lt;span&gt;echo &amp;quot;tell me the $var please&amp;quot;; &#x2F;&#x2F; variable value
-&lt;&#x2F;span&gt;&lt;span&gt;echo &amp;quot;tell me the {$var} please&amp;quot;; &#x2F;&#x2F; variable value
-&lt;&#x2F;span&gt;&lt;span&gt;echo &amp;#39;tell me the &amp;#39;,$var,&amp;#39; please&amp;#39;; &#x2F;&#x2F; variable value
-&lt;&#x2F;span&gt;&lt;span&gt;echo &amp;#39;tell me the $var please&amp;#39;; &#x2F;&#x2F; $var
-&lt;&#x2F;span&gt;&lt;span&gt;echo &amp;#39;tell me the {$var} please&amp;#39;; &#x2F;&#x2F; {$var}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Maybe I am a little dumb for not knowing this. But I would always escape my strings like:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;echo &amp;quot;my little &amp;quot;.$var.&amp;quot; went to the market.&amp;quot;;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;when I could have just used &amp;quot;$var&amp;quot; with double quotes... Everything in single quotes is treated as a plain string and anything with double is interpreted. I saw something saying that some of these will not output properly in older versions of PHP.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pyro Blurb Field</title>
-        <published>2013-03-19T00:00:00+00:00</published>
-        <updated>2013-03-19T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-blurb-field/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-blurb-field/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-blurb-field/">&lt;p&gt;I created another new field type for &lt;a href=&quot;http:&#x2F;&#x2F;pyrocms.com&quot; title=&quot;PyroCMS Website&quot;&gt;PyroCMS&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img alt=&quot;pyro-blurb-field&quot; src=&quot;&#x2F;images&#x2F;Screen-Shot-2013-03-13-at-3.38.39-PM.png&quot; &gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;This one is for doing little &amp;quot;blurb&amp;quot; sections. Essentially I keep seeing little title+image+body components. Like testimonials, user profiles, portfolio snippets. These all follow a title+image+body format. So I built a little field type to provide an easy way to manage these in your page types.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img alt=&quot;pyro-blurb-field&quot; src=&quot;&#x2F;images&#x2F;Screen-Shot-2013-03-13-at-3.38.21-PM.png&quot; &gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I also put the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-blurb-field&quot; title=&quot;pyro-blurb field github&quot;&gt;project on github&lt;&#x2F;a&gt; so that you can see it. It will also be on the PyroCMS Store.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Canadian Provinces Field</title>
-        <published>2013-03-15T00:00:00+00:00</published>
-        <updated>2013-03-15T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/canadian-provinces-field/"/>
-        <id>https://ohdoylerules.com/personal-project/canadian-provinces-field/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/canadian-provinces-field/">&lt;p&gt;Created another &lt;a href=&quot;http:&#x2F;&#x2F;pyrocms.com&quot; title=&quot;PyroCMS website&quot;&gt;PyroCMS&lt;&#x2F;a&gt; field.
-This one is for Canadian Provinces and Territories. Here is &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;canadian-provinces-field&quot; title=&quot;canadian-provinces-field&quot;&gt;the github
-page&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Git Website Workflow</title>
-        <published>2013-03-13T00:00:00+00:00</published>
-        <updated>2013-03-13T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/git-website-workflow/"/>
-        <id>https://ohdoylerules.com/personal-project/git-website-workflow/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/git-website-workflow/">&lt;div class=&quot;center&quot;&gt;
-  &lt;img alt=&quot;Amazon Web Services Logo&quot; src=&quot;&#x2F;images&#x2F;awslogo.png&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I recently switched to using Amazon Web Services for my hosting. It is awesome. Because it(EC2) is just a cloud computer, I can install anything I want and set up any workflow I desire. I recently found &lt;a href=&quot;http:&#x2F;&#x2F;goo.gl&#x2F;0L3E6&quot; title=&quot;A web-focused Git workflow&quot;&gt;an article&lt;&#x2F;a&gt; that was about a website git workflow.&lt;&#x2F;p&gt;
-&lt;p&gt;I finally got the flow down, but it was taking a little too long to start a project. So I decided to &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;git-website-workflow&quot; title=&quot;git-websit-workflow bash script&quot;&gt;make it into a script&lt;&#x2F;a&gt;.This works with any cloud computer workflow. It doesn&#x27;t have to be just Amazon.&lt;&#x2F;p&gt;
-&lt;p&gt;With a little help from &lt;a href=&quot;https:&#x2F;&#x2F;plus.google.com&#x2F;109231487156400680487&#x2F;postsWzueZxHuP7b&quot; title=&quot;google plus bash community post&quot;&gt;some people on google+&lt;&#x2F;a&gt; I finally got it down. Check out the &lt;a href=&quot;http:&#x2F;&#x2F;goo.gl&#x2F;0L3E6&quot; title=&quot;A web-focused Git workflow&quot;&gt;original article&lt;&#x2F;a&gt; on how itworks and the philosophy of why.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>PyroCMS PageWidgets Field Type</title>
-        <published>2013-03-05T00:00:00+00:00</published>
-        <updated>2013-03-05T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/"/>
-        <id>https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/">&lt;p&gt;I created another field type for &lt;a href=&quot;https:&#x2F;&#x2F;www.pyrocms.com&#x2F;&quot; title=&quot;PyroCMS Website&quot;&gt;PyroCMS&lt;&#x2F;a&gt;. This one is so you can add widgets on a page-by-page basis instead of area-by-area.&lt;&#x2F;p&gt;
-&lt;p&gt;I kept getting asked by clients for this feature, and with the advent of the new page type and field types this is a lot easier. The source is on &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-pagewidgets-field&quot; title=&quot;pyro-pagewidgets-field&quot;&gt;github&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Clean CSS Updated</title>
-        <published>2013-02-24T00:00:00+00:00</published>
-        <updated>2013-02-24T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/clean-css-updated/"/>
-        <id>https://ohdoylerules.com/personal-project/clean-css-updated/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/clean-css-updated/">&lt;p&gt;I updated my Chrome packaged app, Clean CSS. Here is &lt;a href=&quot;http:&#x2F;&#x2F;james2doyle.github.com&#x2F;clean-css-chrome-app&#x2F;&quot; title=&quot;Clean CSS Chrome App&quot;&gt;the website&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pyro List Field</title>
-        <published>2013-02-23T00:00:00+00:00</published>
-        <updated>2013-02-23T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-list-field/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-list-field/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-list-field/">&lt;p&gt;I created a list field type for PyroCMS. It allows users to easily add and manage list content. The source code is up &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-list-field&quot; title=&quot;Pyro List Field&quot;&gt;on github&lt;&#x2F;a&gt; and avaliable on the &lt;a href=&quot;https:&#x2F;&#x2F;www.pyrocms.com&#x2F;store&#x2F;details&#x2F;list_field_type&quot; title=&quot;PyroCMS Store List Field Type&quot;&gt;PyroCMS store&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Pyro Image Widget</title>
-        <published>2013-02-21T00:00:00+00:00</published>
-        <updated>2013-02-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/pyro-image-widget/"/>
-        <id>https://ohdoylerules.com/personal-project/pyro-image-widget/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/pyro-image-widget/">&lt;p&gt;I created a small image widget for PyroCMS. It allows a user to choose any image in the files as a widget. It also allows you to add a link and a target so it can be opened in a new tab. Here is &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;pyro-image-widget&quot; title=&quot;Pyro Image Widget Github&quot;&gt;the github link&lt;&#x2F;a&gt; and the &lt;a href=&quot;https:&#x2F;&#x2F;www.pyrocms.com&#x2F;store&#x2F;details&#x2F;pyro_image_widget&quot; title=&quot;Pyro Image Widget&quot;&gt;PyroCMS store link&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Zepto Drag &amp; Swap</title>
-        <published>2013-02-21T00:00:00+00:00</published>
-        <updated>2013-02-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/zepto-drag-swap/"/>
-        <id>https://ohdoylerules.com/personal-project/zepto-drag-swap/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/zepto-drag-swap/">&lt;p&gt;I created a little plugin for zepto.js called Drag &amp;amp; Swap. Here is the &lt;a href=&quot;http:&#x2F;&#x2F;james2doyle.github.com&#x2F;zepto-dragswap&#x2F;&quot; title=&quot;Zepto Dragswap&quot;&gt;github link&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Making a socket.io app and how socket.io works</title>
-        <published>2013-01-13T00:00:00+00:00</published>
-        <updated>2013-01-13T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/demo/socketio-works-howto/"/>
-        <id>https://ohdoylerules.com/demo/socketio-works-howto/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/demo/socketio-works-howto/">&lt;p&gt;I made my first video about web development. It is a quick video about socket.io and how it works with node and such.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;youtu.be&#x2F;JfYRGTvMbBA&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;vlcsnap-2013-01-12-16h52m23s239.jpg&quot; alt=&quot;Socket.io demo app&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;It also includes a little demo of a tiny app I built. I may release the source later on depending on the videos popularity.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;youtu.be&#x2F;JfYRGTvMbBA&quot;&gt;Making a socket.io app&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Clean CSS in Chrome Apps Office Hours</title>
-        <published>2012-12-19T00:00:00+00:00</published>
-        <updated>2012-12-19T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/clean-css-in-office-hours/"/>
-        <id>https://ohdoylerules.com/personal-project/clean-css-in-office-hours/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/clean-css-in-office-hours/">&lt;h3 id=&quot;clean-css-made-it-into-a-chrome-apps-office-hours&quot;&gt;Clean CSS made it into a Chrome Apps Office hours!!&lt;&#x2F;h3&gt;
-&lt;p&gt;So my chrome app &lt;a href=&quot;http:&#x2F;&#x2F;james2doyle.github.com&#x2F;clean-css-chrome-app&#x2F;&quot; title=&quot;Clean CSS Chrome App&quot;&gt;Clean CSS&lt;&#x2F;a&gt; made it onto one of the Chrome Apps Office Hours.&lt;&#x2F;p&gt;
-&lt;p&gt;The Office Hours is a series of videos by Google where developers talk to the community about Google technology, software and programming. The way I got on was I saw Paul Kinlan, a Google Chrome developer advocate, make a post about the live office hours being held that day.&lt;&#x2F;p&gt;
-&lt;p&gt;I managed to get a link to my app and he then reviewed it on the show!&lt;&#x2F;p&gt;
-&lt;p&gt;The app &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;clean-css-chrome-app&#x2F;&quot; title=&quot;Clean CSS on Github&quot;&gt;is also on github&lt;&#x2F;a&gt; so anyone can submit some changes and improvements.  You can download the app on the &lt;a href=&quot;http:&#x2F;&#x2F;goo.gl&#x2F;D9F7u&quot; title=&quot;Clean CSS on Chrome Web Store&quot;&gt;Chrome Web Store&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>View Folder Tree in MacOSX Terminal</title>
-        <published>2012-11-19T00:00:00+00:00</published>
-        <updated>2012-11-19T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/"/>
-        <id>https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/">&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;coderwall.com&#x2F;p&#x2F;owb6eg&quot; title=&quot;terminal tree command&quot;&gt;View Folder Tree in MacOSX Terminal&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;&#x2F;images&#x2F;Screen-Shot-2012-11-19-at-1.05.22-PM11.png&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;Screen-Shot-2012-11-19-at-1.05.22-PM11.png&quot; alt=&quot;zsh tree alias&quot; title=&quot;zsh tree alias&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>New business cards</title>
-        <published>2012-11-15T00:00:00+00:00</published>
-        <updated>2012-11-15T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/portfolio/new-business-cards/"/>
-        <id>https://ohdoylerules.com/portfolio/new-business-cards/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/portfolio/new-business-cards/">&lt;p&gt;Picked up my new cards right before &lt;a href=&quot;http:&#x2F;&#x2F;www.diglondon.ca&#x2F;&quot;&gt;Dig London&lt;&#x2F;a&gt;. They have my new favourite emoticon on the back too.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;&#x2F;images&#x2F;20121114-14232711.jpg&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;20121114-14232711.jpg&quot; alt=&quot;20121114-142327.jpg&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Flexbox Demo</title>
-        <published>2012-11-14T00:00:00+00:00</published>
-        <updated>2012-11-14T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/demo/flexbox-demo/"/>
-        <id>https://ohdoylerules.com/demo/flexbox-demo/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/demo/flexbox-demo/">&lt;p&gt;An old flexbox demo I made a while back. It may not be the latest syntax so beware!!&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;svEek&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;Screen-Shot-2012-11-13-at-4.23.41-PM-e135284190554411.png&quot; alt=&quot;Flexbox Demo&quot; title=&quot;Flexbox Demo&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;svEek&quot; title=&quot;Codepen Link&quot;&gt;Check out the pen&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>WYSIWYG in PyroCMS Widgets</title>
-        <published>2012-11-10T00:00:00+00:00</published>
-        <updated>2012-11-10T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/"/>
-        <id>https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/">&lt;p&gt;I have been working on a site that uses &lt;a href=&quot;https:&#x2F;&#x2F;www.pyrocms.com&#x2F;&quot; title=&quot;PyroCMS Homepage&quot;&gt;PyroCMS&lt;&#x2F;a&gt;. I needed to build a custom widget that had a WYSIWYG textarea. This is what worked for me.&lt;&#x2F;p&gt;
-&lt;p&gt;Add this to template in the constructors function.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;pyrocms-system-cms-modules-widgets-controllers-admin-php&quot;&gt;pyrocms&#x2F;system&#x2F;cms&#x2F;modules&#x2F;widgets&#x2F;controllers&#x2F;admin.php&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;&#x2F;&#x2F; my new template
-&lt;&#x2F;span&gt;&lt;span&gt;$this-&amp;gt;template
-&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;set_partial(&amp;#39;shortcuts&amp;#39;, &amp;#39;admin&#x2F;partials&#x2F;shortcuts&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;append_js(&amp;#39;module::widgets.js&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;append_css(&amp;#39;module::widgets.css&amp;#39;)
-&lt;&#x2F;span&gt;&lt;span&gt;-&amp;gt;append_metadata($this-&amp;gt;load-&amp;gt;view(&amp;#39;fragments&#x2F;wysiwyg&amp;#39;, $this-&amp;gt;data, TRUE));
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The following javascript needs to be added to the top of your view&#x2F;form.php file.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;widgets-mywysiwygwidget-views-form-php&quot;&gt;&#x2F;widgets&#x2F;mywysiwygwidget&#x2F;views&#x2F;form.php&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; my self special jquery
-&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;){
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;textarea.wysiwyg-simple&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;).&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;ckeditor&lt;&#x2F;span&gt;&lt;span&gt;({
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; this is the config for the simple wysiwyg
-&lt;&#x2F;span&gt;&lt;span&gt;    toolbar: [
-&lt;&#x2F;span&gt;&lt;span&gt;        [&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Bold&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Italic&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;NumberedList&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;BulletedList&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Link&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Unlink&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;]
-&lt;&#x2F;span&gt;&lt;span&gt;    ],
-&lt;&#x2F;span&gt;&lt;span&gt;    width: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;99%&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;    height: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;100&lt;&#x2F;span&gt;&lt;span&gt;,
-&lt;&#x2F;span&gt;&lt;span&gt;    dialog_backgroundCoverColor: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;#000&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;    defaultLanguage: &amp;#39;&amp;#39;,
-&lt;&#x2F;span&gt;&lt;span&gt;    language: &amp;#39;&amp;#39;
-&lt;&#x2F;span&gt;&lt;span&gt;    });
-&lt;&#x2F;span&gt;&lt;span&gt;})(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;jQuery&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Also, you need to have the wysiwyg-simple class on your textarea.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;widgets-mywysiwygwidget-views-form-php-1&quot;&gt;&#x2F;widgets&#x2F;mywysiwygwidget&#x2F;views&#x2F;form.php&lt;&#x2F;h4&gt;
-&lt;pre data-lang=&quot;php&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-php &quot;&gt;&lt;code class=&quot;language-php&quot; data-lang=&quot;php&quot;&gt;&lt;span&gt;echo form_textarea(array(&amp;#39;name&amp;#39;=&amp;gt; &amp;#39;html&amp;#39;, &amp;#39;value&amp;#39; =&amp;gt; $options[&amp;#39;html&amp;#39;], &amp;#39;class&amp;#39; =&amp;gt; &amp;#39;wysiwyg-simple&amp;#39;));
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Letterpress loader in CSS</title>
-        <published>2012-11-04T00:00:00+00:00</published>
-        <updated>2012-11-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/demo/letterpress-loader-in-css/"/>
-        <id>https://ohdoylerules.com/demo/letterpress-loader-in-css/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/demo/letterpress-loader-in-css/">&lt;p&gt;I recently bought the amazing Letterpress app for iPhone. It truly is gorgeous, and has an amazing UI. It inspired me to make this little doodle.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;Screen-Shot-2012-11-04-at-1.34.39-AM11.png&quot; alt=&quot;Letterpress Loader In CSS&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;This is a little tribute. It&#x27;s an animated css loader in the style of Letterpress. It&#x27;s a little different because it uses the custom cubic-bezier curve called &#x27;ease-in-out-back&#x27;, which is essentially elastic. I got the values from the great site &lt;a href=&quot;http:&#x2F;&#x2F;matthewlein.com&#x2F;ceaser&#x2F;&quot; title=&quot;Ceaser&quot;&gt;Ceaser&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;As always, &lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;rDEzp&quot; title=&quot;Letterpress CSS Loader&quot;&gt;check out the pen&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Kube-Node-Express</title>
-        <published>2012-10-21T00:00:00+00:00</published>
-        <updated>2012-10-21T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/personal-project/kube-node-express/"/>
-        <id>https://ohdoylerules.com/personal-project/kube-node-express/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/personal-project/kube-node-express/">&lt;p&gt;I have released my first node.js-based public repo! It is called &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;kube-node-express&quot; title=&quot;Kube-Node-Express&quot;&gt;Kube-Node-Express&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;img src=&quot;&#x2F;images&#x2F;Screen-Shot-2012-10-20-at-3.46.33-PM11.png&quot; alt=&quot;Kube CSS Framework&quot; &gt;
-&lt;p&gt;This is based off of the &lt;a href=&quot;http:&#x2F;&#x2F;imperavi.com&#x2F;kube&#x2F;&quot; title=&quot;Kube CSS Framework&quot;&gt;Kube CSS Framework by Imperavi&lt;&#x2F;a&gt;. It uses the &lt;a href=&quot;http:&#x2F;&#x2F;expressjs.com&#x2F;&quot; title=&quot;expressjs&quot;&gt;express&lt;&#x2F;a&gt; framework for node. This was inspired by a similar project I saw that was &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;robrighter&#x2F;node-boilerplate&quot; title=&quot;node boilerplate&quot;&gt;based on the HTML5 Boilerplate&lt;&#x2F;a&gt;. I will probably end up stealing more ideas from that project too.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;disclaimer&quot;&gt;disclaimer&lt;&#x2F;h4&gt;
-&lt;p&gt;I did not create any of these frameworks, I just combined them all together.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Source Code Pro on Sublime Text</title>
-        <published>2012-10-19T00:00:00+00:00</published>
-        <updated>2012-10-19T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/source-code-pro-sublime/"/>
-        <id>https://ohdoylerules.com/web/source-code-pro-sublime/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/source-code-pro-sublime/">&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;githubgistlogo.png&quot; alt=&quot;Github Gists Logo&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I recently switched my font in sublime text to the new Adobe font, &lt;a href=&quot;http:&#x2F;&#x2F;blogs.adobe.com&#x2F;typblography&#x2F;2012&#x2F;09&#x2F;source-code-pro.html&quot; title=&quot;Adobe Blog - Source Code Pro&quot;&gt;Source Code Pro&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;sourcecodepro.png&quot; alt=&quot;Source Code Pro sublime text 2 screenshot&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;It looks fantastic! It is so smooth and crisp. To switch to it as your main font, first download the font. Then add the line “font_face”: “Source Code Pro” in your Preferences-&amp;gt;User Settings(keyboard shortcut command+comma to open the settings) and that’s it! Pretty fly.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Generated Content in CSS</title>
-        <published>2012-10-18T00:00:00+00:00</published>
-        <updated>2012-10-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/demo/generated-content-title/"/>
-        <id>https://ohdoylerules.com/demo/generated-content-title/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/demo/generated-content-title/">&lt;p&gt;I like &lt;a href=&quot;http:&#x2F;&#x2F;jsfiddle.net&#x2F;&quot; title=&quot;jsFiddle&quot;&gt;jsFiddle&lt;&#x2F;a&gt;. I often use it for prototyping. I might want to see what I can make in css or maybe I want to build a little template. A perfect example, I used it to mockup my &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;work&#x2F;&quot; title=&quot;Work&quot;&gt;work&lt;&#x2F;a&gt; section.&lt;&#x2F;p&gt;
-&lt;p&gt;Since it is just a repeating template, I built the classes and styles in jsFiddle and then just dropped in the PHP &lt;code&gt;echo&lt;&#x2F;code&gt;s. Anyway, here is something I made. It uses generated content. You can use HTML attributes in CSS. This is a classic example:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;*! styles for printing *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@media &lt;&#x2F;span&gt;&lt;span&gt;print{
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;*! all a tags with an href attribute *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;]:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;after&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;*! display that href after the value *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;    content: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;attr&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;) &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;;
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h3 id=&quot;what-does-this-look-like&quot;&gt;What does this look like?&lt;&#x2F;h3&gt;
-&lt;p&gt;Would render as &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;demo&#x2F;generated-content-title&#x2F;www.example.com&#x2F;&quot;&gt;Website (www.example.com&#x2F;)&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;So with that in mind, I thought it would be cool to have a button that would render a count. So in practical applications it might be used for something like an inbox button. In the case I built it is a notifications button.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;54368011.png&quot; alt=&quot;notifications button&quot; &gt;
-&lt;&#x2F;div&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;button {
-&lt;&#x2F;span&gt;&lt;span&gt;  color: #333;
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: 4px 10px;
-&lt;&#x2F;span&gt;&lt;span&gt;  border: 1px solid #aaa;
-&lt;&#x2F;span&gt;&lt;span&gt;  outline: none;
-&lt;&#x2F;span&gt;&lt;span&gt;  font-weight: bold;
-&lt;&#x2F;span&gt;&lt;span&gt;  font-size: 12px;
-&lt;&#x2F;span&gt;&lt;span&gt;  font-family: &amp;#39;Corbin&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;  background: #eee;
-&lt;&#x2F;span&gt;&lt;span&gt;  border-radius: 3px;
-&lt;&#x2F;span&gt;&lt;span&gt;  box-shadow: 0 2px 0 rgba(0,0,0,0.5);
-&lt;&#x2F;span&gt;&lt;span&gt;  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;button:after {
-&lt;&#x2F;span&gt;&lt;span&gt;  content: attr(data-count);
-&lt;&#x2F;span&gt;&lt;span&gt;  border-radius: 10px;
-&lt;&#x2F;span&gt;&lt;span&gt;  display: inline-block;
-&lt;&#x2F;span&gt;&lt;span&gt;  background: #777;
-&lt;&#x2F;span&gt;&lt;span&gt;  padding: 2px 5px;
-&lt;&#x2F;span&gt;&lt;span&gt;  width: 15px;
-&lt;&#x2F;span&gt;&lt;span&gt;  margin: 0 0 0 8px;
-&lt;&#x2F;span&gt;&lt;span&gt;  color: white;
-&lt;&#x2F;span&gt;&lt;span&gt;  font-weight: normal;
-&lt;&#x2F;span&gt;&lt;span&gt;  border: 1px solid #555;
-&lt;&#x2F;span&gt;&lt;span&gt;  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5),
-&lt;&#x2F;span&gt;&lt;span&gt;      inset 0 -1px 2px rgba(0,0,0,0.5);
-&lt;&#x2F;span&gt;&lt;span&gt;  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
-&lt;&#x2F;span&gt;&lt;span&gt;}​
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;If you would like to see that bad boy in action check out &lt;a href=&quot;http:&#x2F;&#x2F;jsfiddle.net&#x2F;james2doyle&#x2F;LjgzD&#x2F;&quot; title=&quot;jsFiddle css content&quot;&gt;this fiddle&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Array.prototype.range()</title>
-        <published>2012-10-18T00:00:00+00:00</published>
-        <updated>2012-10-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/fiddle/array-prototype-range/"/>
-        <id>https://ohdoylerules.com/fiddle/array-prototype-range/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/fiddle/array-prototype-range/">&lt;p&gt;I wrote this little prototype after seeing the range function in ruby.&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Array&lt;&#x2F;span&gt;&lt;span&gt;.prototype.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;range &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;step&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;step &lt;&#x2F;span&gt;&lt;span&gt;= !&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;step &lt;&#x2F;span&gt;&lt;span&gt;? &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1 &lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;step&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b &lt;&#x2F;span&gt;&lt;span&gt;&#x2F; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;step&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;b&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;++) {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span&gt;* &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;step&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;};
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; usage
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;myarray &lt;&#x2F;span&gt;&lt;span&gt;= [];
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;myarray&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;range&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;10&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; myarray now returns [0, 2, 4, 6, 8, 10]
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>No Javascript CSS Accordion</title>
-        <published>2012-10-17T00:00:00+00:00</published>
-        <updated>2012-10-17T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/demo/no-javascript-accordion/"/>
-        <id>https://ohdoylerules.com/demo/no-javascript-accordion/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/demo/no-javascript-accordion/">&lt;p&gt;I made this today. It&#x27;s a little CSS-only accordion. It uses the &lt;code&gt;:target&lt;&#x2F;code&gt; selector. The &lt;code&gt;:target&lt;&#x2F;code&gt; selector is rather new. It also has some quirks. It is almost like an onclick without the javascript.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;Screen-Shot-2012-10-17-at-1.54.00-PM11.png&quot; alt=&quot;no-js accordion&quot; &gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;The thing I find is that the name is being passed through the URL when using this method. This is nice when you want to refresh the page and keep the same item active. But that is also a downside because maybe when you refresh you want everything to reset. In that case, you would need to delete the variable&#x2F;id out of the URL and then refresh.&lt;&#x2F;p&gt;
-&lt;p&gt;But just &lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;tgxDr&quot; title=&quot;no-js accordion&quot;&gt;check it out&lt;&#x2F;a&gt; already!&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Dancing Music Bars</title>
-        <published>2012-10-16T00:00:00+00:00</published>
-        <updated>2012-10-16T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/fiddle/dancing-music-bars/"/>
-        <id>https://ohdoylerules.com/fiddle/dancing-music-bars/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/fiddle/dancing-music-bars/">&lt;p data-height=&quot;265&quot; data-theme-id=&quot;0&quot; data-slug-hash=&quot;bwbJgW&quot; data-default-tab=&quot;result&quot; data-user=&quot;james2doyle&quot; data-embed-version=&quot;2&quot; data-pen-title=&quot;bwbJgW&quot; class=&quot;codepen&quot;&gt;See the Pen &lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;bwbJgW&#x2F;&quot;&gt;bwbJgW&lt;&#x2F;a&gt; by James Doyle (&lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&quot;&gt;@james2doyle&lt;&#x2F;a&gt;) on &lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;script async src=&quot;https:&#x2F;&#x2F;production-assets.codepen.io&#x2F;assets&#x2F;embed&#x2F;ei.js&quot;&gt;&lt;&#x2F;script&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>zsh new file &amp;&amp; open file function</title>
-        <published>2012-10-13T00:00:00+00:00</published>
-        <updated>2012-10-13T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/zsh-new-open-function/"/>
-        <id>https://ohdoylerules.com/snippets/zsh-new-open-function/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/zsh-new-open-function/">&lt;p&gt;Here is a little function that I made for &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;robbyrussell&#x2F;oh-my-zsh&quot; title=&quot;oh-my-zsh&quot;&gt;oh-my-zsh&lt;&#x2F;a&gt;. I found myself constantly doing &lt;code&gt;sudo touch app.js &amp;amp;&amp;amp; open app.js&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;What this little command does is create an empty file called &lt;code&gt;app.js&lt;&#x2F;code&gt; and then opens it with whatever your default editor is.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;here-is-the-function&quot;&gt;Here is the function:&lt;&#x2F;h4&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;# create a new file in the current directory and then open it
-&lt;&#x2F;span&gt;&lt;span&gt;new () {
-&lt;&#x2F;span&gt;&lt;span&gt;  sudo touch $1 &amp;amp;&amp;amp; open $1
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;h4 id=&quot;how-to-use&quot;&gt;How to use:&lt;&#x2F;h4&gt;
-&lt;p&gt;Open your &lt;code&gt;.zshrc&lt;&#x2F;code&gt; file and add this function at the bottom. If you haven&#x27;t yet, uncomment the line that adds the zshconfig alias. If you are looking for example aliases, well, there are a couple in this section. When you want to create and then open a file just type &lt;code&gt;new myfile.xxx&lt;&#x2F;code&gt;. This will create the new file in the directory and then open it with whatever editor you want.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Target Mozilla-only in CSS</title>
-        <published>2012-10-11T00:00:00+00:00</published>
-        <updated>2012-10-11T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/target-mozilla-only-in-css/"/>
-        <id>https://ohdoylerules.com/snippets/target-mozilla-only-in-css/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/target-mozilla-only-in-css/">&lt;p&gt;I had some issues in Firefox recently. I was building a complicated “item” in CSS and it looked great in Chrome. I got an email later saying that the sizing was all off for a bunch of things. I thought this was really strange. I went back to the CSS and Chrome and I could not see any issues.&lt;&#x2F;p&gt;
-&lt;p&gt;I then fired up Firefox and, yikes! There was a bunch of weird issues. This is strange because normally Chrome to Firefox translates pretty well. I was using the &lt;code&gt;::first-letter&lt;&#x2F;code&gt; element and a few &lt;code&gt;::before&lt;&#x2F;code&gt; elements. But somehow, someway they got messed up. Anyway, I discovered this little snippet:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span&gt;@-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;moz-document url-prefix&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* firefox only styles *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;It works. But what does it mean? The url-prefix() is a way to serve specific styles to a specific URL. In this case, I just want to target a -moz- device. &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;CSS&#x2F;@document?redirectlocale=en-US&amp;amp;redirectslug=CSS%2F%40-moz-document&quot; title=&quot;MDN @Document&quot;&gt;Here is a more in depth definition&lt;&#x2F;a&gt;. This worked nicely, and so it will stay into production.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>My Old Website</title>
-        <published>2012-10-04T00:00:00+00:00</published>
-        <updated>2012-10-04T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/portfolio/my-old-website/"/>
-        <id>https://ohdoylerules.com/portfolio/my-old-website/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/portfolio/my-old-website/">&lt;p&gt;I decided to host my old website because I wanted to show some work with Modernizr.&lt;&#x2F;p&gt;
-&lt;p&gt;Looking back it is actually pretty cool! I kind of miss it haha. It seems to run much better than I remember. I think that is because it was the days of chrome 18 and Firefox 10 which had spotty 3d transform support.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;test&#x2F;old&#x2F;&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;Screen-Shot-2012-10-04-at-11.26.23-AM-e134936451049011.png&quot; alt=&quot;My Old Site&quot; title=&quot;My Old Site&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;Maybe someday I can make a sub-site or a project site based off of that design. This was also one of my first sites to use AJAX. It was pretty frustrating and hard at the time. It is funny looking at my code and the way I handled things back then. I read it and feel like I am looking at a strangers code.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>CSS Date Card</title>
-        <published>2012-09-18T00:00:00+00:00</published>
-        <updated>2012-09-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/fiddle/css-date-card/"/>
-        <id>https://ohdoylerules.com/fiddle/css-date-card/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/fiddle/css-date-card/">&lt;p&gt;I am trying to make up for not posting in the last few days. Here is another thing I have been working on. It is a replication of &lt;a href=&quot;http:&#x2F;&#x2F;dribbble.com&#x2F;shots&#x2F;713807-Extended&quot; title=&quot;Event Card&quot;&gt;another dribbble post&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;dabblet.com&#x2F;gist&#x2F;3743024&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;css-event-card2111.jpg&quot; alt=&quot;css-event-card&quot; title=&quot;Event card replicated in CSS&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;There are a couple of things missing but most of them would be replicated with a webfont. There was also the issue of not having a choice in the anti-aliasing of the font. The image was made using photoshop and probably used crisp or smooth which makes the font look &lt;em&gt;real nice&lt;&#x2F;em&gt;. I don&#x27;t even know if I got the font right. I used Open Sans. It looked close enough so whatever. I&#x27;ve been working on this on and off for about 2 weeks so it is time to give it away!&lt;&#x2F;p&gt;
-&lt;p&gt;Click the image for a dabblet. &lt;em&gt;BTW, I always misspell dabblet because of the triple B in dribbble!&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>CSS3 Pagebend</title>
-        <published>2012-09-18T00:00:00+00:00</published>
-        <updated>2012-09-18T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/fiddle/css3-pagebend/"/>
-        <id>https://ohdoylerules.com/fiddle/css3-pagebend/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/fiddle/css3-pagebend/">&lt;p&gt;I crafted &lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;HpbrL&quot; title=&quot;css3-pagebend&quot;&gt;this lil&#x27; beauty&lt;&#x2F;a&gt; in class today. It turns out that it is really hard to make transforming elements intersect. At least, I couldn&#x27;t figure it out.&lt;&#x2F;p&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;HpbrL&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;css3-pagebend11.jpg&quot; alt=&quot;css3-pagebend&quot; title=&quot;css3-pagebend&quot; &#x2F;&gt;&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;I ended up having to essentially split the image in 2 and then rotateY one of the sides. It didn&#x27;t look quite right when it was bending at the middle, so I made the split like 60-40. As always, click the image for the live action.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>nodelist.each</title>
-        <published>2012-09-06T00:00:00+00:00</published>
-        <updated>2012-09-06T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/snippets/nodelist-each/"/>
-        <id>https://ohdoylerules.com/snippets/nodelist-each/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/snippets/nodelist-each/">&lt;p&gt;I was doing a project in vanilla javascript that used querySelectorAll, which returns a nodelist object. I wanted the jQuery each function so that I could add an event listener to each element. It was a school project and no jQuery allowed so I did some research and came up with this little prototype.&lt;&#x2F;p&gt;
-&lt;p&gt;Here is the result:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;javascript&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-javascript &quot;&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span style=&quot;color:#ebcb8b;&quot;&gt;Object&lt;&#x2F;span&gt;&lt;span&gt;.prototype.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;each &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;callback&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; new empty array
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a &lt;&#x2F;span&gt;&lt;span&gt;= [];
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; iterate through the nodelist
-&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;for &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span&gt;&amp;lt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;.length; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;++) {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; put the objects into the array
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;] = &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;];
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; callback the new array
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;callback&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;]);
-&lt;&#x2F;span&gt;&lt;span&gt;  }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;&#x2F; USAGE
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;x &lt;&#x2F;span&gt;&lt;span&gt;= document.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;querySelectorAll&lt;&#x2F;span&gt;&lt;span&gt;(&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;li&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;);
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;x&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;each&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;elem&lt;&#x2F;span&gt;&lt;span&gt;) {
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;elem&lt;&#x2F;span&gt;&lt;span&gt;.style.background = &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;red&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;});
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Pretty cool. &lt;a href=&quot;http:&#x2F;&#x2F;jsfiddle.net&#x2F;james2doyle&#x2F;nrhgr&#x2F;&quot; title=&quot;each prototype&quot;&gt;Here is the fiddle&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Mozilla Dev Derby</title>
-        <published>2012-08-29T00:00:00+00:00</published>
-        <updated>2012-08-29T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/demo/mozilla-dev-derby/"/>
-        <id>https://ohdoylerules.com/demo/mozilla-dev-derby/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/demo/mozilla-dev-derby/">&lt;p&gt;I have just submitted my demo for the &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;demos&#x2F;detail&#x2F;photo-shake&quot; title=&quot;Photo Shake Page&quot;&gt;Mozzila Dev Derby&lt;&#x2F;a&gt;. If you like it, please vote. Thank you!&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;james2doyle-Camera-Api-Demo2111.png&quot; alt=&quot;Camera Api Demo&quot; &gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;It uses the HTML5 File Api and also uses the device orientation API. Firstly, you upload or take a picture, then that picture fades up below in a polaroid-style div. You can then move you device and see the picture move.&lt;&#x2F;p&gt;
-&lt;p&gt;I also added something I called dynamic shine. This is just a diagonal white-to-transparent gradient. Tilting the device causes the photo to look like it is interacting with the light.&lt;&#x2F;p&gt;
-&lt;p&gt;You can also see the project &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;test&#x2F;cameraapi&#x2F;&quot; title=&quot;photo shake&quot;&gt;self-hosted here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;h4 id=&quot;update&quot;&gt;UPDATE:&lt;&#x2F;h4&gt;
-&lt;p&gt;I got runner up! Here are the &lt;a href=&quot;https:&#x2F;&#x2F;hacks.mozilla.org&#x2F;2012&#x2F;09&#x2F;announcing-the-august-dev-derby-winners&#x2F;&quot; title=&quot;Mozilla Dev Derby August&quot;&gt;results&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>No-Js Image Preview</title>
-        <published>2012-08-27T00:00:00+00:00</published>
-        <updated>2012-08-27T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/fiddle/no-js-image-preview/"/>
-        <id>https://ohdoylerules.com/fiddle/no-js-image-preview/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/fiddle/no-js-image-preview/">&lt;p&gt;Using CSS transforms, I was able to build a little image previewer. There is only one image for both the thumbnail and full size view. Scale does wonders.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;No-Js-Image-Preview-CodePen.png&quot; alt=&quot;No Js Image Preview · CodePen&quot; &gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;I created this guy in &lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;fChbD&quot; title=&quot;Codepen.io&quot;&gt;Codepen.io&lt;&#x2F;a&gt;. It seems to be a lot better than just showing all the html&#x2F;css&#x2F;js in a post. I would appreciate any comments or possible improvements. I might try to build some sort of template&#x2F;plugin so that anyone can just plop in their images and BAM it works nicely.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Styling Radios and Checkboxes. Redux.</title>
-        <published>2012-08-19T00:00:00+00:00</published>
-        <updated>2012-08-19T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/styling-input-redux/"/>
-        <id>https://ohdoylerules.com/web/styling-input-redux/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/styling-input-redux/">&lt;p&gt;A few weeks ago, or something like that, I made a post about &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;web&#x2F;radio-checkboxes&#x2F;&quot; title=&quot;Styling radio and checkbox inputs&quot;&gt;styling your labels to act as checkboxes&#x2F;radios&lt;&#x2F;a&gt;. I recently saw &lt;a href=&quot;http:&#x2F;&#x2F;dribbble.com&#x2F;shots&#x2F;693245-Untitled-iPhone-synth-app-waveforms&quot; title=&quot;iPhone-synth-app-waveforms&quot;&gt;a post on Dribbble by Mikael Eidenberg&lt;&#x2F;a&gt; which inspired me to make some nicely styled examples of that method in action.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;synthappbuttons.png&quot; alt=&quot;Synth App Buttons in pure CSS&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;codepen.io&#x2F;james2doyle&#x2F;pen&#x2F;AKblD&quot; title=&quot;Synth App Buttons&quot;&gt;Here is the pen on Codepen.io&lt;&#x2F;a&gt;. I usually use jsFidddle but I decided to change it up this time. Maybe my next post will be hosted on tinker.io or dabblet… although tinker does not have accounts like the others.&lt;&#x2F;p&gt;
-&lt;p&gt;This is the exact same method as my &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;web&#x2F;radio-checkboxes&#x2F;&quot; title=&quot;Styling radio and checkbox inputs&quot;&gt;previous article&lt;&#x2F;a&gt;, only there is a lot more css.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>WordPress Plugin Swipe.js</title>
-        <published>2012-08-14T00:00:00+00:00</published>
-        <updated>2012-08-14T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/wordpress-plugin-swipe-js/"/>
-        <id>https://ohdoylerules.com/web/wordpress-plugin-swipe-js/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/wordpress-plugin-swipe-js/">&lt;p&gt;I have made my first WordPress plugin and github project: &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;james2doyle&#x2F;Swipe.js-WordPress-Plugin&quot; title=&quot;WordPress Plugin: SwipeJS&quot;&gt;A WordPress plugin for Swipe.js&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;This is my first attempt at a WordPress plugin and a Github project.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Making Checkboxes in WordPress options pages</title>
-        <published>2012-08-11T00:00:00+00:00</published>
-        <updated>2012-08-11T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/checkboxes-options/"/>
-        <id>https://ohdoylerules.com/web/checkboxes-options/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/checkboxes-options/">&lt;p&gt;I am in the process of building my first WordPress plugin. Of course I am wildly researching how to do things. One thing that was particularly hard to find was how to use checkboxes in options pages. Here is the solution I used.&lt;&#x2F;p&gt;
-&lt;p&gt;WordPress has a function called &lt;a href=&quot;http:&#x2F;&#x2F;codex.wordpress.org&#x2F;Function_Reference&#x2F;checked&quot; title=&quot;WordPress Codex For Checked Function&quot;&gt;checked()&lt;&#x2F;a&gt;. This basically returns a true checked attribute if the conditions it is passed are met. Here is how I used it:&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;lt;input type=&amp;quot;checkbox&amp;quot; name=&amp;quot;my_options&amp;quot; &amp;lt;?php checked( get_option(&amp;#39;my_option&amp;#39;) == &amp;#39;on&amp;#39;,true); ?&amp;gt; &#x2F;&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;What I found is that when the option was getting updated it was being stored as &#x27;on&#x27;. So this little PHP snippet says: &amp;quot;If the option named &#x27;my_option&#x27; is equal to &#x27;on&#x27; then add a checked=&amp;quot;checked&amp;quot; attribute to this input tag.&amp;quot; Anyway, I found it quite hard to get a straight up answer to this problem. Since the reason I made this blog is to share my discoveries; here you go.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Styling radio and checkbox inputs</title>
-        <published>2012-08-07T00:00:00+00:00</published>
-        <updated>2012-08-07T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/web/radio-checkboxes/"/>
-        <id>https://ohdoylerules.com/web/radio-checkboxes/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/web/radio-checkboxes/">&lt;p&gt;Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs. Especially when it comes to radio and checkboxes. I will always prefer using CSS instead of images for obvious reasons. But for radios and checkboxes I normally use images. I usually just make a png sprite and use the :checked selector to move its position.&lt;&#x2F;p&gt;
-&lt;p&gt;But now, I have discovered a new way! I took the idea from &lt;a href=&quot;http:&#x2F;&#x2F;css-tricks.com&#x2F;snippets&#x2F;css&#x2F;custom-checkboxes-and-radio-buttons&#x2F;&quot;&gt;CSS Tricks&lt;&#x2F;a&gt;&#x2F;&lt;a href=&quot;https:&#x2F;&#x2F;examples.wufoo.com&#x2F;forms&#x2F;custom-checkboxes-and-radio-buttons&#x2F;&quot; title=&quot;WuFoo Forms Example&quot;&gt;Wufoo Forms&lt;&#x2F;a&gt;. It basically uses the label as the element. You hide the input tag and then style the label with checked and unchecked states.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;img src=&quot;&#x2F;images&#x2F;radio-checkboxes.png&quot; alt=&quot;End Results&quot;&gt;
-&lt;&#x2F;div&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&#x2F;* style this span element so we can display nicely, this styling is not necessary *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;span {
-&lt;&#x2F;span&gt;&lt;span&gt;    margin: 10px 0;
-&lt;&#x2F;span&gt;&lt;span&gt;    display: block;
-&lt;&#x2F;span&gt;&lt;span&gt;    width: 100%;
-&lt;&#x2F;span&gt;&lt;span&gt;    float: left;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;input[type=&amp;quot;radio&amp;quot;],
-&lt;&#x2F;span&gt;&lt;span&gt;input[type=&amp;quot;checkbox&amp;quot;] {
-&lt;&#x2F;span&gt;&lt;span&gt;    &#x2F;* hide the inputs *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;    opacity: 0;
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;* style your lables&#x2F;button *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;input[type=&amp;quot;radio&amp;quot;] + label,
-&lt;&#x2F;span&gt;&lt;span&gt;input[type=&amp;quot;checkbox&amp;quot;] + label {
-&lt;&#x2F;span&gt;&lt;span&gt;    &#x2F;* keep pointer so that you get the little hand showing when you are on a button *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;    cursor: pointer;
-&lt;&#x2F;span&gt;&lt;span&gt;    &#x2F;* the following are the styles *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;    padding: 4px 10px;
-&lt;&#x2F;span&gt;&lt;span&gt;    border: 1px solid #ccc;
-&lt;&#x2F;span&gt;&lt;span&gt;    background: #efefef;
-&lt;&#x2F;span&gt;&lt;span&gt;    color: #aaa;
-&lt;&#x2F;span&gt;&lt;span&gt;    border-radius: 3px;
-&lt;&#x2F;span&gt;&lt;span&gt;    text-shadow: 1px 1px 0 rgba(0,0,0,0);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span&gt;input[type=&amp;quot;radio&amp;quot;]:checked + label,
-&lt;&#x2F;span&gt;&lt;span&gt;input[type=&amp;quot;checkbox&amp;quot;]:checked + label{
-&lt;&#x2F;span&gt;&lt;span&gt;    &#x2F;* style for the checked&#x2F;selected state *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;    background: #777;
-&lt;&#x2F;span&gt;&lt;span&gt;    border: 1px solid #444;
-&lt;&#x2F;span&gt;&lt;span&gt;    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
-&lt;&#x2F;span&gt;&lt;span&gt;    color: white;
-&lt;&#x2F;span&gt;&lt;span&gt;}​
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;I have removed all the unnecessary styles and only put in the relevant stylings. Of course you could always use a background image that moves&#x2F;changes but for this demo I just styled the labels to resemble buttons.&lt;&#x2F;p&gt;
-&lt;pre style=&quot;background-color:#2b303b;color:#c0c5ce;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;lt;span&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;input id=&amp;quot;Radio1&amp;quot; name=&amp;quot;Radios&amp;quot; type=&amp;quot;radio&amp;quot; value=&amp;quot;Option 1&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;label for=&amp;quot;Radio1&amp;quot;&amp;gt;Option 1&amp;lt;&#x2F;label&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;span&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;span&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;input id=&amp;quot;Check1&amp;quot; name=&amp;quot;Checks&amp;quot; type=&amp;quot;checkbox&amp;quot; value=&amp;quot;Item 1&amp;quot;&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;label for=&amp;quot;Check1&amp;quot;&amp;gt;Item 1&amp;lt;&#x2F;label&amp;gt;
-&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;span&amp;gt;
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;The text inside the label will be the text displayed as your button. You must have the ID and FOR attributes on the input and labels. Removing those will break the functionality. As always I have added a little &lt;a href=&quot;http:&#x2F;&#x2F;jsfiddle.net&#x2F;james2doyle&#x2F;YB5c3&#x2F;&quot; title=&quot;Styling radios and checkboxes jsFiddle demo&quot;&gt;jsFiddle demo&lt;&#x2F;a&gt; into the mix.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Generated content in CSS</title>
-        <published>2012-07-27T00:00:00+00:00</published>
-        <updated>2012-07-27T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/fiddle/generated-content-in-css/"/>
-        <id>https://ohdoylerules.com/fiddle/generated-content-in-css/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/fiddle/generated-content-in-css/">&lt;p&gt;I like &lt;a href=&quot;http:&#x2F;&#x2F;jsfiddle.net&#x2F;&quot; title=&quot;jsFiddle&quot;&gt;jsFiddle&lt;&#x2F;a&gt;. I often use it for prototyping. I might want to see what I can make in css or maybe I want to build a little template. A perfect example, I used it to mockup my &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;work&#x2F;&quot; title=&quot;Work&quot;&gt;work&lt;&#x2F;a&gt; section. Since it is just a repeating template, I built the classes and styles in jsFiddle and then just dropped in the php echos. Anyway, here is something I made. It uses generated content. You can use HTML attributes in CSS. This is a classic example:&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* styles for printing *&#x2F;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;@media &lt;&#x2F;span&gt;&lt;span&gt;print{
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* all a tags with an href attribute *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;]:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;after&lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#65737e;&quot;&gt;&#x2F;* display that href after the value *&#x2F;
-&lt;&#x2F;span&gt;&lt;span&gt;        content: &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;attr&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;) &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt;&amp;quot;;
-&lt;&#x2F;span&gt;&lt;span&gt;    }
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;What does this look like?&lt;&#x2F;p&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;Website
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;Would render as &lt;a href=&quot;https:&#x2F;&#x2F;ohdoylerules.com&#x2F;fiddle&#x2F;generated-content-in-css&#x2F;www.example.com&#x2F;&quot;&gt;Website (www.example.com&#x2F;)&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
-&lt;p&gt;So with that in mind, I thought it would be cool to have a button that
-would render a count. So in practical applications it might be used for
-something like an inbox button. In the case I built it is a
-notifications button.&lt;&#x2F;p&gt;
-&lt;div class=&quot;center&quot;&gt;
-  &lt;a href=&quot;http:&#x2F;&#x2F;jsfiddle.net&#x2F;james2doyle&#x2F;LjgzD&quot; target=&quot;_blank&quot; title=&quot;notifications button&quot;&gt;&lt;img src=&quot;&#x2F;images&#x2F;54368011.png&quot; alt=&quot;notifications button&quot;&gt;&lt;&#x2F;a&gt;
-&lt;&#x2F;div&gt;
-&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    color: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;#333&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;4px 10px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    border: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1px &lt;&#x2F;span&gt;&lt;span&gt;solid &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;#aaa&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    outline: none;
-&lt;&#x2F;span&gt;&lt;span&gt;    font-weight: bold;
-&lt;&#x2F;span&gt;&lt;span&gt;    font-size: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;12px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    font-family: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#a3be8c;&quot;&gt;Corbin&lt;&#x2F;span&gt;&lt;span&gt;&amp;#39;;
-&lt;&#x2F;span&gt;&lt;span&gt;    background: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;#eee&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    border-radius: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;3px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    box-shadow: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0 2px 0 &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgba&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.5&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    text-shadow: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0 1px 0 &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgba&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;255&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;255&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;255&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.8&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}
-&lt;&#x2F;span&gt;&lt;span&gt;
-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bf616a;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8fa1b3;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#b48ead;&quot;&gt;after &lt;&#x2F;span&gt;&lt;span&gt;{
-&lt;&#x2F;span&gt;&lt;span&gt;    content: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;attr&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;data-count&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    border-radius: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;10px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    display: inline-block;
-&lt;&#x2F;span&gt;&lt;span&gt;    background: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;#777&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    padding: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;2px 5px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    width: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;15px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    margin: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0 0 0 8px&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    color: white;
-&lt;&#x2F;span&gt;&lt;span&gt;    font-weight: normal;
-&lt;&#x2F;span&gt;&lt;span&gt;    border: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;1px &lt;&#x2F;span&gt;&lt;span&gt;solid &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;#555&lt;&#x2F;span&gt;&lt;span&gt;;
-&lt;&#x2F;span&gt;&lt;span&gt;    box-shadow: inset &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0 1px 2px &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgba&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;255&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;255&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;255&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.5&lt;&#x2F;span&gt;&lt;span&gt;),
-&lt;&#x2F;span&gt;&lt;span&gt;        inset &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0 -1px 2px &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgba&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.5&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;    text-shadow: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0 1px 0 &lt;&#x2F;span&gt;&lt;span style=&quot;color:#96b5b4;&quot;&gt;rgba&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color:#d08770;&quot;&gt;0.6&lt;&#x2F;span&gt;&lt;span&gt;);
-&lt;&#x2F;span&gt;&lt;span&gt;}​
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#2b303b;color:#c0c5ce;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;Notifications​
-&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
-&lt;p&gt;If you would like to see that bad boy in action check out &lt;a href=&quot;http:&#x2F;&#x2F;jsfiddle.net&#x2F;james2doyle&#x2F;LjgzD&#x2F;&quot; title=&quot;jsFiddle css content&quot;&gt;this
-fiddle&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-    <entry xml:lang="en">
-        <title>Installing Android 4.1.1 Jelly Bean for Nexus S</title>
-        <published>2012-07-20T00:00:00+00:00</published>
-        <updated>2012-07-20T00:00:00+00:00</updated>
-        
-        <author>
-          <name>
-            
-              james2doyle@gmail.com (James Doyle)
-            
-          </name>
-        </author>
-        
-        <link rel="alternate" type="text/html" href="https://ohdoylerules.com/android/jellybean-nexuss/"/>
-        <id>https://ohdoylerules.com/android/jellybean-nexuss/</id>
-        
-        <content type="html" xml:base="https://ohdoylerules.com/android/jellybean-nexuss/">&lt;p&gt;So I have been flashing ROMs for a while now. I recently installed Jelly Bean 4.1. I used the OTA(Over The Air) version from &lt;a href=&quot;http:&#x2F;&#x2F;forum.xda-developers.com&#x2F;showthread.php?t=1784497&quot; title=&quot;here&quot;&gt;here&lt;&#x2F;a&gt;. Just make sure you also flash the Simple-Root.zip file. I did not. So I had to root my phone again and then install it. Which wasn&#x27;t too bad but still annoying.&lt;&#x2F;p&gt;
-&lt;p&gt;As with flashing any kind of ROM there is always the thought and reality that you could break something. I had a custom ROM on before I switched to a Jelly Bean based ROM. It had the nice notification power controls which was awesome. But Jelly Bean (or at least any of the ROMs so far) do not. So with a bit of searching I found &lt;a href=&quot;https:&#x2F;&#x2F;play.google.com&#x2F;store&#x2F;apps&#x2F;details?id=com.painless.pc&quot; title=&quot;Power Controls&quot;&gt;Power Controls&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
-&lt;p&gt;It works well and has a lot of customizable features. It is a recommend.&lt;&#x2F;p&gt;
-</content>
-        
-    </entry>
-</feed>
diff --git a/docs/demo/flexbox-demo/index.html b/docs/demo/flexbox-demo/index.html
index 53c2ba6..687b6ef 100644
--- a/docs/demo/flexbox-demo/index.html
+++ b/docs/demo/flexbox-demo/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Flexbox Demo | OhDoyleRules</title><meta content="Flexbox Demo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Flexbox Demo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/flexbox-demo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/flexbox-demo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Flexbox Demo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A demo of CSS Flexbox" name=description><meta content="A demo of CSS Flexbox" itemprop=description><meta content="A demo of CSS Flexbox" property=og:description><meta content="A demo of CSS Flexbox" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Flexbox Demo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="flexbox, webkit, demo, layout" itemprop=keywords><meta content="flexbox, webkit, demo, layout" property=article:tag><meta content="flexbox, webkit, demo, layout" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/flexbox-demo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Flexbox Demo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>An old flexbox demo I made a while back. It may not be the latest syntax so beware!!<p><a href=http://codepen.io/james2doyle/pen/svEek><img alt="Flexbox Demo" title="Flexbox Demo" src=/images/Screen-Shot-2012-11-13-at-4.23.41-PM-e135284190554411.png></a><p><a title="Codepen Link" href=http://codepen.io/james2doyle/pen/svEek>Check out the pen</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Flexbox Demo | OhDoyleRules</title><meta content="Flexbox Demo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Flexbox Demo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/flexbox-demo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/flexbox-demo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Flexbox Demo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A demo of CSS Flexbox" name=description><meta content="A demo of CSS Flexbox" itemprop=description><meta content="A demo of CSS Flexbox" property=og:description><meta content="A demo of CSS Flexbox" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Flexbox Demo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="flexbox, webkit, demo, layout" itemprop=keywords><meta content="flexbox, webkit, demo, layout" property=article:tag><meta content="flexbox, webkit, demo, layout" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/flexbox-demo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Flexbox Demo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>An old flexbox demo I made a while back. It may not be the latest syntax so beware!!<p><a rel="noopener nofollow noreferrer" href=http://codepen.io/james2doyle/pen/svEek target=_blank><img alt="Flexbox Demo" decoding=async loading=lazy src=/images/Screen-Shot-2012-11-13-at-4.23.41-PM-e135284190554411.png title=Flexbox%20Demo></a><p><a rel="noopener nofollow noreferrer" title="Codepen Link" href=http://codepen.io/james2doyle/pen/svEek target=_blank>Check out the pen</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/demo/generated-content-title/index.html b/docs/demo/generated-content-title/index.html
index 112e581..aee4c41 100644
--- a/docs/demo/generated-content-title/index.html
+++ b/docs/demo/generated-content-title/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Generated Content in CSS | OhDoyleRules</title><meta content="Generated Content in CSS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Generated Content in CSS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/generated-content-title/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/generated-content-title/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Generated Content in CSS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Generated Content in CSS to show an Article link in plain text" name=description><meta content="Use Generated Content in CSS to show an Article link in plain text" itemprop=description><meta content="Use Generated Content in CSS to show an Article link in plain text" property=og:description><meta content="Use Generated Content in CSS to show an Article link in plain text" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Generated Content in CSS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="generated, content, article, title, jsfiddle, title, button, work" itemprop=keywords><meta content="generated, content, article, title, jsfiddle, title, button, work" property=article:tag><meta content="generated, content, article, title, jsfiddle, title, button, work" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/generated-content-title/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Generated Content in CSS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I like <a href=http://jsfiddle.net/ title=jsFiddle>jsFiddle</a>. I often use it for prototyping. I might want to see what I can make in css or maybe I want to build a little template. A perfect example, I used it to mockup my <a href=https://ohdoylerules.com/work/ title=Work>work</a> section.<p>Since it is just a repeating template, I built the classes and styles in jsFiddle and then just dropped in the PHP <code>echo</code>s. Anyway, here is something I made. It uses generated content. You can use HTML attributes in CSS. This is a classic example:<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/*! styles for printing */
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Generated Content in CSS | OhDoyleRules</title><meta content="Generated Content in CSS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Generated Content in CSS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/generated-content-title/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/generated-content-title/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Generated Content in CSS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Generated Content in CSS to show an Article link in plain text" name=description><meta content="Use Generated Content in CSS to show an Article link in plain text" itemprop=description><meta content="Use Generated Content in CSS to show an Article link in plain text" property=og:description><meta content="Use Generated Content in CSS to show an Article link in plain text" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Generated Content in CSS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="generated, content, article, title, jsfiddle, title, button, work" itemprop=keywords><meta content="generated, content, article, title, jsfiddle, title, button, work" property=article:tag><meta content="generated, content, article, title, jsfiddle, title, button, work" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/generated-content-title/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Generated Content in CSS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I like <a rel="noopener nofollow noreferrer" href=http://jsfiddle.net/ target=_blank title=jsFiddle>jsFiddle</a>. I often use it for prototyping. I might want to see what I can make in css or maybe I want to build a little template. A perfect example, I used it to mockup my <a rel="noopener nofollow noreferrer" href=https://ohdoylerules.com/work/ target=_blank title=Work>work</a> section.<p>Since it is just a repeating template, I built the classes and styles in jsFiddle and then just dropped in the PHP <code>echo</code>s. Anyway, here is something I made. It uses generated content. You can use HTML attributes in CSS. This is a classic example:<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/*! styles for printing */
 </span><span style=color:#b48ead>@media </span><span>print{
 </span><span>  </span><span style=color:#65737e>/*! all a tags with an href attribute */
 </span><span>  </span><span style=color:#bf616a>a</span><span style=color:#8fa1b3>[</span><span style=color:#d08770>href</span><span style=color:#8fa1b3>]:</span><span style=color:#b48ead>after</span><span>{
@@ -34,4 +34,4 @@
 </span><span>      inset 0 -1px 2px rgba(0,0,0,0.5);
 </span><span>  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
 </span><span>}​
-</span></code></pre><p>If you would like to see that bad boy in action check out <a title="jsFiddle css content" href=http://jsfiddle.net/james2doyle/LjgzD/>this fiddle</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>If you would like to see that bad boy in action check out <a rel="noopener nofollow noreferrer" title="jsFiddle css content" href=http://jsfiddle.net/james2doyle/LjgzD/ target=_blank>this fiddle</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/demo/godaddy-digital-ocean/index.html b/docs/demo/godaddy-digital-ocean/index.html
index 643bf46..e009564 100644
--- a/docs/demo/godaddy-digital-ocean/index.html
+++ b/docs/demo/godaddy-digital-ocean/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>GoDaddy Email on Digital Ocean | OhDoyleRules</title><meta content="GoDaddy Email on Digital Ocean | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="GoDaddy Email on Digital Ocean" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/godaddy-digital-ocean/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/godaddy-digital-ocean/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="GoDaddy Email on Digital Ocean" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use GoDaddy Email on Digital Ocean" name=description><meta content="How to use GoDaddy Email on Digital Ocean" itemprop=description><meta content="How to use GoDaddy Email on Digital Ocean" property=og:description><meta content="How to use GoDaddy Email on Digital Ocean" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="GoDaddy Email on Digital Ocean | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="godaddy, email, digital ocean, hosting, mx, records, dns, settings" itemprop=keywords><meta content="godaddy, email, digital ocean, hosting, mx, records, dns, settings" property=article:tag><meta content="godaddy, email, digital ocean, hosting, mx, records, dns, settings" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/godaddy-digital-ocean/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">GoDaddy Email on Digital Ocean</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I was recently trying to send an email to a domain I had purchased on GoDaddy but had hosting on <a href="https://www.digitalocean.com/?refcode=802f151adea5">Digital Ocean</a>.<p>I sent the email and a couple hours later it bounced. This wasn't good. My email was going to GoDadddy but I want the site <em>hosted</em> on Digital Ocean.<p>So I had to find how to keep the domain hosted on Digital Ocean but the email needs to stay on GoDaddy servers.<p>Here are the DNS settings I used:<div class=center><a title="GoDaddy Digital Ocean DNS Records" href=/images/do-records1.png target=_blank><img alt="GoDaddy Digital Ocean DNS Records" src=/images/do-records1.png></a></div><p>Your settings may differ, so please follow these instructions in order to check if your settings are correct:<ul><li>Log into GoDaddy<li>Launch the domain you are looking to check<li>Go to the email tab<li>Hover over tools and click "Server Settings"<li>You will see a popup showing all the settings</ul><p>There you can see that there are a bunch of records listed. These are the ones for your specific domain.<div class=center><a title="GoDaddy Default MX and DNS Records" href=/images/do-records2.png target=_blank><img alt="GoDaddy Default MX and DNS Records" src=/images/do-records2.png></a></div><p>Hopefully this was helpful because it took a long time to figure out! It is even more painful because the records take a while to propogate. Boo!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>GoDaddy Email on Digital Ocean | OhDoyleRules</title><meta content="GoDaddy Email on Digital Ocean | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="GoDaddy Email on Digital Ocean" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/godaddy-digital-ocean/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/godaddy-digital-ocean/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="GoDaddy Email on Digital Ocean" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use GoDaddy Email on Digital Ocean" name=description><meta content="How to use GoDaddy Email on Digital Ocean" itemprop=description><meta content="How to use GoDaddy Email on Digital Ocean" property=og:description><meta content="How to use GoDaddy Email on Digital Ocean" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="GoDaddy Email on Digital Ocean | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="godaddy, email, digital ocean, hosting, mx, records, dns, settings" itemprop=keywords><meta content="godaddy, email, digital ocean, hosting, mx, records, dns, settings" property=article:tag><meta content="godaddy, email, digital ocean, hosting, mx, records, dns, settings" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/godaddy-digital-ocean/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">GoDaddy Email on Digital Ocean</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I was recently trying to send an email to a domain I had purchased on GoDaddy but had hosting on <a href="https://www.digitalocean.com/?refcode=802f151adea5" rel="noopener nofollow noreferrer" target=_blank>Digital Ocean</a>.<p>I sent the email and a couple hours later it bounced. This wasn't good. My email was going to GoDadddy but I want the site <em>hosted</em> on Digital Ocean.<p>So I had to find how to keep the domain hosted on Digital Ocean but the email needs to stay on GoDaddy servers.<p>Here are the DNS settings I used:<div class=center><a title="GoDaddy Digital Ocean DNS Records" href=/images/do-records1.png target=_blank><img alt="GoDaddy Digital Ocean DNS Records" src=/images/do-records1.png></a></div><p>Your settings may differ, so please follow these instructions in order to check if your settings are correct:<ul><li>Log into GoDaddy<li>Launch the domain you are looking to check<li>Go to the email tab<li>Hover over tools and click "Server Settings"<li>You will see a popup showing all the settings</ul><p>There you can see that there are a bunch of records listed. These are the ones for your specific domain.<div class=center><a title="GoDaddy Default MX and DNS Records" href=/images/do-records2.png target=_blank><img alt="GoDaddy Default MX and DNS Records" src=/images/do-records2.png></a></div><p>Hopefully this was helpful because it took a long time to figure out! It is even more painful because the records take a while to propogate. Boo!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/demo/index.html b/docs/demo/index.html
index a071074..f491fab 100644
--- a/docs/demo/index.html
+++ b/docs/demo/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Demo | OhDoyleRules</title><meta content="Demo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Demo itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Demo name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The demo category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The demo category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The demo category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The demo category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Letterpress loader in CSS" href=https://ohdoylerules.com/demo/letterpress-loader-in-css/>Letterpress loader in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2012</span></span><div class=post-intro><p>Create the Letterpress loader in CSS<p><a title="Read Letterpress loader in CSS" class=read-more href=https://ohdoylerules.com/demo/letterpress-loader-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Flexbox Demo" href=https://ohdoylerules.com/demo/flexbox-demo/>Flexbox Demo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2012</span></span><div class=post-intro><p>A demo of CSS Flexbox<p><a title="Read Flexbox Demo" class=read-more href=https://ohdoylerules.com/demo/flexbox-demo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PHP Variables in strings" href=https://ohdoylerules.com/demo/php-variables-in-strings/>PHP Variables in strings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 21, 2013</span></span><div class=post-intro><p>A list of all the ways you can put PHP Variables in strings<p><a title="Read PHP Variables in strings" class=read-more href=https://ohdoylerules.com/demo/php-variables-in-strings/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Generated Content in CSS" href=https://ohdoylerules.com/demo/generated-content-title/>Generated Content in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div class=post-intro><p>Use Generated Content in CSS to show an Article link in plain text<p><a title="Read Generated Content in CSS" class=read-more href=https://ohdoylerules.com/demo/generated-content-title/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="GoDaddy Email on Digital Ocean" href=https://ohdoylerules.com/demo/godaddy-digital-ocean/>GoDaddy Email on Digital Ocean</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2013</span></span><div class=post-intro><p>How to use GoDaddy Email on Digital Ocean<p><a title="Read GoDaddy Email on Digital Ocean" class=read-more href=https://ohdoylerules.com/demo/godaddy-digital-ocean/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Making a socket.io app and how socket.io works" href=https://ohdoylerules.com/demo/socketio-works-howto/>Making a socket.io app and how socket.io works</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 13, 2013</span></span><div class=post-intro><p>Making a socket.io app and how socket.io works<p><a title="Read Making a socket.io app and how socket.io works" class=read-more href=https://ohdoylerules.com/demo/socketio-works-howto/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="No Javascript CSS Accordion" href=https://ohdoylerules.com/demo/no-javascript-accordion/>No Javascript CSS Accordion</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2012</span></span><div class=post-intro><p>Build an Accordion with just CSS and no Javascript<p><a title="Read No Javascript CSS Accordion" class=read-more href=https://ohdoylerules.com/demo/no-javascript-accordion/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Mozilla Dev Derby" href=https://ohdoylerules.com/demo/mozilla-dev-derby/>Mozilla Dev Derby</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2012</span></span><div class=post-intro><p>James Doyle runner up in Mozilla Dev Derby September 2012<p><a title="Read Mozilla Dev Derby" class=read-more href=https://ohdoylerules.com/demo/mozilla-dev-derby/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Demo | OhDoyleRules</title><meta content="Demo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Demo itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Demo name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The demo category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The demo category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The demo category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The demo category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Generated Content in CSS" href=https://ohdoylerules.com/demo/generated-content-title/>Generated Content in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div class=post-intro><p>Use Generated Content in CSS to show an Article link in plain text<p><a title="Read Generated Content in CSS" class=read-more href=https://ohdoylerules.com/demo/generated-content-title/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PHP Variables in strings" href=https://ohdoylerules.com/demo/php-variables-in-strings/>PHP Variables in strings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 21, 2013</span></span><div class=post-intro><p>A list of all the ways you can put PHP Variables in strings<p><a title="Read PHP Variables in strings" class=read-more href=https://ohdoylerules.com/demo/php-variables-in-strings/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="No Javascript CSS Accordion" href=https://ohdoylerules.com/demo/no-javascript-accordion/>No Javascript CSS Accordion</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2012</span></span><div class=post-intro><p>Build an Accordion with just CSS and no Javascript<p><a title="Read No Javascript CSS Accordion" class=read-more href=https://ohdoylerules.com/demo/no-javascript-accordion/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="GoDaddy Email on Digital Ocean" href=https://ohdoylerules.com/demo/godaddy-digital-ocean/>GoDaddy Email on Digital Ocean</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2013</span></span><div class=post-intro><p>How to use GoDaddy Email on Digital Ocean<p><a title="Read GoDaddy Email on Digital Ocean" class=read-more href=https://ohdoylerules.com/demo/godaddy-digital-ocean/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Letterpress loader in CSS" href=https://ohdoylerules.com/demo/letterpress-loader-in-css/>Letterpress loader in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2012</span></span><div class=post-intro><p>Create the Letterpress loader in CSS<p><a title="Read Letterpress loader in CSS" class=read-more href=https://ohdoylerules.com/demo/letterpress-loader-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Mozilla Dev Derby" href=https://ohdoylerules.com/demo/mozilla-dev-derby/>Mozilla Dev Derby</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2012</span></span><div class=post-intro><p>James Doyle runner up in Mozilla Dev Derby September 2012<p><a title="Read Mozilla Dev Derby" class=read-more href=https://ohdoylerules.com/demo/mozilla-dev-derby/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Making a socket.io app and how socket.io works" href=https://ohdoylerules.com/demo/socketio-works-howto/>Making a socket.io app and how socket.io works</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 13, 2013</span></span><div class=post-intro><p>Making a socket.io app and how socket.io works<p><a title="Read Making a socket.io app and how socket.io works" class=read-more href=https://ohdoylerules.com/demo/socketio-works-howto/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Flexbox Demo" href=https://ohdoylerules.com/demo/flexbox-demo/>Flexbox Demo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2012</span></span><div class=post-intro><p>A demo of CSS Flexbox<p><a title="Read Flexbox Demo" class=read-more href=https://ohdoylerules.com/demo/flexbox-demo/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/demo/letterpress-loader-in-css/index.html b/docs/demo/letterpress-loader-in-css/index.html
index b738e2d..232212b 100644
--- a/docs/demo/letterpress-loader-in-css/index.html
+++ b/docs/demo/letterpress-loader-in-css/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Letterpress loader in CSS | OhDoyleRules</title><meta content="Letterpress loader in CSS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Letterpress loader in CSS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/letterpress-loader-in-css/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/letterpress-loader-in-css/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Letterpress loader in CSS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create the Letterpress loader in CSS" name=description><meta content="Create the Letterpress loader in CSS" itemprop=description><meta content="Create the Letterpress loader in CSS" property=og:description><meta content="Create the Letterpress loader in CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Letterpress loader in CSS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="letterpress, css, css3, loader, icon, loading, animation, transition, rotate, ajax" itemprop=keywords><meta content="letterpress, css, css3, loader, icon, loading, animation, transition, rotate, ajax" property=article:tag><meta content="letterpress, css, css3, loader, icon, loading, animation, transition, rotate, ajax" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/letterpress-loader-in-css/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Letterpress loader in CSS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I recently bought the amazing Letterpress app for iPhone. It truly is gorgeous, and has an amazing UI. It inspired me to make this little doodle.<div class=center><img alt="Letterpress Loader In CSS" src=/images/Screen-Shot-2012-11-04-at-1.34.39-AM11.png></div><p>This is a little tribute. It's an animated css loader in the style of Letterpress. It's a little different because it uses the custom cubic-bezier curve called 'ease-in-out-back', which is essentially elastic. I got the values from the great site <a href=http://matthewlein.com/ceaser/ title=Ceaser>Ceaser</a>.<p>As always, <a title="Letterpress CSS Loader" href=http://codepen.io/james2doyle/pen/rDEzp>check out the pen</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Letterpress loader in CSS | OhDoyleRules</title><meta content="Letterpress loader in CSS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Letterpress loader in CSS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/letterpress-loader-in-css/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/letterpress-loader-in-css/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Letterpress loader in CSS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create the Letterpress loader in CSS" name=description><meta content="Create the Letterpress loader in CSS" itemprop=description><meta content="Create the Letterpress loader in CSS" property=og:description><meta content="Create the Letterpress loader in CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Letterpress loader in CSS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="letterpress, css, css3, loader, icon, loading, animation, transition, rotate, ajax" itemprop=keywords><meta content="letterpress, css, css3, loader, icon, loading, animation, transition, rotate, ajax" property=article:tag><meta content="letterpress, css, css3, loader, icon, loading, animation, transition, rotate, ajax" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/letterpress-loader-in-css/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Letterpress loader in CSS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I recently bought the amazing Letterpress app for iPhone. It truly is gorgeous, and has an amazing UI. It inspired me to make this little doodle.<div class=center><img alt="Letterpress Loader In CSS" src=/images/Screen-Shot-2012-11-04-at-1.34.39-AM11.png></div><p>This is a little tribute. It's an animated css loader in the style of Letterpress. It's a little different because it uses the custom cubic-bezier curve called 'ease-in-out-back', which is essentially elastic. I got the values from the great site <a rel="noopener nofollow noreferrer" href=http://matthewlein.com/ceaser/ target=_blank title=Ceaser>Ceaser</a>.<p>As always, <a rel="noopener nofollow noreferrer" title="Letterpress CSS Loader" href=http://codepen.io/james2doyle/pen/rDEzp target=_blank>check out the pen</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/demo/mozilla-dev-derby/index.html b/docs/demo/mozilla-dev-derby/index.html
index bb35c6c..78297a5 100644
--- a/docs/demo/mozilla-dev-derby/index.html
+++ b/docs/demo/mozilla-dev-derby/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Mozilla Dev Derby | OhDoyleRules</title><meta content="Mozilla Dev Derby | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Mozilla Dev Derby" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/mozilla-dev-derby/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/mozilla-dev-derby/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Mozilla Dev Derby" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="James Doyle runner up in Mozilla Dev Derby September 2012" name=description><meta content="James Doyle runner up in Mozilla Dev Derby September 2012" itemprop=description><meta content="James Doyle runner up in Mozilla Dev Derby September 2012" property=og:description><meta content="James Doyle runner up in Mozilla Dev Derby September 2012" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Mozilla Dev Derby | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="mozilla, dev, derby, 2012, photo, shake, runner, up, august, camera, api" itemprop=keywords><meta content="mozilla, dev, derby, 2012, photo, shake, runner, up, august, camera, api" property=article:tag><meta content="mozilla, dev, derby, 2012, photo, shake, runner, up, august, camera, api" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/mozilla-dev-derby/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Mozilla Dev Derby</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I have just submitted my demo for the <a title="Photo Shake Page" href=https://developer.mozilla.org/en-US/demos/detail/photo-shake>Mozzila Dev Derby</a>. If you like it, please vote. Thank you!<div class=center><img alt="Camera Api Demo" src=/images/james2doyle-Camera-Api-Demo2111.png></div><p>It uses the HTML5 File Api and also uses the device orientation API. Firstly, you upload or take a picture, then that picture fades up below in a polaroid-style div. You can then move you device and see the picture move.<p>I also added something I called dynamic shine. This is just a diagonal white-to-transparent gradient. Tilting the device causes the photo to look like it is interacting with the light.<p>You can also see the project <a title="photo shake" href=https://ohdoylerules.com/test/cameraapi/>self-hosted here</a>.<h4 id=update>UPDATE:</h4><p>I got runner up! Here are the <a title="Mozilla Dev Derby August" href=https://hacks.mozilla.org/2012/09/announcing-the-august-dev-derby-winners/>results</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Mozilla Dev Derby | OhDoyleRules</title><meta content="Mozilla Dev Derby | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Mozilla Dev Derby" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/mozilla-dev-derby/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/mozilla-dev-derby/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Mozilla Dev Derby" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="James Doyle runner up in Mozilla Dev Derby September 2012" name=description><meta content="James Doyle runner up in Mozilla Dev Derby September 2012" itemprop=description><meta content="James Doyle runner up in Mozilla Dev Derby September 2012" property=og:description><meta content="James Doyle runner up in Mozilla Dev Derby September 2012" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Mozilla Dev Derby | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="mozilla, dev, derby, 2012, photo, shake, runner, up, august, camera, api" itemprop=keywords><meta content="mozilla, dev, derby, 2012, photo, shake, runner, up, august, camera, api" property=article:tag><meta content="mozilla, dev, derby, 2012, photo, shake, runner, up, august, camera, api" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/mozilla-dev-derby/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Mozilla Dev Derby</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I have just submitted my demo for the <a rel="noopener nofollow noreferrer" title="Photo Shake Page" href=https://developer.mozilla.org/en-US/demos/detail/photo-shake target=_blank>Mozzila Dev Derby</a>. If you like it, please vote. Thank you!<div class=center><img alt="Camera Api Demo" src=/images/james2doyle-Camera-Api-Demo2111.png></div><p>It uses the HTML5 File Api and also uses the device orientation API. Firstly, you upload or take a picture, then that picture fades up below in a polaroid-style div. You can then move you device and see the picture move.<p>I also added something I called dynamic shine. This is just a diagonal white-to-transparent gradient. Tilting the device causes the photo to look like it is interacting with the light.<p>You can also see the project <a rel="noopener nofollow noreferrer" title="photo shake" href=https://ohdoylerules.com/test/cameraapi/ target=_blank>self-hosted here</a>.<h4 id=update>UPDATE:</h4><p>I got runner up! Here are the <a rel="noopener nofollow noreferrer" title="Mozilla Dev Derby August" href=https://hacks.mozilla.org/2012/09/announcing-the-august-dev-derby-winners/ target=_blank>results</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/demo/no-javascript-accordion/index.html b/docs/demo/no-javascript-accordion/index.html
index 8d0839b..9f8ad9d 100644
--- a/docs/demo/no-javascript-accordion/index.html
+++ b/docs/demo/no-javascript-accordion/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>No Javascript CSS Accordion | OhDoyleRules</title><meta content="No Javascript CSS Accordion | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="No Javascript CSS Accordion" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/no-javascript-accordion/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/no-javascript-accordion/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="No Javascript CSS Accordion" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Build an Accordion with just CSS and no Javascript" name=description><meta content="Build an Accordion with just CSS and no Javascript" itemprop=description><meta content="Build an Accordion with just CSS and no Javascript" property=og:description><meta content="Build an Accordion with just CSS and no Javascript" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="No Javascript CSS Accordion | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="no, javascript, accordion, target, css, only, codepen, fiddle" itemprop=keywords><meta content="no, javascript, accordion, target, css, only, codepen, fiddle" property=article:tag><meta content="no, javascript, accordion, target, css, only, codepen, fiddle" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/no-javascript-accordion/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">No Javascript CSS Accordion</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I made this today. It's a little CSS-only accordion. It uses the <code>:target</code> selector. The <code>:target</code> selector is rather new. It also has some quirks. It is almost like an onclick without the javascript.<div class=center><img alt="no-js accordion" src=/images/Screen-Shot-2012-10-17-at-1.54.00-PM11.png></div><p>The thing I find is that the name is being passed through the URL when using this method. This is nice when you want to refresh the page and keep the same item active. But that is also a downside because maybe when you refresh you want everything to reset. In that case, you would need to delete the variable/id out of the URL and then refresh.<p>But just <a title="no-js accordion" href=http://codepen.io/james2doyle/pen/tgxDr>check it out</a> already!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>No Javascript CSS Accordion | OhDoyleRules</title><meta content="No Javascript CSS Accordion | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="No Javascript CSS Accordion" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/no-javascript-accordion/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/no-javascript-accordion/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="No Javascript CSS Accordion" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Build an Accordion with just CSS and no Javascript" name=description><meta content="Build an Accordion with just CSS and no Javascript" itemprop=description><meta content="Build an Accordion with just CSS and no Javascript" property=og:description><meta content="Build an Accordion with just CSS and no Javascript" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="No Javascript CSS Accordion | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="no, javascript, accordion, target, css, only, codepen, fiddle" itemprop=keywords><meta content="no, javascript, accordion, target, css, only, codepen, fiddle" property=article:tag><meta content="no, javascript, accordion, target, css, only, codepen, fiddle" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/no-javascript-accordion/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">No Javascript CSS Accordion</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I made this today. It's a little CSS-only accordion. It uses the <code>:target</code> selector. The <code>:target</code> selector is rather new. It also has some quirks. It is almost like an onclick without the javascript.<div class=center><img alt="no-js accordion" src=/images/Screen-Shot-2012-10-17-at-1.54.00-PM11.png></div><p>The thing I find is that the name is being passed through the URL when using this method. This is nice when you want to refresh the page and keep the same item active. But that is also a downside because maybe when you refresh you want everything to reset. In that case, you would need to delete the variable/id out of the URL and then refresh.<p>But just <a rel="noopener nofollow noreferrer" title="no-js accordion" href=http://codepen.io/james2doyle/pen/tgxDr target=_blank>check it out</a> already!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/demo/socketio-works-howto/index.html b/docs/demo/socketio-works-howto/index.html
index fbff411..0060baf 100644
--- a/docs/demo/socketio-works-howto/index.html
+++ b/docs/demo/socketio-works-howto/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Making a socket.io app and how socket.io works | OhDoyleRules</title><meta content="Making a socket.io app and how socket.io works | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Making a socket.io app and how socket.io works" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/socketio-works-howto/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/socketio-works-howto/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Making a socket.io app and how socket.io works" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Making a socket.io app and how socket.io works" name=description><meta content="Making a socket.io app and how socket.io works" itemprop=description><meta content="Making a socket.io app and how socket.io works" property=og:description><meta content="Making a socket.io app and how socket.io works" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Making a socket.io app and how socket.io works | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="socket, io, demo, nodejs, video" itemprop=keywords><meta content="socket, io, demo, nodejs, video" property=article:tag><meta content="socket, io, demo, nodejs, video" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/socketio-works-howto/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Making a socket.io app and how socket.io works</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 13, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I made my first video about web development. It is a quick video about socket.io and how it works with node and such.<p><a href=http://youtu.be/JfYRGTvMbBA><img alt="Socket.io demo app" src=/images/vlcsnap-2013-01-12-16h52m23s239.jpg></a><p>It also includes a little demo of a tiny app I built. I may release the source later on depending on the videos popularity.<p><a href=http://youtu.be/JfYRGTvMbBA>Making a socket.io app</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Making a socket.io app and how socket.io works | OhDoyleRules</title><meta content="Making a socket.io app and how socket.io works | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Making a socket.io app and how socket.io works" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/demo/socketio-works-howto/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/demo/socketio-works-howto/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Making a socket.io app and how socket.io works" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Making a socket.io app and how socket.io works" name=description><meta content="Making a socket.io app and how socket.io works" itemprop=description><meta content="Making a socket.io app and how socket.io works" property=og:description><meta content="Making a socket.io app and how socket.io works" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Making a socket.io app and how socket.io works | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="socket, io, demo, nodejs, video" itemprop=keywords><meta content="socket, io, demo, nodejs, video" property=article:tag><meta content="socket, io, demo, nodejs, video" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/demo/socketio-works-howto/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Making a socket.io app and how socket.io works</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 13, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I made my first video about web development. It is a quick video about socket.io and how it works with node and such.<p><a rel="noopener nofollow noreferrer" href=http://youtu.be/JfYRGTvMbBA target=_blank><img alt="Socket.io demo app" decoding=async loading=lazy src=/images/vlcsnap-2013-01-12-16h52m23s239.jpg></a><p>It also includes a little demo of a tiny app I built. I may release the source later on depending on the videos popularity.<p><a rel="noopener nofollow noreferrer" href=http://youtu.be/JfYRGTvMbBA target=_blank>Making a socket.io app</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/fiddle/css-date-card/index.html b/docs/fiddle/css-date-card/index.html
index 6589c1d..a16089b 100644
--- a/docs/fiddle/css-date-card/index.html
+++ b/docs/fiddle/css-date-card/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>CSS Date Card | OhDoyleRules</title><meta content="CSS Date Card | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="CSS Date Card" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/css-date-card/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/css-date-card/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="CSS Date Card" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a Date Card using CSS transitions, animations, and gradients" name=description><meta content="Create a Date Card using CSS transitions, animations, and gradients" itemprop=description><meta content="Create a Date Card using CSS transitions, animations, and gradients" property=og:description><meta content="Create a Date Card using CSS transitions, animations, and gradients" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="CSS Date Card | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="css, date, card, animations, gradients, dabblet" itemprop=keywords><meta content="css, date, card, animations, gradients, dabblet" property=article:tag><meta content="css, date, card, animations, gradients, dabblet" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/css-date-card/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">CSS Date Card</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I am trying to make up for not posting in the last few days. Here is another thing I have been working on. It is a replication of <a title="Event Card" href=http://dribbble.com/shots/713807-Extended>another dribbble post</a>.<p><a href=http://dabblet.com/gist/3743024><img title="Event card replicated in CSS" alt=css-event-card src=/images/css-event-card2111.jpg></a><p>There are a couple of things missing but most of them would be replicated with a webfont. There was also the issue of not having a choice in the anti-aliasing of the font. The image was made using photoshop and probably used crisp or smooth which makes the font look <em>real nice</em>. I don't even know if I got the font right. I used Open Sans. It looked close enough so whatever. I've been working on this on and off for about 2 weeks so it is time to give it away!<p>Click the image for a dabblet. <em>BTW, I always misspell dabblet because of the triple B in dribbble!</em></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>CSS Date Card | OhDoyleRules</title><meta content="CSS Date Card | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="CSS Date Card" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/css-date-card/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/css-date-card/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="CSS Date Card" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a Date Card using CSS transitions, animations, and gradients" name=description><meta content="Create a Date Card using CSS transitions, animations, and gradients" itemprop=description><meta content="Create a Date Card using CSS transitions, animations, and gradients" property=og:description><meta content="Create a Date Card using CSS transitions, animations, and gradients" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="CSS Date Card | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="css, date, card, animations, gradients, dabblet" itemprop=keywords><meta content="css, date, card, animations, gradients, dabblet" property=article:tag><meta content="css, date, card, animations, gradients, dabblet" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/css-date-card/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">CSS Date Card</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I am trying to make up for not posting in the last few days. Here is another thing I have been working on. It is a replication of <a rel="noopener nofollow noreferrer" title="Event Card" href=http://dribbble.com/shots/713807-Extended target=_blank>another dribbble post</a>.<p><a rel="noopener nofollow noreferrer" href=http://dabblet.com/gist/3743024 target=_blank><img alt=css-event-card decoding=async loading=lazy src=/images/css-event-card2111.jpg title=Event%20card%20replicated%20in%20CSS></a><p>There are a couple of things missing but most of them would be replicated with a webfont. There was also the issue of not having a choice in the anti-aliasing of the font. The image was made using photoshop and probably used crisp or smooth which makes the font look <em>real nice</em>. I don't even know if I got the font right. I used Open Sans. It looked close enough so whatever. I've been working on this on and off for about 2 weeks so it is time to give it away!<p>Click the image for a dabblet. <em>BTW, I always misspell dabblet because of the triple B in dribbble!</em></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/fiddle/css3-pagebend/index.html b/docs/fiddle/css3-pagebend/index.html
index e95f9b7..1775ccf 100644
--- a/docs/fiddle/css3-pagebend/index.html
+++ b/docs/fiddle/css3-pagebend/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>CSS3 Pagebend | OhDoyleRules</title><meta content="CSS3 Pagebend | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="CSS3 Pagebend" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/css3-pagebend/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/css3-pagebend/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="CSS3 Pagebend" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a Pagebend effect using CSS" name=description><meta content="Create a Pagebend effect using CSS" itemprop=description><meta content="Create a Pagebend effect using CSS" property=og:description><meta content="Create a Pagebend effect using CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="CSS3 Pagebend | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="css3, page, bend, flip, fold, animation, transition, 3d" itemprop=keywords><meta content="css3, page, bend, flip, fold, animation, transition, 3d" property=article:tag><meta content="css3, page, bend, flip, fold, animation, transition, 3d" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/css3-pagebend/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">CSS3 Pagebend</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I crafted <a href=http://codepen.io/james2doyle/pen/HpbrL title=css3-pagebend>this lil' beauty</a> in class today. It turns out that it is really hard to make transforming elements intersect. At least, I couldn't figure it out.<p><a href=http://codepen.io/james2doyle/pen/HpbrL><img alt=css3-pagebend src=/images/css3-pagebend11.jpg title=css3-pagebend></a><p>I ended up having to essentially split the image in 2 and then rotateY one of the sides. It didn't look quite right when it was bending at the middle, so I made the split like 60-40. As always, click the image for the live action.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>CSS3 Pagebend | OhDoyleRules</title><meta content="CSS3 Pagebend | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="CSS3 Pagebend" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/css3-pagebend/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/css3-pagebend/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="CSS3 Pagebend" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a Pagebend effect using CSS" name=description><meta content="Create a Pagebend effect using CSS" itemprop=description><meta content="Create a Pagebend effect using CSS" property=og:description><meta content="Create a Pagebend effect using CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="CSS3 Pagebend | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="css3, page, bend, flip, fold, animation, transition, 3d" itemprop=keywords><meta content="css3, page, bend, flip, fold, animation, transition, 3d" property=article:tag><meta content="css3, page, bend, flip, fold, animation, transition, 3d" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/css3-pagebend/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">CSS3 Pagebend</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I crafted <a rel="noopener nofollow noreferrer" href=http://codepen.io/james2doyle/pen/HpbrL target=_blank title=css3-pagebend>this lil' beauty</a> in class today. It turns out that it is really hard to make transforming elements intersect. At least, I couldn't figure it out.<p><a rel="noopener nofollow noreferrer" href=http://codepen.io/james2doyle/pen/HpbrL target=_blank><img alt=css3-pagebend decoding=async loading=lazy src=/images/css3-pagebend11.jpg title=css3-pagebend></a><p>I ended up having to essentially split the image in 2 and then rotateY one of the sides. It didn't look quite right when it was bending at the middle, so I made the split like 60-40. As always, click the image for the live action.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/fiddle/generated-content-in-css/index.html b/docs/fiddle/generated-content-in-css/index.html
index 814557b..46e46ac 100644
--- a/docs/fiddle/generated-content-in-css/index.html
+++ b/docs/fiddle/generated-content-in-css/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Generated content in CSS | OhDoyleRules</title><meta content="Generated content in CSS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Generated content in CSS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/generated-content-in-css/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/generated-content-in-css/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Generated content in CSS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use Generated content in CSS" name=description><meta content="How to use Generated content in CSS" itemprop=description><meta content="How to use Generated content in CSS" property=og:description><meta content="How to use Generated content in CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Generated content in CSS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="generated, content, css, css3, attr, pseduo, elements" itemprop=keywords><meta content="generated, content, css, css3, attr, pseduo, elements" property=article:tag><meta content="generated, content, css, css3, attr, pseduo, elements" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/generated-content-in-css/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Generated content in CSS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I like <a href=http://jsfiddle.net/ title=jsFiddle>jsFiddle</a>. I often use it for prototyping. I might want to see what I can make in css or maybe I want to build a little template. A perfect example, I used it to mockup my <a href=https://ohdoylerules.com/work/ title=Work>work</a> section. Since it is just a repeating template, I built the classes and styles in jsFiddle and then just dropped in the php echos. Anyway, here is something I made. It uses generated content. You can use HTML attributes in CSS. This is a classic example:<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/* styles for printing */
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Generated content in CSS | OhDoyleRules</title><meta content="Generated content in CSS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Generated content in CSS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/generated-content-in-css/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/generated-content-in-css/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Generated content in CSS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use Generated content in CSS" name=description><meta content="How to use Generated content in CSS" itemprop=description><meta content="How to use Generated content in CSS" property=og:description><meta content="How to use Generated content in CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Generated content in CSS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="generated, content, css, css3, attr, pseduo, elements" itemprop=keywords><meta content="generated, content, css, css3, attr, pseduo, elements" property=article:tag><meta content="generated, content, css, css3, attr, pseduo, elements" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/generated-content-in-css/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Generated content in CSS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I like <a rel="noopener nofollow noreferrer" href=http://jsfiddle.net/ target=_blank title=jsFiddle>jsFiddle</a>. I often use it for prototyping. I might want to see what I can make in css or maybe I want to build a little template. A perfect example, I used it to mockup my <a rel="noopener nofollow noreferrer" href=https://ohdoylerules.com/work/ target=_blank title=Work>work</a> section. Since it is just a repeating template, I built the classes and styles in jsFiddle and then just dropped in the php echos. Anyway, here is something I made. It uses generated content. You can use HTML attributes in CSS. This is a classic example:<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/* styles for printing */
 </span><span style=color:#b48ead>@media </span><span>print{
 </span><span>    </span><span style=color:#65737e>/* all a tags with an href attribute */
 </span><span>    </span><span style=color:#bf616a>a</span><span style=color:#8fa1b3>[</span><span style=color:#d08770>href</span><span style=color:#8fa1b3>]:</span><span style=color:#b48ead>after</span><span>{
@@ -37,4 +37,4 @@
 </span><span>    text-shadow: </span><span style=color:#d08770>0 1px 0 </span><span style=color:#96b5b4>rgba</span><span>(</span><span style=color:#d08770>0</span><span>,</span><span style=color:#d08770>0</span><span>,</span><span style=color:#d08770>0</span><span>,</span><span style=color:#d08770>0.6</span><span>);
 </span><span>}​
 </span></code></pre><pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span>Notifications​
-</span></code></pre><p>If you would like to see that bad boy in action check out <a title="jsFiddle css content" href=http://jsfiddle.net/james2doyle/LjgzD/>this fiddle</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>If you would like to see that bad boy in action check out <a rel="noopener nofollow noreferrer" title="jsFiddle css content" href=http://jsfiddle.net/james2doyle/LjgzD/ target=_blank>this fiddle</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/fiddle/index.html b/docs/fiddle/index.html
index 80dc6f5..bf0ac65 100644
--- a/docs/fiddle/index.html
+++ b/docs/fiddle/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Fiddle | OhDoyleRules</title><meta content="Fiddle | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Fiddle itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Fiddle name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The fiddle category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The fiddle category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The fiddle category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The fiddle category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Dancing Music Bars" href=https://ohdoylerules.com/fiddle/dancing-music-bars/>Dancing Music Bars</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 16, 2012</span></span><div class=post-intro><p>Create a Dancing Music Bar animation in CSS and SVG<p><a title="Read Dancing Music Bars" class=read-more href=https://ohdoylerules.com/fiddle/dancing-music-bars/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="No-Js Image Preview" href=https://ohdoylerules.com/fiddle/no-js-image-preview/>No-Js Image Preview</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 27, 2012</span></span><div class=post-intro><p>Create a No-Js Image Preview with only CSS<p><a title="Read No-Js Image Preview" class=read-more href=https://ohdoylerules.com/fiddle/no-js-image-preview/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/fiddle/array-prototype-range/ title=Array.prototype.range()>Array.prototype.range()</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div class=post-intro><p>How to create Array.prototype.range in Javascript<p><a title="Read Array.prototype.range()" class=read-more href=https://ohdoylerules.com/fiddle/array-prototype-range/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Generated content in CSS" href=https://ohdoylerules.com/fiddle/generated-content-in-css/>Generated content in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2012</span></span><div class=post-intro><p>How to use Generated content in CSS<p><a title="Read Generated content in CSS" class=read-more href=https://ohdoylerules.com/fiddle/generated-content-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS Date Card" href=https://ohdoylerules.com/fiddle/css-date-card/>CSS Date Card</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div class=post-intro><p>Create a Date Card using CSS transitions, animations, and gradients<p><a title="Read CSS Date Card" class=read-more href=https://ohdoylerules.com/fiddle/css-date-card/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS3 Pagebend" href=https://ohdoylerules.com/fiddle/css3-pagebend/>CSS3 Pagebend</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div class=post-intro><p>Create a Pagebend effect using CSS<p><a title="Read CSS3 Pagebend" class=read-more href=https://ohdoylerules.com/fiddle/css3-pagebend/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Fiddle | OhDoyleRules</title><meta content="Fiddle | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Fiddle itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Fiddle name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The fiddle category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The fiddle category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The fiddle category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The fiddle category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a href=https://ohdoylerules.com/fiddle/array-prototype-range/ title=Array.prototype.range()>Array.prototype.range()</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div class=post-intro><p>How to create Array.prototype.range in Javascript<p><a title="Read Array.prototype.range()" class=read-more href=https://ohdoylerules.com/fiddle/array-prototype-range/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="No-Js Image Preview" href=https://ohdoylerules.com/fiddle/no-js-image-preview/>No-Js Image Preview</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 27, 2012</span></span><div class=post-intro><p>Create a No-Js Image Preview with only CSS<p><a title="Read No-Js Image Preview" class=read-more href=https://ohdoylerules.com/fiddle/no-js-image-preview/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS Date Card" href=https://ohdoylerules.com/fiddle/css-date-card/>CSS Date Card</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div class=post-intro><p>Create a Date Card using CSS transitions, animations, and gradients<p><a title="Read CSS Date Card" class=read-more href=https://ohdoylerules.com/fiddle/css-date-card/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Generated content in CSS" href=https://ohdoylerules.com/fiddle/generated-content-in-css/>Generated content in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2012</span></span><div class=post-intro><p>How to use Generated content in CSS<p><a title="Read Generated content in CSS" class=read-more href=https://ohdoylerules.com/fiddle/generated-content-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Dancing Music Bars" href=https://ohdoylerules.com/fiddle/dancing-music-bars/>Dancing Music Bars</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 16, 2012</span></span><div class=post-intro><p>Create a Dancing Music Bar animation in CSS and SVG<p><a title="Read Dancing Music Bars" class=read-more href=https://ohdoylerules.com/fiddle/dancing-music-bars/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS3 Pagebend" href=https://ohdoylerules.com/fiddle/css3-pagebend/>CSS3 Pagebend</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div class=post-intro><p>Create a Pagebend effect using CSS<p><a title="Read CSS3 Pagebend" class=read-more href=https://ohdoylerules.com/fiddle/css3-pagebend/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/fiddle/no-js-image-preview/index.html b/docs/fiddle/no-js-image-preview/index.html
index 74ca3b8..dfce428 100644
--- a/docs/fiddle/no-js-image-preview/index.html
+++ b/docs/fiddle/no-js-image-preview/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>No-Js Image Preview | OhDoyleRules</title><meta content="No-Js Image Preview | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="No-Js Image Preview" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/no-js-image-preview/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/no-js-image-preview/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="No-Js Image Preview" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a No-Js Image Preview with only CSS" name=description><meta content="Create a No-Js Image Preview with only CSS" itemprop=description><meta content="Create a No-Js Image Preview with only CSS" property=og:description><meta content="Create a No-Js Image Preview with only CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="No-Js Image Preview | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="no, javascript, js, image, preview, thumbnail" itemprop=keywords><meta content="no, javascript, js, image, preview, thumbnail" property=article:tag><meta content="no, javascript, js, image, preview, thumbnail" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/no-js-image-preview/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">No-Js Image Preview</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 27, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>Using CSS transforms, I was able to build a little image previewer. There is only one image for both the thumbnail and full size view. Scale does wonders.<div class=center><img alt="No Js Image Preview · CodePen" src=/images/No-Js-Image-Preview-CodePen.png></div><p>I created this guy in <a href=http://codepen.io/james2doyle/pen/fChbD title=Codepen.io>Codepen.io</a>. It seems to be a lot better than just showing all the html/css/js in a post. I would appreciate any comments or possible improvements. I might try to build some sort of template/plugin so that anyone can just plop in their images and BAM it works nicely.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>No-Js Image Preview | OhDoyleRules</title><meta content="No-Js Image Preview | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="No-Js Image Preview" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/fiddle/no-js-image-preview/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/fiddle/no-js-image-preview/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="No-Js Image Preview" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a No-Js Image Preview with only CSS" name=description><meta content="Create a No-Js Image Preview with only CSS" itemprop=description><meta content="Create a No-Js Image Preview with only CSS" property=og:description><meta content="Create a No-Js Image Preview with only CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="No-Js Image Preview | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="no, javascript, js, image, preview, thumbnail" itemprop=keywords><meta content="no, javascript, js, image, preview, thumbnail" property=article:tag><meta content="no, javascript, js, image, preview, thumbnail" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/fiddle/no-js-image-preview/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">No-Js Image Preview</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 27, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>Using CSS transforms, I was able to build a little image previewer. There is only one image for both the thumbnail and full size view. Scale does wonders.<div class=center><img alt="No Js Image Preview · CodePen" src=/images/No-Js-Image-Preview-CodePen.png></div><p>I created this guy in <a rel="noopener nofollow noreferrer" href=http://codepen.io/james2doyle/pen/fChbD target=_blank title=Codepen.io>Codepen.io</a>. It seems to be a lot better than just showing all the html/css/js in a post. I would appreciate any comments or possible improvements. I might try to build some sort of template/plugin so that anyone can just plop in their images and BAM it works nicely.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index b846709..690723f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>James Doyle | OhDoyleRules</title><meta content="James Doyle | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="James Doyle" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="James Doyle" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><meta content=website property=og:type><meta content="James Doyle | OhDoyleRules" property=og:title><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Hammerspoon hyper key" href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/>Hammerspoon hyper key</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2024</span></span><div class=post-intro><p>Use Hammerspoon to create hyper key shortcuts to automate window focus<p><a title="Read Hammerspoon hyper key" class=read-more href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Your Numberpad To Control Google Hangouts/Meet" href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/>Use Your Numberpad To Control Google Hangouts/Meet</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 10, 2023</span></span><div class=post-intro><p>Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet<p><a title="Read Use Your Numberpad To Control Google Hangouts/Meet" class=read-more href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Browser Devtools To Improve Your Bug Reports" href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/>Using Browser Devtools To Improve Your Bug Reports</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 09, 2023</span></span><div class=post-intro><p>How to improve your bug reports using the browser dev tools<p><a title="Read Using Browser Devtools To Improve Your Bug Reports" class=read-more href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Versioning Service Workers In Hugo" href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/>Versioning Service Workers In Hugo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 21, 2022</span></span><div class=post-intro><p>How to use Hugo pipes and resources to version your service worker scripts<p><a title="Read Versioning Service Workers In Hugo" class=read-more href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Laravel `when` Method To Support Multiple Queries" href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/>Using Laravel `when` Method To Support Multiple Queries</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2022</span></span><div class=post-intro><p>How to use the `when` method on database collections in Laravel to create more flexible and readable code<p><a title="Read Using Laravel `when` Method To Support Multiple Queries" class=read-more href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Bitbucket Weekly Reports Using Make (Integromat)" href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/>Bitbucket Weekly Reports Using Make (Integromat)</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 06, 2022</span></span><div class=post-intro><p>Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository<p><a title="Read Bitbucket Weekly Reports Using Make (Integromat)" class=read-more href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Autocomplete TailwindCSS In Custom Attributes/Strings" href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/>Autocomplete TailwindCSS In Custom Attributes/Strings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 06, 2022</span></span><div class=post-intro><p>Use tailwindcss autocomplete classes and logic inside non-default attributes or strings<p><a title="Read Autocomplete TailwindCSS In Custom Attributes/Strings" class=read-more href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Setup A Raspberry Pi with PHP And Lighttpd" href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/>Setup A Raspberry Pi with PHP And Lighttpd</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 05, 2022</span></span><div class=post-intro><p>Setup a raspberry pi with php 8.1 and the latest lighttpd web server<p><a title="Read Setup A Raspberry Pi with PHP And Lighttpd" class=read-more href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue stateful form component" href=https://ohdoylerules.com/snippets/vue-stateful-form-component/>Vue stateful form component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 24, 2021</span></span><div class=post-intro><p>Create a Vue form that escalates all events to the top level and supports v-model<p><a title="Read Vue stateful form component" class=read-more href=https://ohdoylerules.com/snippets/vue-stateful-form-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Lodash i18n (translation) function" href=https://ohdoylerules.com/snippets/lodash-translation-function/>Lodash i18n (translation) function</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 22, 2021</span></span><div class=post-intro><p>An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions<p><a title="Read Lodash i18n (translation) function" class=read-more href=https://ohdoylerules.com/snippets/lodash-translation-function/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Lodash memoize with a timeout" href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/>Lodash memoize with a timeout</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 20, 2021</span></span><div class=post-intro><p>Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values<p><a title="Read Lodash memoize with a timeout" class=read-more href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Fastmod Codemod For Refactoring" href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/>Fastmod Codemod For Refactoring</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2021</span></span><div class=post-intro><p>Fastmod is a command line tool that can help you with large-scale codebase refactors<p><a title="Read Fastmod Codemod For Refactoring" class=read-more href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue Omnibar Component" href=https://ohdoylerules.com/web/vue-omnibar-component/>Vue Omnibar Component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 05, 2020</span></span><div class=post-intro><p>A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features<p><a title="Read Vue Omnibar Component" class=read-more href=https://ohdoylerules.com/web/vue-omnibar-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue Toggle Component" href=https://ohdoylerules.com/web/vue-toggle-component/>Vue Toggle Component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 04, 2020</span></span><div class=post-intro><p>A Vue component that is used to create simple switches, toggles, and show/hide experiences<p><a title="Read Vue Toggle Component" class=read-more href=https://ohdoylerules.com/web/vue-toggle-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Tailwind Screens In JS" href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/>Tailwind Screens In JS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 05, 2020</span></span><div class=post-intro><p>Detect if a tailwind screen value matches the current window<p><a title="Read Tailwind Screens In JS" class=read-more href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vuex Stateful URL Plugin" href=https://ohdoylerules.com/snippets/vuex-stateful-url/>Vuex Stateful URL Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div class=post-intro><p>StatefulURL is a Vuex plugin that can read and write the state from a query string<p><a title="Read Vuex Stateful URL Plugin" class=read-more href=https://ohdoylerules.com/snippets/vuex-stateful-url/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vuex Crosstab Plugin" href=https://ohdoylerules.com/snippets/vuex-crosstab/>Vuex Crosstab Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div class=post-intro><p>CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab<p><a title="Read Vuex Crosstab Plugin" class=read-more href=https://ohdoylerules.com/snippets/vuex-crosstab/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using slots in Vue js" href=https://ohdoylerules.com/web/using-slots-in-vue-js/>Using slots in Vue js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2020</span></span><div class=post-intro><p>If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components<p><a title="Read Using slots in Vue js" class=read-more href=https://ohdoylerules.com/web/using-slots-in-vue-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Create JSON Sections In Shopify" href=https://ohdoylerules.com/web/create-json-sections-in-shopify/>Create JSON Sections In Shopify</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 05, 2020</span></span><div class=post-intro><p>A demo on how to create a section in Shopify that returns JSON and HTML<p><a title="Read Create JSON Sections In Shopify" class=read-more href=https://ohdoylerules.com/web/create-json-sections-in-shopify/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Detect Theme Editor In Shopify Liquid Templates" href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/>Detect Theme Editor In Shopify Liquid Templates</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 04, 2020</span></span><div class=post-intro><p>A demo on how to detect when a template is running in the Shopify theme and section builder<p><a title="Read Detect Theme Editor In Shopify Liquid Templates" class=read-more href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Zapier Webhooks for HTML forms" href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/>Using Zapier Webhooks for HTML forms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 28, 2019</span></span><div class=post-intro><p>You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form<p><a title="Read Using Zapier Webhooks for HTML forms" class=read-more href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Laravel Valet for WordPress Multisites" href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/>Use Laravel Valet for WordPress Multisites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 01, 2019</span></span><div class=post-intro><p>Use Laravel Valet for developing local WordPress multisites<p><a title="Read Use Laravel Valet for WordPress Multisites" class=read-more href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Build A Multi-lingual Laravel Site With Subdomains" href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/>Build A Multi-lingual Laravel Site With Subdomains</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 25, 2019</span></span><div class=post-intro><p>Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help.<p><a title="Read Build A Multi-lingual Laravel Site With Subdomains" class=read-more href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Slack Slash Supplier" href=https://ohdoylerules.com/web/simple-slash-commands/>Simple Slack Slash Supplier</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 13, 2019</span></span><div class=post-intro><p>A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses<p><a title="Read Simple Slack Slash Supplier" class=read-more href=https://ohdoylerules.com/web/simple-slash-commands/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="SQL As An API" href=https://ohdoylerules.com/web/sql-as-an-api/>SQL As An API</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2019</span></span><div class=post-intro><p>An example of how to use SQL as an API instead of reaching for something like GraphQL<p><a title="Read SQL As An API" class=read-more href=https://ohdoylerules.com/web/sql-as-an-api/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Laravel Scout Sonic Driver" href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/>Laravel Scout Sonic Driver</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 12, 2019</span></span><div class=post-intro><p>A Laravel Scout driver for the Sonic search tool<p><a title="Read Laravel Scout Sonic Driver" class=read-more href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Function Currying To Make Reusable Code" href=https://ohdoylerules.com/web/function-currying-to-make-reusable-code/>Function Currying To Make Reusable Code</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 17, 2019</span></span><div class=post-intro><p>Function currying. If you haven't heard of it before, let me introduce you to this magical pattern that can help reduce duplicate code and improve readability<p><a title="Read Function Currying To Make Reusable Code" class=read-more href=https://ohdoylerules.com/web/function-currying-to-make-reusable-code/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="When And Where To Compromise Your App Design" href=https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/>When And Where To Compromise Your App Design</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2018</span></span><div class=post-intro><p>When initially developing an application or a new feature we are constantly trying to balance best practices in design with delivering a finished product.<p><a title="Read When And Where To Compromise Your App Design" class=read-more href=https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Sqlite As A Cache In Laravel" href=https://ohdoylerules.com/web/laravel-sqlite-cache/>Using Sqlite As A Cache In Laravel</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2018</span></span><div class=post-intro><p>How to use Sqlite as a cache in Laravel<p><a title="Read Using Sqlite As A Cache In Laravel" class=read-more href=https://ohdoylerules.com/web/laravel-sqlite-cache/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Angular (v1.x) Through iFrame" href=https://ohdoylerules.com/web/angular-through-iframe/>Angular (v1.x) Through iFrame</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2018</span></span><div class=post-intro><p>How to use angular.js (v1.x) through an iframe when the iframe URL is dynamically swapped<p><a title="Read Angular (v1.x) Through iFrame" class=read-more href=https://ohdoylerules.com/web/angular-through-iframe/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Nuxt Firebase Starter" href=https://ohdoylerules.com/web/nuxt-firebase-starter/>Nuxt Firebase Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 21, 2017</span></span><div class=post-intro><p>An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles<p><a title="Read Nuxt Firebase Starter" class=read-more href=https://ohdoylerules.com/web/nuxt-firebase-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using DigitalOcean Spaces" href=https://ohdoylerules.com/web/using-digitalocean-spaces/>Using DigitalOcean Spaces</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2017</span></span><div class=post-intro><p>An example project for how to use DigitalOcean Spaces with S3 tools<p><a title="Read Using DigitalOcean Spaces" class=read-more href=https://ohdoylerules.com/web/using-digitalocean-spaces/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="3 Ways A Website Project Falls Apart" href=https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/>3 Ways A Website Project Falls Apart</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 29, 2017</span></span><div class=post-intro><p>Over the last 7 years, I have been a part of hundreds of website projects. Here are some of the most common ways I have seen a project fail.<p><a title="Read 3 Ways A Website Project Falls Apart" class=read-more href=https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Handle spaces and no-spaces in MySQL where-like clauses" href=https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/>Handle spaces and no-spaces in MySQL where-like clauses</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 08, 2017</span></span><div class=post-intro><p>Have you ever wanted to write a WHERE LIKE for a query with and without spaces? Well, now you can with this trick!<p><a title="Read Handle spaces and no-spaces in MySQL where-like clauses" class=read-more href=https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WordPress Browser Body Class" href=https://ohdoylerules.com/web/wordpress-browser-body-class/>WordPress Browser Body Class</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 21, 2017</span></span><div class=post-intro><p>A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required.<p><a title="Read WordPress Browser Body Class" class=read-more href=https://ohdoylerules.com/web/wordpress-browser-body-class/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Update Laravel Pagination With New Collection" href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/>Update Laravel Pagination With New Collection</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2017</span></span><div class=post-intro><p>Did you know you can update a Laravel pagination with a new collection?<p><a title="Read Update Laravel Pagination With New Collection" class=read-more href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Color Helpers In Fish Shell" href=https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/>Color Helpers In Fish Shell</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 03, 2017</span></span><div class=post-intro><p>How to easily create a color function for printing colorized output<p><a title="Read Color Helpers In Fish Shell" class=read-more href=https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Conditional Vue.js Mixins" href=https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/>Conditional Vue.js Mixins</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 25, 2017</span></span><div class=post-intro><p>How to use commonjs modules as vue.js mixins and how to conditionally load mixins on a per-page-basis.<p><a title="Read Conditional Vue.js Mixins" class=read-more href=https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Install the latest Node.js on Amazon Linux" href=https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/>Install the latest Node.js on Amazon Linux</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2017</span></span><div class=post-intro><p>How to install the latest version of node.js on the Amazon Linux AMI<p><a title="Read Install the latest Node.js on Amazon Linux" class=read-more href=https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Running Go (golang) in Docker" href=https://ohdoylerules.com/snippets/running-go-in-docker/>Running Go (golang) in Docker</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 28, 2017</span></span><div class=post-intro><p>How to run and deploy golang applications inside a Docker container.<p><a title="Read Running Go (golang) in Docker" class=read-more href=https://ohdoylerules.com/snippets/running-go-in-docker/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="How To Use Template Strings As Modules" href=https://ohdoylerules.com/tricks/es6-template-strings-as-modules/>How To Use Template Strings As Modules</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 26, 2017</span></span><div class=post-intro><p>How to the new es6 template string literals to make reusable modules for templates/strings or HTML partials<p><a title="Read How To Use Template Strings As Modules" class=read-more href=https://ohdoylerules.com/tricks/es6-template-strings-as-modules/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="How To Use LC_MONETARY In Laravel" href=https://ohdoylerules.com/tricks/setting-money-locale-laravel/>How To Use LC_MONETARY In Laravel</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2017</span></span><div class=post-intro><p>How to use setlocale with LC_MONETARY in Laravel<p><a title="Read How To Use LC_MONETARY In Laravel" class=read-more href=https://ohdoylerules.com/tricks/setting-money-locale-laravel/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="OpenSSL Passwd Without Prompt" href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/>OpenSSL Passwd Without Prompt</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2016</span></span><div class=post-intro><p>How to use the openssl passwd without a confirm prompt<p><a title="Read OpenSSL Passwd Without Prompt" class=read-more href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Nginx for A/B Testing" href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/>Use Nginx for A/B Testing</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 28, 2016</span></span><div class=post-intro><p>Use Nginx to set custom headers in your HTTP responses so you can serve conditional content<p><a title="Read Use Nginx for A/B Testing" class=read-more href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Backup MySQL And Email It" href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/>Backup MySQL And Email It</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 24, 2016</span></span><div class=post-intro><p>Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script<p><a title="Read Backup MySQL And Email It" class=read-more href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Add A Counter For Duplicate Uploads" href=https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/>Add A Counter For Duplicate Uploads</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 12, 2016</span></span><div class=post-intro><p>A short script to detect if a folder contains a duplicate filename, and if it does, the filename gets a counter prepended to the front of the filename<p><a title="Read Add A Counter For Duplicate Uploads" class=read-more href=https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Add $.getStylesheet To jQuery" href=https://ohdoylerules.com/web/add-getstylesheet-to-jquery/>Add $.getStylesheet To jQuery</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 05, 2016</span></span><div class=post-intro><p>Ever wanted to have a CSS/Stylesheet version of $.getScript? Well now you can with $.getStylesheet<p><a title="Read Add $.getStylesheet To jQuery" class=read-more href=https://ohdoylerules.com/web/add-getstylesheet-to-jquery/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Slack Meta Data For URLs and Links" href=https://ohdoylerules.com/web/slack-url-meta-data/>Slack Meta Data For URLs and Links</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2015</span></span><div class=post-intro><p>Tips to get Slack to resolve the correct meta data for your website URL<p><a title="Read Slack Meta Data For URLs and Links" class=read-more href=https://ohdoylerules.com/web/slack-url-meta-data/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Fixing Wordpress wp-content 500 Errors" href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/>Fixing Wordpress wp-content 500 Errors</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 29, 2015</span></span><div class=post-intro><p>How to fix the issue where Wordpress wp-content assets are throwing 500 errors<p><a title="Read Fixing Wordpress wp-content 500 Errors" class=read-more href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Benchmarks With Apache AB" href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/>Simple Benchmarks With Apache AB</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 22, 2015</span></span><div class=post-intro><p>a tutorial for generating simple benchmarks using the Apache ab tool<p><a title="Read Simple Benchmarks With Apache AB" class=read-more href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Varnish For Static Sites" href=https://ohdoylerules.com/web/varnish-for-static-sites/>Varnish For Static Sites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2015</span></span><div class=post-intro><p>a small tutorial for how to setup Varnish cache for a flat site running on Apache<p><a title="Read Varnish For Static Sites" class=read-more href=https://ohdoylerules.com/web/varnish-for-static-sites/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Validate Email With Lua" href=https://ohdoylerules.com/snippets/validate-email-with-lua/>Validate Email With Lua</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2015</span></span><div class=post-intro><p>A verbose email validation function for Lua<p><a title="Read Validate Email With Lua" class=read-more href=https://ohdoylerules.com/snippets/validate-email-with-lua/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple PHP JSON Response" href=https://ohdoylerules.com/snippets/simple-php-json-response/>Simple PHP JSON Response</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2015</span></span><div class=post-intro><p>Create a simple JSON response using PHP<p><a title="Read Simple PHP JSON Response" class=read-more href=https://ohdoylerules.com/snippets/simple-php-json-response/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Disallowed Characters In URI" href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/>Disallowed Characters In URI</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 31, 2015</span></span><div class=post-intro><p>The URI you submitted has disallowed characters<p><a title="Read Disallowed Characters In URI" class=read-more href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PhalconPHP Completions" href=https://ohdoylerules.com/web/phalconphp-completions/>PhalconPHP Completions</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 20, 2015</span></span><div class=post-intro><p>A PhalconPHP completions and snippets package for Sublime Text<p><a title="Read PhalconPHP Completions" class=read-more href=https://ohdoylerules.com/web/phalconphp-completions/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Easy FFmpeg Video Posters" href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/>Easy FFmpeg Video Posters</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2015</span></span><div class=post-intro><p>Take in a list of video files and generate a poster image for each one<p><a title="Read Easy FFmpeg Video Posters" class=read-more href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Minimal Raspberry Pi OS" href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/>Minimal Raspberry Pi OS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2015</span></span>  <span class=post-date>🕙  <span>Updated: March 20, 2015</span></span><div class=post-intro><p>Setup and improve the Moebius OS for the Raspberry Pi<p><a title="Read Minimal Raspberry Pi OS" class=read-more href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Phalcon Micro App Starter" href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/>Phalcon Micro App Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 20, 2015</span></span><div class=post-intro><p>A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class<p><a title="Read Phalcon Micro App Starter" class=read-more href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PhalconPHP Crop Image To Fit" href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/>PhalconPHP Crop Image To Fit</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 24, 2014</span></span><div class=post-intro><p>How to crop and scale an image to fit specific dimensions in Phalcon PHP<p><a title="Read PhalconPHP Crop Image To Fit" class=read-more href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS Module Generator 2.0" href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/>PyroCMS Module Generator 2.0</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 16, 2014</span></span><div class=post-intro><p>The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up<p><a title="Read PyroCMS Module Generator 2.0" class=read-more href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kijiji Vector Logo" href=https://ohdoylerules.com/web/kijiji-vector-logo/>Kijiji Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2014</span></span><div class=post-intro><p>the kijiji logo as a vector svg file<p><a title="Read Kijiji Vector Logo" class=read-more href=https://ohdoylerules.com/web/kijiji-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Migrate AllPasswords To 1Password" href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/>Migrate AllPasswords To 1Password</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2014</span></span><div class=post-intro><p>How to import your allpasswords csv into 1password<p><a title="Read Migrate AllPasswords To 1Password" class=read-more href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Always Connect To Starbucks WiFi" href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/>Always Connect To Starbucks WiFi</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2014</span></span><div class=post-intro><p>How to connect to the Starbucks WiFi every time by using your phone.<p><a title="Read Always Connect To Starbucks WiFi" class=read-more href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/lico-luvit-cms/ title=Lico>Lico</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2014</span></span><div class=post-intro><p>Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua<p><a title="Read Lico" class=read-more href=https://ohdoylerules.com/personal-project/lico-luvit-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Typeform Vector Logo" href=https://ohdoylerules.com/web/typeform-vector-logo/>Typeform Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 31, 2014</span></span><div class=post-intro><p>Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events, and other general uses.<p><a title="Read Typeform Vector Logo" class=read-more href=https://ohdoylerules.com/web/typeform-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Node.js in an AppleScript" href=https://ohdoylerules.com/snippets/using-node-in-applescript/>Using Node.js in an AppleScript</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 12, 2014</span></span><div class=post-intro><p>How to use Node.js in an AppleScript<p><a title="Read Using Node.js in an AppleScript" class=read-more href=https://ohdoylerules.com/snippets/using-node-in-applescript/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Copy filepath to clipboard in OSX" href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/>Copy filepath to clipboard in OSX</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 10, 2014</span></span><div class=post-intro><p>How to copy a filepath to the clipboard in OSX<p><a title="Read Copy filepath to clipboard in OSX" class=read-more href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The Simple Spam Stopper" href=https://ohdoylerules.com/web/simple-spam-stopper/>The Simple Spam Stopper</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2014</span></span><div class=post-intro><p>For the last year at WARPAINT Media, we have been getting assaulted with spam.<p><a title="Read The Simple Spam Stopper" class=read-more href=https://ohdoylerules.com/web/simple-spam-stopper/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Flexible SVG Placeholder Images" href=https://ohdoylerules.com/web/flexible-svg-placeholders/>Flexible SVG Placeholder Images</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 24, 2014</span></span><div class=post-intro><p>Replace a service like placehold.it with your own local version that serves SVG images<p><a title="Read Flexible SVG Placeholder Images" class=read-more href=https://ohdoylerules.com/web/flexible-svg-placeholders/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Purge A File From A Github Repo" href=https://ohdoylerules.com/snippets/purge-file-from-github/>Purge A File From A Github Repo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2014</span></span><div class=post-intro><p>How to permanently remove a file from a repo and it's history<p><a title="Read Purge A File From A Github Repo" class=read-more href=https://ohdoylerules.com/snippets/purge-file-from-github/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Tips For Using SVGs" href=https://ohdoylerules.com/web/tips-for-using-svgs/>Tips For Using SVGs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 17, 2014</span></span><div class=post-intro><p>I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.<p><a title="Read Tips For Using SVGs" class=read-more href=https://ohdoylerules.com/web/tips-for-using-svgs/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Koding Interview" href=https://ohdoylerules.com/personal-project/koding-interview/>Koding Interview</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2014</span></span><div class=post-intro><p>James Doyle interview by the developer social network Koding<p><a title="Read Koding Interview" class=read-more href=https://ohdoylerules.com/personal-project/koding-interview/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kaenon Vector Logo" href=https://ohdoylerules.com/personal-project/kaenon-logo/>Kaenon Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 10, 2014</span></span><div class=post-intro><p>The Kaenon logo in a vector SVG format<p><a title="Read Kaenon Vector Logo" class=read-more href=https://ohdoylerules.com/personal-project/kaenon-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Bash select example" href=https://ohdoylerules.com/snippets/bash-select-example/>Bash select example</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 07, 2014</span></span><div class=post-intro><p>An example of how to use the select command in bash to pass arguments to functions<p><a title="Read Bash select example" class=read-more href=https://ohdoylerules.com/snippets/bash-select-example/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Sublime Node Snippets" href=https://ohdoylerules.com/personal-project/sublime-node-snippets/>Sublime Node Snippets</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 25, 2014</span></span><div class=post-intro><p>Sublime Text snippets for node, async, underscore, and lodash<p><a title="Read Sublime Node Snippets" class=read-more href=https://ohdoylerules.com/personal-project/sublime-node-snippets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Binder" href=https://ohdoylerules.com/personal-project/simple-binder/>Simple Binder</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2014</span></span><div class=post-intro><p>simplebinder is a zero dependency one-way databinder for javascript<p><a title="Read Simple Binder" class=read-more href=https://ohdoylerules.com/personal-project/simple-binder/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vim Vector Logo" href=https://ohdoylerules.com/personal-project/vim-svg/>Vim Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 04, 2014</span></span>  <span class=post-date>🕙  <span>Updated: June 17, 2014</span></span><div class=post-intro><p>The Vim logo in a vector SVG format. Also includes a ICNS file for OSX.<p><a title="Read Vim Vector Logo" class=read-more href=https://ohdoylerules.com/personal-project/vim-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Atom Monokai Dark" href=https://ohdoylerules.com/personal-project/atom-monokai-dark/>Atom Monokai Dark</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 27, 2014</span></span><div class=post-intro><p>Dark Monokai theme for the Github Atom editor<p><a title="Read Atom Monokai Dark" class=read-more href=https://ohdoylerules.com/personal-project/atom-monokai-dark/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The Alternative Cms" href=https://ohdoylerules.com/personal-project/the-alternative-cms/>The Alternative Cms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 26, 2014</span></span><div class=post-intro><p>Presentation for The Alternative Cms<p><a title="Read The Alternative Cms" class=read-more href=https://ohdoylerules.com/personal-project/the-alternative-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Randomly Generate A Password In Bash" href=https://ohdoylerules.com/snippets/bash-random-password-generation/>Randomly Generate A Password In Bash</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 16, 2014</span></span><div class=post-intro><p>Randomly generate a password of specified length and then copy it to the clipboard<p><a title="Read Randomly Generate A Password In Bash" class=read-more href=https://ohdoylerules.com/snippets/bash-random-password-generation/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PHP WebSocket Chat" href=https://ohdoylerules.com/personal-project/php-websocket-chat/>PHP WebSocket Chat</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 08, 2014</span></span><div class=post-intro><p>PHP websocket chat application example<p><a title="Read PHP WebSocket Chat" class=read-more href=https://ohdoylerules.com/personal-project/php-websocket-chat/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="All About PhileCMS Video" href=https://ohdoylerules.com/personal-project/phile-intro-video/>All About PhileCMS Video</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 07, 2014</span></span><div class=post-intro><p>All About PhileCMS Video<p><a title="Read All About PhileCMS Video" class=read-more href=https://ohdoylerules.com/personal-project/phile-intro-video/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Font Awesome SVG Icons" href=https://ohdoylerules.com/web/font-awesome-svg-icons/>Font Awesome SVG Icons</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2014</span></span><div class=post-intro><p>A sprite sheet of all the font-awesome icons from version 4.0.2<p><a title="Read Font Awesome SVG Icons" class=read-more href=https://ohdoylerules.com/web/font-awesome-svg-icons/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Groupon SVG logo" href=https://ohdoylerules.com/personal-project/groupon-green-logo-svg/>Groupon SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 24, 2014</span></span><div class=post-intro><p>groupon logo in vector svg<p><a title="Read Groupon SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/groupon-green-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Chrome Reverse Geocode App" href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/>Chrome Reverse Geocode App</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 08, 2014</span></span><div class=post-intro><p>Chrome Reverse Geocode App<p><a title="Read Chrome Reverse Geocode App" class=read-more href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="IICRC Vector Logo" href=https://ohdoylerules.com/web/iicrc-vector-logo/>IICRC Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 18, 2013</span></span><div class=post-intro><p>IICRC Vector Logo<p><a title="Read IICRC Vector Logo" class=read-more href=https://ohdoylerules.com/web/iicrc-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="List File Permission Numbers" href=https://ohdoylerules.com/snippets/list-file-permission-numbers/>List File Permission Numbers</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 08, 2013</span></span><div class=post-intro><p>Easily list the chmod numbers for all the files in a folder<p><a title="Read List File Permission Numbers" class=read-more href=https://ohdoylerules.com/snippets/list-file-permission-numbers/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Easy Command Line Reverse Geocoding" href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/>Easy Command Line Reverse Geocoding</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 27, 2013</span></span><div class=post-intro><p>Easily reverse geocode an address using the command line and the google maps API<p><a title="Read Easy Command Line Reverse Geocoding" class=read-more href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grunt Highlight Plugin" href=https://ohdoylerules.com/personal-project/grunt-highlight/>Grunt Highlight Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 25, 2013</span></span><div class=post-intro><p>Grunt task for running Highlight.js over files or blocks of code<p><a title="Read Grunt Highlight Plugin" class=read-more href=https://ohdoylerules.com/personal-project/grunt-highlight/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Decrypt-Encrypt Functions From Command Line" href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/>Decrypt-Encrypt Functions From Command Line</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2013</span></span><div class=post-intro><p>Functions to encrypt and then decrypt files from the command line with OpenSSL<p><a title="Read Decrypt-Encrypt Functions From Command Line" class=read-more href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Get Wordpress via Command Line" href=https://ohdoylerules.com/snippets/wordpress-via-command-line/>Get Wordpress via Command Line</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 21, 2013</span></span><div class=post-intro><p>Download and unzip the latest Wordpress version, all via command line<p><a title="Read Get Wordpress via Command Line" class=read-more href=https://ohdoylerules.com/snippets/wordpress-via-command-line/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="HostMonster PHPMailer Settings" href=https://ohdoylerules.com/snippets/hostmonster-phpmailer/>HostMonster PHPMailer Settings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2013</span></span><div class=post-intro><p>How to setup PHPMailer on a HostMonster hosting server<p><a title="Read HostMonster PHPMailer Settings" class=read-more href=https://ohdoylerules.com/snippets/hostmonster-phpmailer/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="GoDaddy Email on Digital Ocean" href=https://ohdoylerules.com/demo/godaddy-digital-ocean/>GoDaddy Email on Digital Ocean</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2013</span></span><div class=post-intro><p>How to use GoDaddy Email on Digital Ocean<p><a title="Read GoDaddy Email on Digital Ocean" class=read-more href=https://ohdoylerules.com/demo/godaddy-digital-ocean/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Github Wiki To HTML" href=https://ohdoylerules.com/personal-project/github-wiki-to-html/>Github Wiki To HTML</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 17, 2013</span></span><div class=post-intro><p>Github Wiki To HTML<p><a title="Read Github Wiki To HTML" class=read-more href=https://ohdoylerules.com/personal-project/github-wiki-to-html/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Phile CMS" href=https://ohdoylerules.com/personal-project/phile-cms/>Phile CMS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2013</span></span><div class=post-intro><p>Phile is flat-file CMS based on Pico<p><a title="Read Phile CMS" class=read-more href=https://ohdoylerules.com/personal-project/phile-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Google Drive Flat SVG Logo" href=https://ohdoylerules.com/personal-project/google-drive-svg-logo/>Google Drive Flat SVG Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 01, 2013</span></span><div class=post-intro><p>Google Drive Flat SVG Logo<p><a title="Read Google Drive Flat SVG Logo" class=read-more href=https://ohdoylerules.com/personal-project/google-drive-svg-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Docracy SVG logo" href=https://ohdoylerules.com/personal-project/docracy-logo-svg/>Docracy SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2013</span></span><div class=post-intro><p>Docracy logo in vector svg<p><a title="Read Docracy SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/docracy-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Assemble Starter" href=https://ohdoylerules.com/personal-project/assemble-starter/>Assemble Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2013</span></span><div class=post-intro><p>Assemble for Grunt.js Starter template<p><a title="Read Assemble Starter" class=read-more href=https://ohdoylerules.com/personal-project/assemble-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="pico-download plugin" href=https://ohdoylerules.com/personal-project/pico-download-plugin/>pico-download plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2013</span></span><div class=post-intro><p>I created a plugin to force files to download in PicoCMS<p><a title="Read pico-download plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-download-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="compare multiple md5 hashes" href=https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/>compare multiple md5 hashes</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div class=post-intro><p>compare multiple md5 hashes<p><a title="Read compare multiple md5 hashes" class=read-more href=https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico-Useragent Plugin" href=https://ohdoylerules.com/personal-project/pico-useragent/>Pico-Useragent Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div class=post-intro><p>A plugin for pico that allows you to list the useragent<p><a title="Read Pico-Useragent Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-useragent/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/jquery-doodal-js/ title=jQuery-doodal-js>jQuery-doodal-js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 09, 2013</span></span><div class=post-intro><p>jQuery-doodal-js<p><a title="Read jQuery-doodal-js" class=read-more href=https://ohdoylerules.com/personal-project/jquery-doodal-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grunt Sundown" href=https://ohdoylerules.com/personal-project/grunt-sundown/>Grunt Sundown</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 08, 2013</span></span><div class=post-intro><p>Grunt Sundown<p><a title="Read Grunt Sundown" class=read-more href=https://ohdoylerules.com/personal-project/grunt-sundown/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Render PHP File With Data" href=https://ohdoylerules.com/snippets/render-php-with-data/>Render PHP File With Data</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div class=post-intro><p>Render PHP File With Data<p><a title="Read Render PHP File With Data" class=read-more href=https://ohdoylerules.com/snippets/render-php-with-data/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple HTML5 Notifications" href=https://ohdoylerules.com/snippets/simple-html5-notification/>Simple HTML5 Notifications</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div class=post-intro><p>Simple HTML5 Notifications<p><a title="Read Simple HTML5 Notifications" class=read-more href=https://ohdoylerules.com/snippets/simple-html5-notification/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Twitter Widget" href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/>Pyro Twitter Widget</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 08, 2013</span></span><div class=post-intro><p>Pyro Twitter Widget<p><a title="Read Pyro Twitter Widget" class=read-more href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico Get By Filename Plugin" href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/>Pico Get By Filename Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2013</span></span><div class=post-intro><p>I wrote another small plugin for PicoCMS that actually lets you load files based on the filename<p><a title="Read Pico Get By Filename Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CMS Watch List" href=https://ohdoylerules.com/web/cms-watch-list/>CMS Watch List</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div class=post-intro><p>CMS Watch List<p><a title="Read CMS Watch List" class=read-more href=https://ohdoylerules.com/web/cms-watch-list/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Markdown Logo Vector SVG" href=https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/>Markdown Logo Vector SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div class=post-intro><p>Markdown Logo Vector SVG<p><a title="Read Markdown Logo Vector SVG" class=read-more href=https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The $100 Website" href=https://ohdoylerules.com/web/the-100-dollar-website/>The $100 Website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 23, 2013</span></span><div class=post-intro><p>I wrote a post on WARPAINT Media about people who ask about getting a website for $100.<p><a title="Read The $100 Website" class=read-more href=https://ohdoylerules.com/web/the-100-dollar-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kube in Styl/Rework" href=https://ohdoylerules.com/personal-project/kube-in-stylrework/>Kube in Styl/Rework</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 19, 2013</span></span><div class=post-intro><p>Kube in Styl/Rework<p><a title="Read Kube in Styl/Rework" class=read-more href=https://ohdoylerules.com/personal-project/kube-in-stylrework/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico Slider Plugin" href=https://ohdoylerules.com/personal-project/pico-slider-plugin/>Pico Slider Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 17, 2013</span></span><div class=post-intro><p>a plugin for Pico that allows you to create a Slider<p><a title="Read Pico Slider Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-slider-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="NPM logo SVG" href=https://ohdoylerules.com/personal-project/npm-logo-svg/>NPM logo SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 07, 2013</span></span><div class=post-intro><p>The NPM logo as a SVG<p><a title="Read NPM logo SVG" class=read-more href=https://ohdoylerules.com/personal-project/npm-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Apax apache theme in htdocs" href=https://ohdoylerules.com/snippets/apax-in-htdocs/>Apax apache theme in htdocs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 02, 2013</span></span><div class=post-intro><p>Apax apache theme in htdocs<p><a title="Read Apax apache theme in htdocs" class=read-more href=https://ohdoylerules.com/snippets/apax-in-htdocs/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Disqus Comments" href=https://ohdoylerules.com/personal-project/disqus-comments/>Disqus Comments</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 27, 2013</span></span><div class=post-intro><p>Adding Disqus Comments to the website<p><a title="Read Disqus Comments" class=read-more href=https://ohdoylerules.com/personal-project/disqus-comments/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/rework-shade/ title=rework-shade>rework-shade</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>A package for rework that allows a shade function<p><a title="Read rework-shade" class=read-more href=https://ohdoylerules.com/personal-project/rework-shade/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/rework-math/ title=rework-math>rework-math</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>I created a plugin for rework that allows you to do simple math<p><a title="Read rework-math" class=read-more href=https://ohdoylerules.com/personal-project/rework-math/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS UA Sniffer Plugin" href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/>PyroCMS UA Sniffer Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>A plugin for PyroCMS that allows UA Sniffing<p><a title="Read PyroCMS UA Sniffer Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Github Markdown Field Type" href=https://ohdoylerules.com/personal-project/pyro-github-markdown/>Pyro Github Markdown Field Type</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>Pyro Github Markdown Field Type<p><a title="Read Pyro Github Markdown Field Type" class=read-more href=https://ohdoylerules.com/personal-project/pyro-github-markdown/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="grunt terminal-notifier setup" href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/>grunt terminal-notifier setup</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 07, 2013</span></span><div class=post-intro><p>grunt terminal-notifier setup<p><a title="Read grunt terminal-notifier setup" class=read-more href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="NudeProject - a starting point for simple websites" href=https://ohdoylerules.com/personal-project/nudeproject/>NudeProject - a starting point for simple websites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2013</span></span><div class=post-intro><p>NudeProject - a starting point for simple websites<p><a title="Read NudeProject - a starting point for simple websites" class=read-more href=https://ohdoylerules.com/personal-project/nudeproject/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Detect Animation Events in Javascript" href=https://ohdoylerules.com/snippets/animation-events-in-javascript/>Detect Animation Events in Javascript</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 31, 2013</span></span><div class=post-intro><p>Detect Animation Events in Javascript<p><a title="Read Detect Animation Events in Javascript" class=read-more href=https://ohdoylerules.com/snippets/animation-events-in-javascript/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Startup Canada SVG logos" href=https://ohdoylerules.com/personal-project/startup-canada-svg/>Startup Canada SVG logos</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div class=post-intro><p>All the Startup Canada SVG logos<p><a title="Read Startup Canada SVG logos" class=read-more href=https://ohdoylerules.com/personal-project/startup-canada-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CrunchBase SVG logo" href=https://ohdoylerules.com/personal-project/crunchbase-svg/>CrunchBase SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div class=post-intro><p>CrunchBase SVG logo<p><a title="Read CrunchBase SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/crunchbase-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Modernizr SVG Fallback to PNG" href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/>Modernizr SVG Fallback to PNG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2013</span></span><div class=post-intro><p>Modernizr SVG Fallback to PNG<p><a title="Read Modernizr SVG Fallback to PNG" class=read-more href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Custom Google Forms" href=https://ohdoylerules.com/web/custom-google-forms/>Custom Google Forms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 22, 2013</span></span>  <span class=post-date>🕙  <span>Updated: September 20, 2014</span></span><div class=post-intro><p>I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something<p><a title="Read Custom Google Forms" class=read-more href=https://ohdoylerules.com/web/custom-google-forms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Salt.js micro selector library" href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/>Salt.js micro selector library</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2013</span></span><div class=post-intro><p>salt.js is micro DOM selector library. Minified, it comes in at 255 bytes<p><a title="Read Salt.js micro selector library" class=read-more href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS3 badge logo in SVG" href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/>CSS3 badge logo in SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2013</span></span><div class=post-intro><p>CSS3 badge logo in SVG<p><a title="Read CSS3 badge logo in SVG" class=read-more href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="AngularJS Hangout - Promises Promises" href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/>AngularJS Hangout - Promises Promises</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div class=post-intro><p>AngularJS Hangout - Promises Promises<p><a title="Read AngularJS Hangout - Promises Promises" class=read-more href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="April 2013 Redesign!" href=https://ohdoylerules.com/personal-project/april-2013-redesign/>April 2013 Redesign!</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div class=post-intro><p>Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively.<p><a title="Read April 2013 Redesign!" class=read-more href=https://ohdoylerules.com/personal-project/april-2013-redesign/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Switching to SVG on Grey Nimbus" href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/>Switching to SVG on Grey Nimbus</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 14, 2013</span></span><div class=post-intro><p>Switching to SVG for all images on my website<p><a title="Read Switching to SVG on Grey Nimbus" class=read-more href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS Module Generator" href=https://ohdoylerules.com/personal-project/pyro-module-generator/>PyroCMS Module Generator</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div class=post-intro><p>PyroCMS Module Generator that can generate modules for pyrocms<p><a title="Read PyroCMS Module Generator" class=read-more href=https://ohdoylerules.com/personal-project/pyro-module-generator/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Swipe.js Module" href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/>Pyro Swipe.js Module</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div class=post-intro><p>A module for Pyro CMS that wraps up the Swipe.js Module<p><a title="Read Pyro Swipe.js Module" class=read-more href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grey Nimbus website" href=https://ohdoylerules.com/portfolio/grey-nimbus-website/>Grey Nimbus website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 11, 2013</span></span><div class=post-intro><p>My old Grey Nimbus website<p><a title="Read Grey Nimbus website" class=read-more href=https://ohdoylerules.com/portfolio/grey-nimbus-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="jQuery Plugin Snippets for Sublime Text 2" href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/>jQuery Plugin Snippets for Sublime Text 2</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div class=post-intro><p>jQuery Plugin Snippets for Sublime Text 2<p><a title="Read jQuery Plugin Snippets for Sublime Text 2" class=read-more href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Image Select Field" href=https://ohdoylerules.com/personal-project/pyro-image-select-field/>Pyro Image Select Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div class=post-intro><p>A field for Pyro CMS that allows you to select images from your uploads<p><a title="Read Pyro Image Select Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-image-select-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PHP Variables in strings" href=https://ohdoylerules.com/demo/php-variables-in-strings/>PHP Variables in strings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 21, 2013</span></span><div class=post-intro><p>A list of all the ways you can put PHP Variables in strings<p><a title="Read PHP Variables in strings" class=read-more href=https://ohdoylerules.com/demo/php-variables-in-strings/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Blurb Field" href=https://ohdoylerules.com/personal-project/pyro-blurb-field/>Pyro Blurb Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2013</span></span><div class=post-intro><p>A field for Pyrocms that allows you to create little blurbs in a list<p><a title="Read Pyro Blurb Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-blurb-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Canadian Provinces Field" href=https://ohdoylerules.com/personal-project/canadian-provinces-field/>Canadian Provinces Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 15, 2013</span></span><div class=post-intro><p>Canadian Provinces Field<p><a title="Read Canadian Provinces Field" class=read-more href=https://ohdoylerules.com/personal-project/canadian-provinces-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Git Website Workflow" href=https://ohdoylerules.com/personal-project/git-website-workflow/>Git Website Workflow</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 13, 2013</span></span><div class=post-intro><p>Git Website Workflow<p><a title="Read Git Website Workflow" class=read-more href=https://ohdoylerules.com/personal-project/git-website-workflow/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS PageWidgets Field Type" href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/>PyroCMS PageWidgets Field Type</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 05, 2013</span></span><div class=post-intro><p>PyroCMS PageWidgets Field Type<p><a title="Read PyroCMS PageWidgets Field Type" class=read-more href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Clean CSS Updated" href=https://ohdoylerules.com/personal-project/clean-css-updated/>Clean CSS Updated</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2013</span></span><div class=post-intro><p>Clean CSS Chrome app Updated<p><a title="Read Clean CSS Updated" class=read-more href=https://ohdoylerules.com/personal-project/clean-css-updated/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro List Field" href=https://ohdoylerules.com/personal-project/pyro-list-field/>Pyro List Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 23, 2013</span></span><div class=post-intro><p>A field for Pyro CMS that allows the creation of Lists<p><a title="Read Pyro List Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-list-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Zepto Drag & Swap" href=https://ohdoylerules.com/personal-project/zepto-drag-swap/>Zepto Drag & Swap</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div class=post-intro><p>Create a drag and drop list with Zepto<p><a title="Read Zepto Drag & Swap" class=read-more href=https://ohdoylerules.com/personal-project/zepto-drag-swap/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Image Widget" href=https://ohdoylerules.com/personal-project/pyro-image-widget/>Pyro Image Widget</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div class=post-intro><p>A widget for Pyro CMS for creating Image sections<p><a title="Read Pyro Image Widget" class=read-more href=https://ohdoylerules.com/personal-project/pyro-image-widget/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Making a socket.io app and how socket.io works" href=https://ohdoylerules.com/demo/socketio-works-howto/>Making a socket.io app and how socket.io works</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 13, 2013</span></span><div class=post-intro><p>Making a socket.io app and how socket.io works<p><a title="Read Making a socket.io app and how socket.io works" class=read-more href=https://ohdoylerules.com/demo/socketio-works-howto/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Clean CSS in Chrome Apps Office Hours" href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/>Clean CSS in Chrome Apps Office Hours</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 19, 2012</span></span><div class=post-intro><p>So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours.<p><a title="Read Clean CSS in Chrome Apps Office Hours" class=read-more href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="View Folder Tree in MacOSX Terminal" href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/>View Folder Tree in MacOSX Terminal</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2012</span></span><div class=post-intro><p>View Folder Tree in MacOSX Terminal<p><a title="Read View Folder Tree in MacOSX Terminal" class=read-more href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="New business cards" href=https://ohdoylerules.com/portfolio/new-business-cards/>New business cards</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 15, 2012</span></span><div class=post-intro><p>Check out my new business cards<p><a title="Read New business cards" class=read-more href=https://ohdoylerules.com/portfolio/new-business-cards/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Flexbox Demo" href=https://ohdoylerules.com/demo/flexbox-demo/>Flexbox Demo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2012</span></span><div class=post-intro><p>A demo of CSS Flexbox<p><a title="Read Flexbox Demo" class=read-more href=https://ohdoylerules.com/demo/flexbox-demo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WYSIWYG in PyroCMS Widgets" href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/>WYSIWYG in PyroCMS Widgets</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 10, 2012</span></span><div class=post-intro><p>WYSIWYG in PyroCMS Widgets<p><a title="Read WYSIWYG in PyroCMS Widgets" class=read-more href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Letterpress loader in CSS" href=https://ohdoylerules.com/demo/letterpress-loader-in-css/>Letterpress loader in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2012</span></span><div class=post-intro><p>Create the Letterpress loader in CSS<p><a title="Read Letterpress loader in CSS" class=read-more href=https://ohdoylerules.com/demo/letterpress-loader-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/kube-node-express/ title=Kube-Node-Express>Kube-Node-Express</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2012</span></span><div class=post-intro><p>Kube-Node-Express<p><a title="Read Kube-Node-Express" class=read-more href=https://ohdoylerules.com/personal-project/kube-node-express/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Source Code Pro on Sublime Text" href=https://ohdoylerules.com/web/source-code-pro-sublime/>Source Code Pro on Sublime Text</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 19, 2012</span></span><div class=post-intro><p>Download and install Source Code Pro on Sublime Text<p><a title="Read Source Code Pro on Sublime Text" class=read-more href=https://ohdoylerules.com/web/source-code-pro-sublime/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/fiddle/array-prototype-range/ title=Array.prototype.range()>Array.prototype.range()</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div class=post-intro><p>How to create Array.prototype.range in Javascript<p><a title="Read Array.prototype.range()" class=read-more href=https://ohdoylerules.com/fiddle/array-prototype-range/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Generated Content in CSS" href=https://ohdoylerules.com/demo/generated-content-title/>Generated Content in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div class=post-intro><p>Use Generated Content in CSS to show an Article link in plain text<p><a title="Read Generated Content in CSS" class=read-more href=https://ohdoylerules.com/demo/generated-content-title/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="No Javascript CSS Accordion" href=https://ohdoylerules.com/demo/no-javascript-accordion/>No Javascript CSS Accordion</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2012</span></span><div class=post-intro><p>Build an Accordion with just CSS and no Javascript<p><a title="Read No Javascript CSS Accordion" class=read-more href=https://ohdoylerules.com/demo/no-javascript-accordion/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Dancing Music Bars" href=https://ohdoylerules.com/fiddle/dancing-music-bars/>Dancing Music Bars</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 16, 2012</span></span><div class=post-intro><p>Create a Dancing Music Bar animation in CSS and SVG<p><a title="Read Dancing Music Bars" class=read-more href=https://ohdoylerules.com/fiddle/dancing-music-bars/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="zsh new file && open file function" href=https://ohdoylerules.com/snippets/zsh-new-open-function/>zsh new file && open file function</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 13, 2012</span></span><div class=post-intro><p>zsh new file && open file function<p><a title="Read zsh new file && open file function" class=read-more href=https://ohdoylerules.com/snippets/zsh-new-open-function/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Target Mozilla-only in CSS" href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/>Target Mozilla-only in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2012</span></span><div class=post-intro><p>Target Mozilla-only in CSS<p><a title="Read Target Mozilla-only in CSS" class=read-more href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="My Old Website" href=https://ohdoylerules.com/portfolio/my-old-website/>My Old Website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2012</span></span><div class=post-intro><p>See my old website<p><a title="Read My Old Website" class=read-more href=https://ohdoylerules.com/portfolio/my-old-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS3 Pagebend" href=https://ohdoylerules.com/fiddle/css3-pagebend/>CSS3 Pagebend</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div class=post-intro><p>Create a Pagebend effect using CSS<p><a title="Read CSS3 Pagebend" class=read-more href=https://ohdoylerules.com/fiddle/css3-pagebend/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS Date Card" href=https://ohdoylerules.com/fiddle/css-date-card/>CSS Date Card</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div class=post-intro><p>Create a Date Card using CSS transitions, animations, and gradients<p><a title="Read CSS Date Card" class=read-more href=https://ohdoylerules.com/fiddle/css-date-card/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/snippets/nodelist-each/ title=nodelist.each>nodelist.each</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2012</span></span><div class=post-intro><p>nodelist.prototype.each in javascript<p><a title="Read nodelist.each" class=read-more href=https://ohdoylerules.com/snippets/nodelist-each/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Mozilla Dev Derby" href=https://ohdoylerules.com/demo/mozilla-dev-derby/>Mozilla Dev Derby</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2012</span></span><div class=post-intro><p>James Doyle runner up in Mozilla Dev Derby September 2012<p><a title="Read Mozilla Dev Derby" class=read-more href=https://ohdoylerules.com/demo/mozilla-dev-derby/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="No-Js Image Preview" href=https://ohdoylerules.com/fiddle/no-js-image-preview/>No-Js Image Preview</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 27, 2012</span></span><div class=post-intro><p>Create a No-Js Image Preview with only CSS<p><a title="Read No-Js Image Preview" class=read-more href=https://ohdoylerules.com/fiddle/no-js-image-preview/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Styling Radios and Checkboxes. Redux." href=https://ohdoylerules.com/web/styling-input-redux/>Styling Radios and Checkboxes. Redux.</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 19, 2012</span></span><div class=post-intro><p>Styling Radios and Checkboxes. Redux.<p><a title="Read Styling Radios and Checkboxes. Redux." class=read-more href=https://ohdoylerules.com/web/styling-input-redux/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WordPress Plugin Swipe.js" href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/>WordPress Plugin Swipe.js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2012</span></span><div class=post-intro><p>WordPress Plugin Swipe.js<p><a title="Read WordPress Plugin Swipe.js" class=read-more href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Making Checkboxes in WordPress options pages" href=https://ohdoylerules.com/web/checkboxes-options/>Making Checkboxes in WordPress options pages</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 11, 2012</span></span><div class=post-intro><p>Making Checkboxes in WordPress options pages<p><a title="Read Making Checkboxes in WordPress options pages" class=read-more href=https://ohdoylerules.com/web/checkboxes-options/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Styling radio and checkbox inputs" href=https://ohdoylerules.com/web/radio-checkboxes/>Styling radio and checkbox inputs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 07, 2012</span></span><div class=post-intro><p>Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs<p><a title="Read Styling radio and checkbox inputs" class=read-more href=https://ohdoylerules.com/web/radio-checkboxes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Generated content in CSS" href=https://ohdoylerules.com/fiddle/generated-content-in-css/>Generated content in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2012</span></span><div class=post-intro><p>How to use Generated content in CSS<p><a title="Read Generated content in CSS" class=read-more href=https://ohdoylerules.com/fiddle/generated-content-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Installing Android 4.1.1 Jelly Bean for Nexus S" href=https://ohdoylerules.com/android/jellybean-nexuss/>Installing Android 4.1.1 Jelly Bean for Nexus S</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 20, 2012</span></span><div class=post-intro><p>How to flash jelly bean onto a nexus s<p><a title="Read Installing Android 4.1.1 Jelly Bean for Nexus S" class=read-more href=https://ohdoylerules.com/android/jellybean-nexuss/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>James Doyle | OhDoyleRules</title><meta content="James Doyle | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="James Doyle" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="James Doyle" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><meta content=website property=og:type><meta content="James Doyle | OhDoyleRules" property=og:title><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Hammerspoon hyper key" href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/>Hammerspoon hyper key</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2024</span></span><div class=post-intro><p>Use Hammerspoon to create hyper key shortcuts to automate window focus<p><a title="Read Hammerspoon hyper key" class=read-more href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Your Numberpad To Control Google Hangouts/Meet" href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/>Use Your Numberpad To Control Google Hangouts/Meet</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 10, 2023</span></span><div class=post-intro><p>Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet<p><a title="Read Use Your Numberpad To Control Google Hangouts/Meet" class=read-more href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Browser Devtools To Improve Your Bug Reports" href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/>Using Browser Devtools To Improve Your Bug Reports</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 09, 2023</span></span><div class=post-intro><p>How to improve your bug reports using the browser dev tools<p><a title="Read Using Browser Devtools To Improve Your Bug Reports" class=read-more href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Versioning Service Workers In Hugo" href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/>Versioning Service Workers In Hugo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 21, 2022</span></span><div class=post-intro><p>How to use Hugo pipes and resources to version your service worker scripts<p><a title="Read Versioning Service Workers In Hugo" class=read-more href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Laravel `when` Method To Support Multiple Queries" href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/>Using Laravel `when` Method To Support Multiple Queries</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2022</span></span><div class=post-intro><p>How to use the `when` method on database collections in Laravel to create more flexible and readable code<p><a title="Read Using Laravel `when` Method To Support Multiple Queries" class=read-more href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Bitbucket Weekly Reports Using Make (Integromat)" href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/>Bitbucket Weekly Reports Using Make (Integromat)</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 06, 2022</span></span><div class=post-intro><p>Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository<p><a title="Read Bitbucket Weekly Reports Using Make (Integromat)" class=read-more href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Autocomplete TailwindCSS In Custom Attributes/Strings" href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/>Autocomplete TailwindCSS In Custom Attributes/Strings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 06, 2022</span></span><div class=post-intro><p>Use tailwindcss autocomplete classes and logic inside non-default attributes or strings<p><a title="Read Autocomplete TailwindCSS In Custom Attributes/Strings" class=read-more href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Setup A Raspberry Pi with PHP And Lighttpd" href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/>Setup A Raspberry Pi with PHP And Lighttpd</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 05, 2022</span></span><div class=post-intro><p>Setup a raspberry pi with php 8.1 and the latest lighttpd web server<p><a title="Read Setup A Raspberry Pi with PHP And Lighttpd" class=read-more href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue stateful form component" href=https://ohdoylerules.com/snippets/vue-stateful-form-component/>Vue stateful form component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 24, 2021</span></span><div class=post-intro><p>Create a Vue form that escalates all events to the top level and supports v-model<p><a title="Read Vue stateful form component" class=read-more href=https://ohdoylerules.com/snippets/vue-stateful-form-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Lodash i18n (translation) function" href=https://ohdoylerules.com/snippets/lodash-translation-function/>Lodash i18n (translation) function</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 22, 2021</span></span><div class=post-intro><p>An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions<p><a title="Read Lodash i18n (translation) function" class=read-more href=https://ohdoylerules.com/snippets/lodash-translation-function/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Lodash memoize with a timeout" href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/>Lodash memoize with a timeout</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 20, 2021</span></span><div class=post-intro><p>Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values<p><a title="Read Lodash memoize with a timeout" class=read-more href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Fastmod Codemod For Refactoring" href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/>Fastmod Codemod For Refactoring</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2021</span></span><div class=post-intro><p>Fastmod is a command line tool that can help you with large-scale codebase refactors<p><a title="Read Fastmod Codemod For Refactoring" class=read-more href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue Omnibar Component" href=https://ohdoylerules.com/web/vue-omnibar-component/>Vue Omnibar Component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 05, 2020</span></span><div class=post-intro><p>A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features<p><a title="Read Vue Omnibar Component" class=read-more href=https://ohdoylerules.com/web/vue-omnibar-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue Toggle Component" href=https://ohdoylerules.com/web/vue-toggle-component/>Vue Toggle Component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 04, 2020</span></span><div class=post-intro><p>A Vue component that is used to create simple switches, toggles, and show/hide experiences<p><a title="Read Vue Toggle Component" class=read-more href=https://ohdoylerules.com/web/vue-toggle-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Tailwind Screens In JS" href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/>Tailwind Screens In JS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 05, 2020</span></span><div class=post-intro><p>Detect if a tailwind screen value matches the current window<p><a title="Read Tailwind Screens In JS" class=read-more href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vuex Stateful URL Plugin" href=https://ohdoylerules.com/snippets/vuex-stateful-url/>Vuex Stateful URL Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div class=post-intro><p>StatefulURL is a Vuex plugin that can read and write the state from a query string<p><a title="Read Vuex Stateful URL Plugin" class=read-more href=https://ohdoylerules.com/snippets/vuex-stateful-url/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vuex Crosstab Plugin" href=https://ohdoylerules.com/snippets/vuex-crosstab/>Vuex Crosstab Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div class=post-intro><p>CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab<p><a title="Read Vuex Crosstab Plugin" class=read-more href=https://ohdoylerules.com/snippets/vuex-crosstab/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using slots in Vue js" href=https://ohdoylerules.com/web/using-slots-in-vue-js/>Using slots in Vue js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2020</span></span><div class=post-intro><p>If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components<p><a title="Read Using slots in Vue js" class=read-more href=https://ohdoylerules.com/web/using-slots-in-vue-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Create JSON Sections In Shopify" href=https://ohdoylerules.com/web/create-json-sections-in-shopify/>Create JSON Sections In Shopify</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 05, 2020</span></span><div class=post-intro><p>A demo on how to create a section in Shopify that returns JSON and HTML<p><a title="Read Create JSON Sections In Shopify" class=read-more href=https://ohdoylerules.com/web/create-json-sections-in-shopify/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Detect Theme Editor In Shopify Liquid Templates" href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/>Detect Theme Editor In Shopify Liquid Templates</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 04, 2020</span></span><div class=post-intro><p>A demo on how to detect when a template is running in the Shopify theme and section builder<p><a title="Read Detect Theme Editor In Shopify Liquid Templates" class=read-more href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Zapier Webhooks for HTML forms" href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/>Using Zapier Webhooks for HTML forms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 28, 2019</span></span><div class=post-intro><p>You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form<p><a title="Read Using Zapier Webhooks for HTML forms" class=read-more href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Laravel Valet for WordPress Multisites" href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/>Use Laravel Valet for WordPress Multisites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 01, 2019</span></span><div class=post-intro><p>Use Laravel Valet for developing local WordPress multisites<p><a title="Read Use Laravel Valet for WordPress Multisites" class=read-more href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Build A Multi-lingual Laravel Site With Subdomains" href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/>Build A Multi-lingual Laravel Site With Subdomains</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 25, 2019</span></span><div class=post-intro><p>Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help.<p><a title="Read Build A Multi-lingual Laravel Site With Subdomains" class=read-more href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Slack Slash Supplier" href=https://ohdoylerules.com/web/simple-slash-commands/>Simple Slack Slash Supplier</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 13, 2019</span></span><div class=post-intro><p>A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses<p><a title="Read Simple Slack Slash Supplier" class=read-more href=https://ohdoylerules.com/web/simple-slash-commands/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="SQL As An API" href=https://ohdoylerules.com/web/sql-as-an-api/>SQL As An API</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2019</span></span><div class=post-intro><p>An example of how to use SQL as an API instead of reaching for something like GraphQL<p><a title="Read SQL As An API" class=read-more href=https://ohdoylerules.com/web/sql-as-an-api/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Laravel Scout Sonic Driver" href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/>Laravel Scout Sonic Driver</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 12, 2019</span></span><div class=post-intro><p>A Laravel Scout driver for the Sonic search tool<p><a title="Read Laravel Scout Sonic Driver" class=read-more href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Function Currying To Make Reusable Code" href=https://ohdoylerules.com/web/function-currying-to-make-reusable-code/>Function Currying To Make Reusable Code</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 17, 2019</span></span><div class=post-intro><p>Function currying. If you haven't heard of it before, let me introduce you to this magical pattern that can help reduce duplicate code and improve readability<p><a title="Read Function Currying To Make Reusable Code" class=read-more href=https://ohdoylerules.com/web/function-currying-to-make-reusable-code/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="When And Where To Compromise Your App Design" href=https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/>When And Where To Compromise Your App Design</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2018</span></span><div class=post-intro><p>When initially developing an application or a new feature we are constantly trying to balance best practices in design with delivering a finished product.<p><a title="Read When And Where To Compromise Your App Design" class=read-more href=https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Sqlite As A Cache In Laravel" href=https://ohdoylerules.com/web/laravel-sqlite-cache/>Using Sqlite As A Cache In Laravel</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2018</span></span><div class=post-intro><p>How to use Sqlite as a cache in Laravel<p><a title="Read Using Sqlite As A Cache In Laravel" class=read-more href=https://ohdoylerules.com/web/laravel-sqlite-cache/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Angular (v1.x) Through iFrame" href=https://ohdoylerules.com/web/angular-through-iframe/>Angular (v1.x) Through iFrame</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2018</span></span><div class=post-intro><p>How to use angular.js (v1.x) through an iframe when the iframe URL is dynamically swapped<p><a title="Read Angular (v1.x) Through iFrame" class=read-more href=https://ohdoylerules.com/web/angular-through-iframe/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Nuxt Firebase Starter" href=https://ohdoylerules.com/web/nuxt-firebase-starter/>Nuxt Firebase Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 21, 2017</span></span><div class=post-intro><p>An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles<p><a title="Read Nuxt Firebase Starter" class=read-more href=https://ohdoylerules.com/web/nuxt-firebase-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using DigitalOcean Spaces" href=https://ohdoylerules.com/web/using-digitalocean-spaces/>Using DigitalOcean Spaces</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2017</span></span><div class=post-intro><p>An example project for how to use DigitalOcean Spaces with S3 tools<p><a title="Read Using DigitalOcean Spaces" class=read-more href=https://ohdoylerules.com/web/using-digitalocean-spaces/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="3 Ways A Website Project Falls Apart" href=https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/>3 Ways A Website Project Falls Apart</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 29, 2017</span></span><div class=post-intro><p>Over the last 7 years, I have been a part of hundreds of website projects. Here are some of the most common ways I have seen a project fail.<p><a title="Read 3 Ways A Website Project Falls Apart" class=read-more href=https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Handle spaces and no-spaces in MySQL where-like clauses" href=https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/>Handle spaces and no-spaces in MySQL where-like clauses</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 08, 2017</span></span><div class=post-intro><p>Have you ever wanted to write a WHERE LIKE for a query with and without spaces? Well, now you can with this trick!<p><a title="Read Handle spaces and no-spaces in MySQL where-like clauses" class=read-more href=https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WordPress Browser Body Class" href=https://ohdoylerules.com/web/wordpress-browser-body-class/>WordPress Browser Body Class</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 21, 2017</span></span><div class=post-intro><p>A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required.<p><a title="Read WordPress Browser Body Class" class=read-more href=https://ohdoylerules.com/web/wordpress-browser-body-class/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Update Laravel Pagination With New Collection" href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/>Update Laravel Pagination With New Collection</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2017</span></span><div class=post-intro><p>Did you know you can update a Laravel pagination with a new collection?<p><a title="Read Update Laravel Pagination With New Collection" class=read-more href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Color Helpers In Fish Shell" href=https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/>Color Helpers In Fish Shell</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 03, 2017</span></span><div class=post-intro><p>How to easily create a color function for printing colorized output<p><a title="Read Color Helpers In Fish Shell" class=read-more href=https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Conditional Vue.js Mixins" href=https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/>Conditional Vue.js Mixins</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 25, 2017</span></span><div class=post-intro><p>How to use commonjs modules as vue.js mixins and how to conditionally load mixins on a per-page-basis.<p><a title="Read Conditional Vue.js Mixins" class=read-more href=https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Install the latest Node.js on Amazon Linux" href=https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/>Install the latest Node.js on Amazon Linux</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2017</span></span><div class=post-intro><p>How to install the latest version of node.js on the Amazon Linux AMI<p><a title="Read Install the latest Node.js on Amazon Linux" class=read-more href=https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Running Go (golang) in Docker" href=https://ohdoylerules.com/snippets/running-go-in-docker/>Running Go (golang) in Docker</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 28, 2017</span></span><div class=post-intro><p>How to run and deploy golang applications inside a Docker container.<p><a title="Read Running Go (golang) in Docker" class=read-more href=https://ohdoylerules.com/snippets/running-go-in-docker/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="How To Use Template Strings As Modules" href=https://ohdoylerules.com/tricks/es6-template-strings-as-modules/>How To Use Template Strings As Modules</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 26, 2017</span></span><div class=post-intro><p>How to the new es6 template string literals to make reusable modules for templates/strings or HTML partials<p><a title="Read How To Use Template Strings As Modules" class=read-more href=https://ohdoylerules.com/tricks/es6-template-strings-as-modules/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="How To Use LC_MONETARY In Laravel" href=https://ohdoylerules.com/tricks/setting-money-locale-laravel/>How To Use LC_MONETARY In Laravel</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2017</span></span><div class=post-intro><p>How to use setlocale with LC_MONETARY in Laravel<p><a title="Read How To Use LC_MONETARY In Laravel" class=read-more href=https://ohdoylerules.com/tricks/setting-money-locale-laravel/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="OpenSSL Passwd Without Prompt" href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/>OpenSSL Passwd Without Prompt</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2016</span></span><div class=post-intro><p>How to use the openssl passwd without a confirm prompt<p><a title="Read OpenSSL Passwd Without Prompt" class=read-more href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Nginx for A/B Testing" href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/>Use Nginx for A/B Testing</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 28, 2016</span></span><div class=post-intro><p>Use Nginx to set custom headers in your HTTP responses so you can serve conditional content<p><a title="Read Use Nginx for A/B Testing" class=read-more href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Backup MySQL And Email It" href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/>Backup MySQL And Email It</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 24, 2016</span></span><div class=post-intro><p>Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script<p><a title="Read Backup MySQL And Email It" class=read-more href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Add A Counter For Duplicate Uploads" href=https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/>Add A Counter For Duplicate Uploads</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 12, 2016</span></span><div class=post-intro><p>A short script to detect if a folder contains a duplicate filename, and if it does, the filename gets a counter prepended to the front of the filename<p><a title="Read Add A Counter For Duplicate Uploads" class=read-more href=https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Add $.getStylesheet To jQuery" href=https://ohdoylerules.com/web/add-getstylesheet-to-jquery/>Add $.getStylesheet To jQuery</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 05, 2016</span></span><div class=post-intro><p>Ever wanted to have a CSS/Stylesheet version of $.getScript? Well now you can with $.getStylesheet<p><a title="Read Add $.getStylesheet To jQuery" class=read-more href=https://ohdoylerules.com/web/add-getstylesheet-to-jquery/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Slack Meta Data For URLs and Links" href=https://ohdoylerules.com/web/slack-url-meta-data/>Slack Meta Data For URLs and Links</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2015</span></span><div class=post-intro><p>Tips to get Slack to resolve the correct meta data for your website URL<p><a title="Read Slack Meta Data For URLs and Links" class=read-more href=https://ohdoylerules.com/web/slack-url-meta-data/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Fixing Wordpress wp-content 500 Errors" href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/>Fixing Wordpress wp-content 500 Errors</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 29, 2015</span></span><div class=post-intro><p>How to fix the issue where Wordpress wp-content assets are throwing 500 errors<p><a title="Read Fixing Wordpress wp-content 500 Errors" class=read-more href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Benchmarks With Apache AB" href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/>Simple Benchmarks With Apache AB</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 22, 2015</span></span><div class=post-intro><p>a tutorial for generating simple benchmarks using the Apache ab tool<p><a title="Read Simple Benchmarks With Apache AB" class=read-more href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Varnish For Static Sites" href=https://ohdoylerules.com/web/varnish-for-static-sites/>Varnish For Static Sites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2015</span></span><div class=post-intro><p>a small tutorial for how to setup Varnish cache for a flat site running on Apache<p><a title="Read Varnish For Static Sites" class=read-more href=https://ohdoylerules.com/web/varnish-for-static-sites/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Validate Email With Lua" href=https://ohdoylerules.com/snippets/validate-email-with-lua/>Validate Email With Lua</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2015</span></span><div class=post-intro><p>A verbose email validation function for Lua<p><a title="Read Validate Email With Lua" class=read-more href=https://ohdoylerules.com/snippets/validate-email-with-lua/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple PHP JSON Response" href=https://ohdoylerules.com/snippets/simple-php-json-response/>Simple PHP JSON Response</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2015</span></span><div class=post-intro><p>Create a simple JSON response using PHP<p><a title="Read Simple PHP JSON Response" class=read-more href=https://ohdoylerules.com/snippets/simple-php-json-response/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Disallowed Characters In URI" href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/>Disallowed Characters In URI</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 31, 2015</span></span><div class=post-intro><p>The URI you submitted has disallowed characters<p><a title="Read Disallowed Characters In URI" class=read-more href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PhalconPHP Completions" href=https://ohdoylerules.com/web/phalconphp-completions/>PhalconPHP Completions</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 20, 2015</span></span><div class=post-intro><p>A PhalconPHP completions and snippets package for Sublime Text<p><a title="Read PhalconPHP Completions" class=read-more href=https://ohdoylerules.com/web/phalconphp-completions/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Easy FFmpeg Video Posters" href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/>Easy FFmpeg Video Posters</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2015</span></span><div class=post-intro><p>Take in a list of video files and generate a poster image for each one<p><a title="Read Easy FFmpeg Video Posters" class=read-more href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Minimal Raspberry Pi OS" href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/>Minimal Raspberry Pi OS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2015</span></span>  <span class=post-date>🕙  <span>Updated: March 20, 2015</span></span><div class=post-intro><p>Setup and improve the Moebius OS for the Raspberry Pi<p><a title="Read Minimal Raspberry Pi OS" class=read-more href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Phalcon Micro App Starter" href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/>Phalcon Micro App Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 20, 2015</span></span><div class=post-intro><p>A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class<p><a title="Read Phalcon Micro App Starter" class=read-more href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PhalconPHP Crop Image To Fit" href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/>PhalconPHP Crop Image To Fit</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 24, 2014</span></span><div class=post-intro><p>How to crop and scale an image to fit specific dimensions in Phalcon PHP<p><a title="Read PhalconPHP Crop Image To Fit" class=read-more href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS Module Generator 2.0" href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/>PyroCMS Module Generator 2.0</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 16, 2014</span></span><div class=post-intro><p>The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up<p><a title="Read PyroCMS Module Generator 2.0" class=read-more href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kijiji Vector Logo" href=https://ohdoylerules.com/web/kijiji-vector-logo/>Kijiji Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2014</span></span><div class=post-intro><p>the kijiji logo as a vector svg file<p><a title="Read Kijiji Vector Logo" class=read-more href=https://ohdoylerules.com/web/kijiji-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Migrate AllPasswords To 1Password" href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/>Migrate AllPasswords To 1Password</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2014</span></span><div class=post-intro><p>How to import your allpasswords csv into 1password<p><a title="Read Migrate AllPasswords To 1Password" class=read-more href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Always Connect To Starbucks WiFi" href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/>Always Connect To Starbucks WiFi</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2014</span></span><div class=post-intro><p>How to connect to the Starbucks WiFi every time by using your phone.<p><a title="Read Always Connect To Starbucks WiFi" class=read-more href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/lico-luvit-cms/ title=Lico>Lico</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2014</span></span><div class=post-intro><p>Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua<p><a title="Read Lico" class=read-more href=https://ohdoylerules.com/personal-project/lico-luvit-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Typeform Vector Logo" href=https://ohdoylerules.com/web/typeform-vector-logo/>Typeform Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 31, 2014</span></span><div class=post-intro><p>Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events, and other general uses.<p><a title="Read Typeform Vector Logo" class=read-more href=https://ohdoylerules.com/web/typeform-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Node.js in an AppleScript" href=https://ohdoylerules.com/snippets/using-node-in-applescript/>Using Node.js in an AppleScript</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 12, 2014</span></span><div class=post-intro><p>How to use Node.js in an AppleScript<p><a title="Read Using Node.js in an AppleScript" class=read-more href=https://ohdoylerules.com/snippets/using-node-in-applescript/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Copy filepath to clipboard in OSX" href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/>Copy filepath to clipboard in OSX</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 10, 2014</span></span><div class=post-intro><p>How to copy a filepath to the clipboard in OSX<p><a title="Read Copy filepath to clipboard in OSX" class=read-more href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The Simple Spam Stopper" href=https://ohdoylerules.com/web/simple-spam-stopper/>The Simple Spam Stopper</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2014</span></span><div class=post-intro><p>For the last year at WARPAINT Media, we have been getting assaulted with spam.<p><a title="Read The Simple Spam Stopper" class=read-more href=https://ohdoylerules.com/web/simple-spam-stopper/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Flexible SVG Placeholder Images" href=https://ohdoylerules.com/web/flexible-svg-placeholders/>Flexible SVG Placeholder Images</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 24, 2014</span></span><div class=post-intro><p>Replace a service like placehold.it with your own local version that serves SVG images<p><a title="Read Flexible SVG Placeholder Images" class=read-more href=https://ohdoylerules.com/web/flexible-svg-placeholders/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Purge A File From A Github Repo" href=https://ohdoylerules.com/snippets/purge-file-from-github/>Purge A File From A Github Repo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2014</span></span><div class=post-intro><p>How to permanently remove a file from a repo and it's history<p><a title="Read Purge A File From A Github Repo" class=read-more href=https://ohdoylerules.com/snippets/purge-file-from-github/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Tips For Using SVGs" href=https://ohdoylerules.com/web/tips-for-using-svgs/>Tips For Using SVGs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 17, 2014</span></span><div class=post-intro><p>I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.<p><a title="Read Tips For Using SVGs" class=read-more href=https://ohdoylerules.com/web/tips-for-using-svgs/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Koding Interview" href=https://ohdoylerules.com/personal-project/koding-interview/>Koding Interview</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2014</span></span><div class=post-intro><p>James Doyle interview by the developer social network Koding<p><a title="Read Koding Interview" class=read-more href=https://ohdoylerules.com/personal-project/koding-interview/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kaenon Vector Logo" href=https://ohdoylerules.com/personal-project/kaenon-logo/>Kaenon Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 10, 2014</span></span><div class=post-intro><p>The Kaenon logo in a vector SVG format<p><a title="Read Kaenon Vector Logo" class=read-more href=https://ohdoylerules.com/personal-project/kaenon-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Bash select example" href=https://ohdoylerules.com/snippets/bash-select-example/>Bash select example</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 07, 2014</span></span><div class=post-intro><p>An example of how to use the select command in bash to pass arguments to functions<p><a title="Read Bash select example" class=read-more href=https://ohdoylerules.com/snippets/bash-select-example/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Sublime Node Snippets" href=https://ohdoylerules.com/personal-project/sublime-node-snippets/>Sublime Node Snippets</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 25, 2014</span></span><div class=post-intro><p>Sublime Text snippets for node, async, underscore, and lodash<p><a title="Read Sublime Node Snippets" class=read-more href=https://ohdoylerules.com/personal-project/sublime-node-snippets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Binder" href=https://ohdoylerules.com/personal-project/simple-binder/>Simple Binder</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2014</span></span><div class=post-intro><p>simplebinder is a zero dependency one-way databinder for javascript<p><a title="Read Simple Binder" class=read-more href=https://ohdoylerules.com/personal-project/simple-binder/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vim Vector Logo" href=https://ohdoylerules.com/personal-project/vim-svg/>Vim Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 04, 2014</span></span>  <span class=post-date>🕙  <span>Updated: June 17, 2014</span></span><div class=post-intro><p>The Vim logo in a vector SVG format. Also includes a ICNS file for OSX.<p><a title="Read Vim Vector Logo" class=read-more href=https://ohdoylerules.com/personal-project/vim-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Atom Monokai Dark" href=https://ohdoylerules.com/personal-project/atom-monokai-dark/>Atom Monokai Dark</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 27, 2014</span></span><div class=post-intro><p>Dark Monokai theme for the Github Atom editor<p><a title="Read Atom Monokai Dark" class=read-more href=https://ohdoylerules.com/personal-project/atom-monokai-dark/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The Alternative Cms" href=https://ohdoylerules.com/personal-project/the-alternative-cms/>The Alternative Cms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 26, 2014</span></span><div class=post-intro><p>Presentation for The Alternative Cms<p><a title="Read The Alternative Cms" class=read-more href=https://ohdoylerules.com/personal-project/the-alternative-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Randomly Generate A Password In Bash" href=https://ohdoylerules.com/snippets/bash-random-password-generation/>Randomly Generate A Password In Bash</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 16, 2014</span></span><div class=post-intro><p>Randomly generate a password of specified length and then copy it to the clipboard<p><a title="Read Randomly Generate A Password In Bash" class=read-more href=https://ohdoylerules.com/snippets/bash-random-password-generation/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PHP WebSocket Chat" href=https://ohdoylerules.com/personal-project/php-websocket-chat/>PHP WebSocket Chat</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 08, 2014</span></span><div class=post-intro><p>PHP websocket chat application example<p><a title="Read PHP WebSocket Chat" class=read-more href=https://ohdoylerules.com/personal-project/php-websocket-chat/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="All About PhileCMS Video" href=https://ohdoylerules.com/personal-project/phile-intro-video/>All About PhileCMS Video</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 07, 2014</span></span><div class=post-intro><p>All About PhileCMS Video<p><a title="Read All About PhileCMS Video" class=read-more href=https://ohdoylerules.com/personal-project/phile-intro-video/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Font Awesome SVG Icons" href=https://ohdoylerules.com/web/font-awesome-svg-icons/>Font Awesome SVG Icons</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2014</span></span><div class=post-intro><p>A sprite sheet of all the font-awesome icons from version 4.0.2<p><a title="Read Font Awesome SVG Icons" class=read-more href=https://ohdoylerules.com/web/font-awesome-svg-icons/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Groupon SVG logo" href=https://ohdoylerules.com/personal-project/groupon-green-logo-svg/>Groupon SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 24, 2014</span></span><div class=post-intro><p>groupon logo in vector svg<p><a title="Read Groupon SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/groupon-green-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Chrome Reverse Geocode App" href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/>Chrome Reverse Geocode App</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 08, 2014</span></span><div class=post-intro><p>Chrome Reverse Geocode App<p><a title="Read Chrome Reverse Geocode App" class=read-more href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="IICRC Vector Logo" href=https://ohdoylerules.com/web/iicrc-vector-logo/>IICRC Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 18, 2013</span></span><div class=post-intro><p>IICRC Vector Logo<p><a title="Read IICRC Vector Logo" class=read-more href=https://ohdoylerules.com/web/iicrc-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="List File Permission Numbers" href=https://ohdoylerules.com/snippets/list-file-permission-numbers/>List File Permission Numbers</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 08, 2013</span></span><div class=post-intro><p>Easily list the chmod numbers for all the files in a folder<p><a title="Read List File Permission Numbers" class=read-more href=https://ohdoylerules.com/snippets/list-file-permission-numbers/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Easy Command Line Reverse Geocoding" href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/>Easy Command Line Reverse Geocoding</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 27, 2013</span></span><div class=post-intro><p>Easily reverse geocode an address using the command line and the google maps API<p><a title="Read Easy Command Line Reverse Geocoding" class=read-more href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grunt Highlight Plugin" href=https://ohdoylerules.com/personal-project/grunt-highlight/>Grunt Highlight Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 25, 2013</span></span><div class=post-intro><p>Grunt task for running Highlight.js over files or blocks of code<p><a title="Read Grunt Highlight Plugin" class=read-more href=https://ohdoylerules.com/personal-project/grunt-highlight/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Decrypt-Encrypt Functions From Command Line" href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/>Decrypt-Encrypt Functions From Command Line</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2013</span></span><div class=post-intro><p>Functions to encrypt and then decrypt files from the command line with OpenSSL<p><a title="Read Decrypt-Encrypt Functions From Command Line" class=read-more href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Get Wordpress via Command Line" href=https://ohdoylerules.com/snippets/wordpress-via-command-line/>Get Wordpress via Command Line</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 21, 2013</span></span><div class=post-intro><p>Download and unzip the latest Wordpress version, all via command line<p><a title="Read Get Wordpress via Command Line" class=read-more href=https://ohdoylerules.com/snippets/wordpress-via-command-line/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="HostMonster PHPMailer Settings" href=https://ohdoylerules.com/snippets/hostmonster-phpmailer/>HostMonster PHPMailer Settings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2013</span></span><div class=post-intro><p>How to setup PHPMailer on a HostMonster hosting server<p><a title="Read HostMonster PHPMailer Settings" class=read-more href=https://ohdoylerules.com/snippets/hostmonster-phpmailer/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="GoDaddy Email on Digital Ocean" href=https://ohdoylerules.com/demo/godaddy-digital-ocean/>GoDaddy Email on Digital Ocean</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2013</span></span><div class=post-intro><p>How to use GoDaddy Email on Digital Ocean<p><a title="Read GoDaddy Email on Digital Ocean" class=read-more href=https://ohdoylerules.com/demo/godaddy-digital-ocean/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Github Wiki To HTML" href=https://ohdoylerules.com/personal-project/github-wiki-to-html/>Github Wiki To HTML</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 17, 2013</span></span><div class=post-intro><p>Github Wiki To HTML<p><a title="Read Github Wiki To HTML" class=read-more href=https://ohdoylerules.com/personal-project/github-wiki-to-html/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Phile CMS" href=https://ohdoylerules.com/personal-project/phile-cms/>Phile CMS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2013</span></span><div class=post-intro><p>Phile is flat-file CMS based on Pico<p><a title="Read Phile CMS" class=read-more href=https://ohdoylerules.com/personal-project/phile-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Google Drive Flat SVG Logo" href=https://ohdoylerules.com/personal-project/google-drive-svg-logo/>Google Drive Flat SVG Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 01, 2013</span></span><div class=post-intro><p>Google Drive Flat SVG Logo<p><a title="Read Google Drive Flat SVG Logo" class=read-more href=https://ohdoylerules.com/personal-project/google-drive-svg-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Docracy SVG logo" href=https://ohdoylerules.com/personal-project/docracy-logo-svg/>Docracy SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2013</span></span><div class=post-intro><p>Docracy logo in vector svg<p><a title="Read Docracy SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/docracy-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Assemble Starter" href=https://ohdoylerules.com/personal-project/assemble-starter/>Assemble Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2013</span></span><div class=post-intro><p>Assemble for Grunt.js Starter template<p><a title="Read Assemble Starter" class=read-more href=https://ohdoylerules.com/personal-project/assemble-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="pico-download plugin" href=https://ohdoylerules.com/personal-project/pico-download-plugin/>pico-download plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2013</span></span><div class=post-intro><p>I created a plugin to force files to download in PicoCMS<p><a title="Read pico-download plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-download-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="compare multiple md5 hashes" href=https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/>compare multiple md5 hashes</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div class=post-intro><p>compare multiple md5 hashes<p><a title="Read compare multiple md5 hashes" class=read-more href=https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico-Useragent Plugin" href=https://ohdoylerules.com/personal-project/pico-useragent/>Pico-Useragent Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div class=post-intro><p>A plugin for pico that allows you to list the useragent<p><a title="Read Pico-Useragent Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-useragent/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/jquery-doodal-js/ title=jQuery-doodal-js>jQuery-doodal-js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 09, 2013</span></span><div class=post-intro><p>jQuery-doodal-js<p><a title="Read jQuery-doodal-js" class=read-more href=https://ohdoylerules.com/personal-project/jquery-doodal-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grunt Sundown" href=https://ohdoylerules.com/personal-project/grunt-sundown/>Grunt Sundown</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 08, 2013</span></span><div class=post-intro><p>Grunt Sundown<p><a title="Read Grunt Sundown" class=read-more href=https://ohdoylerules.com/personal-project/grunt-sundown/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Render PHP File With Data" href=https://ohdoylerules.com/snippets/render-php-with-data/>Render PHP File With Data</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div class=post-intro><p>Render PHP File With Data<p><a title="Read Render PHP File With Data" class=read-more href=https://ohdoylerules.com/snippets/render-php-with-data/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple HTML5 Notifications" href=https://ohdoylerules.com/snippets/simple-html5-notification/>Simple HTML5 Notifications</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div class=post-intro><p>Simple HTML5 Notifications<p><a title="Read Simple HTML5 Notifications" class=read-more href=https://ohdoylerules.com/snippets/simple-html5-notification/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Twitter Widget" href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/>Pyro Twitter Widget</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 08, 2013</span></span><div class=post-intro><p>Pyro Twitter Widget<p><a title="Read Pyro Twitter Widget" class=read-more href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico Get By Filename Plugin" href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/>Pico Get By Filename Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2013</span></span><div class=post-intro><p>I wrote another small plugin for PicoCMS that actually lets you load files based on the filename<p><a title="Read Pico Get By Filename Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CMS Watch List" href=https://ohdoylerules.com/web/cms-watch-list/>CMS Watch List</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div class=post-intro><p>CMS Watch List<p><a title="Read CMS Watch List" class=read-more href=https://ohdoylerules.com/web/cms-watch-list/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Markdown Logo Vector SVG" href=https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/>Markdown Logo Vector SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div class=post-intro><p>Markdown Logo Vector SVG<p><a title="Read Markdown Logo Vector SVG" class=read-more href=https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The $100 Website" href=https://ohdoylerules.com/web/the-100-dollar-website/>The $100 Website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 23, 2013</span></span><div class=post-intro><p>I wrote a post on WARPAINT Media about people who ask about getting a website for $100.<p><a title="Read The $100 Website" class=read-more href=https://ohdoylerules.com/web/the-100-dollar-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kube in Styl/Rework" href=https://ohdoylerules.com/personal-project/kube-in-stylrework/>Kube in Styl/Rework</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 19, 2013</span></span><div class=post-intro><p>Kube in Styl/Rework<p><a title="Read Kube in Styl/Rework" class=read-more href=https://ohdoylerules.com/personal-project/kube-in-stylrework/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico Slider Plugin" href=https://ohdoylerules.com/personal-project/pico-slider-plugin/>Pico Slider Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 17, 2013</span></span><div class=post-intro><p>a plugin for Pico that allows you to create a Slider<p><a title="Read Pico Slider Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-slider-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="NPM logo SVG" href=https://ohdoylerules.com/personal-project/npm-logo-svg/>NPM logo SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 07, 2013</span></span><div class=post-intro><p>The NPM logo as a SVG<p><a title="Read NPM logo SVG" class=read-more href=https://ohdoylerules.com/personal-project/npm-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Apax apache theme in htdocs" href=https://ohdoylerules.com/snippets/apax-in-htdocs/>Apax apache theme in htdocs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 02, 2013</span></span><div class=post-intro><p>Apax apache theme in htdocs<p><a title="Read Apax apache theme in htdocs" class=read-more href=https://ohdoylerules.com/snippets/apax-in-htdocs/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Disqus Comments" href=https://ohdoylerules.com/personal-project/disqus-comments/>Disqus Comments</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 27, 2013</span></span><div class=post-intro><p>Adding Disqus Comments to the website<p><a title="Read Disqus Comments" class=read-more href=https://ohdoylerules.com/personal-project/disqus-comments/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS UA Sniffer Plugin" href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/>PyroCMS UA Sniffer Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>A plugin for PyroCMS that allows UA Sniffing<p><a title="Read PyroCMS UA Sniffer Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/rework-shade/ title=rework-shade>rework-shade</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>A package for rework that allows a shade function<p><a title="Read rework-shade" class=read-more href=https://ohdoylerules.com/personal-project/rework-shade/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/rework-math/ title=rework-math>rework-math</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>I created a plugin for rework that allows you to do simple math<p><a title="Read rework-math" class=read-more href=https://ohdoylerules.com/personal-project/rework-math/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Github Markdown Field Type" href=https://ohdoylerules.com/personal-project/pyro-github-markdown/>Pyro Github Markdown Field Type</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>Pyro Github Markdown Field Type<p><a title="Read Pyro Github Markdown Field Type" class=read-more href=https://ohdoylerules.com/personal-project/pyro-github-markdown/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="grunt terminal-notifier setup" href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/>grunt terminal-notifier setup</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 07, 2013</span></span><div class=post-intro><p>grunt terminal-notifier setup<p><a title="Read grunt terminal-notifier setup" class=read-more href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="NudeProject - a starting point for simple websites" href=https://ohdoylerules.com/personal-project/nudeproject/>NudeProject - a starting point for simple websites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2013</span></span><div class=post-intro><p>NudeProject - a starting point for simple websites<p><a title="Read NudeProject - a starting point for simple websites" class=read-more href=https://ohdoylerules.com/personal-project/nudeproject/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Detect Animation Events in Javascript" href=https://ohdoylerules.com/snippets/animation-events-in-javascript/>Detect Animation Events in Javascript</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 31, 2013</span></span><div class=post-intro><p>Detect Animation Events in Javascript<p><a title="Read Detect Animation Events in Javascript" class=read-more href=https://ohdoylerules.com/snippets/animation-events-in-javascript/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Startup Canada SVG logos" href=https://ohdoylerules.com/personal-project/startup-canada-svg/>Startup Canada SVG logos</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div class=post-intro><p>All the Startup Canada SVG logos<p><a title="Read Startup Canada SVG logos" class=read-more href=https://ohdoylerules.com/personal-project/startup-canada-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CrunchBase SVG logo" href=https://ohdoylerules.com/personal-project/crunchbase-svg/>CrunchBase SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div class=post-intro><p>CrunchBase SVG logo<p><a title="Read CrunchBase SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/crunchbase-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Modernizr SVG Fallback to PNG" href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/>Modernizr SVG Fallback to PNG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2013</span></span><div class=post-intro><p>Modernizr SVG Fallback to PNG<p><a title="Read Modernizr SVG Fallback to PNG" class=read-more href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Custom Google Forms" href=https://ohdoylerules.com/web/custom-google-forms/>Custom Google Forms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 22, 2013</span></span>  <span class=post-date>🕙  <span>Updated: September 20, 2014</span></span><div class=post-intro><p>I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something<p><a title="Read Custom Google Forms" class=read-more href=https://ohdoylerules.com/web/custom-google-forms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Salt.js micro selector library" href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/>Salt.js micro selector library</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2013</span></span><div class=post-intro><p>salt.js is micro DOM selector library. Minified, it comes in at 255 bytes<p><a title="Read Salt.js micro selector library" class=read-more href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS3 badge logo in SVG" href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/>CSS3 badge logo in SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2013</span></span><div class=post-intro><p>CSS3 badge logo in SVG<p><a title="Read CSS3 badge logo in SVG" class=read-more href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="AngularJS Hangout - Promises Promises" href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/>AngularJS Hangout - Promises Promises</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div class=post-intro><p>AngularJS Hangout - Promises Promises<p><a title="Read AngularJS Hangout - Promises Promises" class=read-more href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="April 2013 Redesign!" href=https://ohdoylerules.com/personal-project/april-2013-redesign/>April 2013 Redesign!</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div class=post-intro><p>Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively.<p><a title="Read April 2013 Redesign!" class=read-more href=https://ohdoylerules.com/personal-project/april-2013-redesign/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Switching to SVG on Grey Nimbus" href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/>Switching to SVG on Grey Nimbus</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 14, 2013</span></span><div class=post-intro><p>Switching to SVG for all images on my website<p><a title="Read Switching to SVG on Grey Nimbus" class=read-more href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS Module Generator" href=https://ohdoylerules.com/personal-project/pyro-module-generator/>PyroCMS Module Generator</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div class=post-intro><p>PyroCMS Module Generator that can generate modules for pyrocms<p><a title="Read PyroCMS Module Generator" class=read-more href=https://ohdoylerules.com/personal-project/pyro-module-generator/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Swipe.js Module" href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/>Pyro Swipe.js Module</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div class=post-intro><p>A module for Pyro CMS that wraps up the Swipe.js Module<p><a title="Read Pyro Swipe.js Module" class=read-more href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grey Nimbus website" href=https://ohdoylerules.com/portfolio/grey-nimbus-website/>Grey Nimbus website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 11, 2013</span></span><div class=post-intro><p>My old Grey Nimbus website<p><a title="Read Grey Nimbus website" class=read-more href=https://ohdoylerules.com/portfolio/grey-nimbus-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="jQuery Plugin Snippets for Sublime Text 2" href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/>jQuery Plugin Snippets for Sublime Text 2</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div class=post-intro><p>jQuery Plugin Snippets for Sublime Text 2<p><a title="Read jQuery Plugin Snippets for Sublime Text 2" class=read-more href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Image Select Field" href=https://ohdoylerules.com/personal-project/pyro-image-select-field/>Pyro Image Select Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div class=post-intro><p>A field for Pyro CMS that allows you to select images from your uploads<p><a title="Read Pyro Image Select Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-image-select-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PHP Variables in strings" href=https://ohdoylerules.com/demo/php-variables-in-strings/>PHP Variables in strings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 21, 2013</span></span><div class=post-intro><p>A list of all the ways you can put PHP Variables in strings<p><a title="Read PHP Variables in strings" class=read-more href=https://ohdoylerules.com/demo/php-variables-in-strings/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Blurb Field" href=https://ohdoylerules.com/personal-project/pyro-blurb-field/>Pyro Blurb Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2013</span></span><div class=post-intro><p>A field for Pyrocms that allows you to create little blurbs in a list<p><a title="Read Pyro Blurb Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-blurb-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Canadian Provinces Field" href=https://ohdoylerules.com/personal-project/canadian-provinces-field/>Canadian Provinces Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 15, 2013</span></span><div class=post-intro><p>Canadian Provinces Field<p><a title="Read Canadian Provinces Field" class=read-more href=https://ohdoylerules.com/personal-project/canadian-provinces-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Git Website Workflow" href=https://ohdoylerules.com/personal-project/git-website-workflow/>Git Website Workflow</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 13, 2013</span></span><div class=post-intro><p>Git Website Workflow<p><a title="Read Git Website Workflow" class=read-more href=https://ohdoylerules.com/personal-project/git-website-workflow/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS PageWidgets Field Type" href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/>PyroCMS PageWidgets Field Type</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 05, 2013</span></span><div class=post-intro><p>PyroCMS PageWidgets Field Type<p><a title="Read PyroCMS PageWidgets Field Type" class=read-more href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Clean CSS Updated" href=https://ohdoylerules.com/personal-project/clean-css-updated/>Clean CSS Updated</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2013</span></span><div class=post-intro><p>Clean CSS Chrome app Updated<p><a title="Read Clean CSS Updated" class=read-more href=https://ohdoylerules.com/personal-project/clean-css-updated/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro List Field" href=https://ohdoylerules.com/personal-project/pyro-list-field/>Pyro List Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 23, 2013</span></span><div class=post-intro><p>A field for Pyro CMS that allows the creation of Lists<p><a title="Read Pyro List Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-list-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Image Widget" href=https://ohdoylerules.com/personal-project/pyro-image-widget/>Pyro Image Widget</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div class=post-intro><p>A widget for Pyro CMS for creating Image sections<p><a title="Read Pyro Image Widget" class=read-more href=https://ohdoylerules.com/personal-project/pyro-image-widget/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Zepto Drag & Swap" href=https://ohdoylerules.com/personal-project/zepto-drag-swap/>Zepto Drag & Swap</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div class=post-intro><p>Create a drag and drop list with Zepto<p><a title="Read Zepto Drag & Swap" class=read-more href=https://ohdoylerules.com/personal-project/zepto-drag-swap/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Making a socket.io app and how socket.io works" href=https://ohdoylerules.com/demo/socketio-works-howto/>Making a socket.io app and how socket.io works</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 13, 2013</span></span><div class=post-intro><p>Making a socket.io app and how socket.io works<p><a title="Read Making a socket.io app and how socket.io works" class=read-more href=https://ohdoylerules.com/demo/socketio-works-howto/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Clean CSS in Chrome Apps Office Hours" href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/>Clean CSS in Chrome Apps Office Hours</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 19, 2012</span></span><div class=post-intro><p>So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours.<p><a title="Read Clean CSS in Chrome Apps Office Hours" class=read-more href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="View Folder Tree in MacOSX Terminal" href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/>View Folder Tree in MacOSX Terminal</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2012</span></span><div class=post-intro><p>View Folder Tree in MacOSX Terminal<p><a title="Read View Folder Tree in MacOSX Terminal" class=read-more href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="New business cards" href=https://ohdoylerules.com/portfolio/new-business-cards/>New business cards</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 15, 2012</span></span><div class=post-intro><p>Check out my new business cards<p><a title="Read New business cards" class=read-more href=https://ohdoylerules.com/portfolio/new-business-cards/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Flexbox Demo" href=https://ohdoylerules.com/demo/flexbox-demo/>Flexbox Demo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2012</span></span><div class=post-intro><p>A demo of CSS Flexbox<p><a title="Read Flexbox Demo" class=read-more href=https://ohdoylerules.com/demo/flexbox-demo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WYSIWYG in PyroCMS Widgets" href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/>WYSIWYG in PyroCMS Widgets</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 10, 2012</span></span><div class=post-intro><p>WYSIWYG in PyroCMS Widgets<p><a title="Read WYSIWYG in PyroCMS Widgets" class=read-more href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Letterpress loader in CSS" href=https://ohdoylerules.com/demo/letterpress-loader-in-css/>Letterpress loader in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2012</span></span><div class=post-intro><p>Create the Letterpress loader in CSS<p><a title="Read Letterpress loader in CSS" class=read-more href=https://ohdoylerules.com/demo/letterpress-loader-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/kube-node-express/ title=Kube-Node-Express>Kube-Node-Express</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2012</span></span><div class=post-intro><p>Kube-Node-Express<p><a title="Read Kube-Node-Express" class=read-more href=https://ohdoylerules.com/personal-project/kube-node-express/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Source Code Pro on Sublime Text" href=https://ohdoylerules.com/web/source-code-pro-sublime/>Source Code Pro on Sublime Text</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 19, 2012</span></span><div class=post-intro><p>Download and install Source Code Pro on Sublime Text<p><a title="Read Source Code Pro on Sublime Text" class=read-more href=https://ohdoylerules.com/web/source-code-pro-sublime/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/fiddle/array-prototype-range/ title=Array.prototype.range()>Array.prototype.range()</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div class=post-intro><p>How to create Array.prototype.range in Javascript<p><a title="Read Array.prototype.range()" class=read-more href=https://ohdoylerules.com/fiddle/array-prototype-range/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Generated Content in CSS" href=https://ohdoylerules.com/demo/generated-content-title/>Generated Content in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 18, 2012</span></span><div class=post-intro><p>Use Generated Content in CSS to show an Article link in plain text<p><a title="Read Generated Content in CSS" class=read-more href=https://ohdoylerules.com/demo/generated-content-title/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="No Javascript CSS Accordion" href=https://ohdoylerules.com/demo/no-javascript-accordion/>No Javascript CSS Accordion</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2012</span></span><div class=post-intro><p>Build an Accordion with just CSS and no Javascript<p><a title="Read No Javascript CSS Accordion" class=read-more href=https://ohdoylerules.com/demo/no-javascript-accordion/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Dancing Music Bars" href=https://ohdoylerules.com/fiddle/dancing-music-bars/>Dancing Music Bars</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 16, 2012</span></span><div class=post-intro><p>Create a Dancing Music Bar animation in CSS and SVG<p><a title="Read Dancing Music Bars" class=read-more href=https://ohdoylerules.com/fiddle/dancing-music-bars/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="zsh new file && open file function" href=https://ohdoylerules.com/snippets/zsh-new-open-function/>zsh new file && open file function</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 13, 2012</span></span><div class=post-intro><p>zsh new file && open file function<p><a title="Read zsh new file && open file function" class=read-more href=https://ohdoylerules.com/snippets/zsh-new-open-function/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Target Mozilla-only in CSS" href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/>Target Mozilla-only in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2012</span></span><div class=post-intro><p>Target Mozilla-only in CSS<p><a title="Read Target Mozilla-only in CSS" class=read-more href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="My Old Website" href=https://ohdoylerules.com/portfolio/my-old-website/>My Old Website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2012</span></span><div class=post-intro><p>See my old website<p><a title="Read My Old Website" class=read-more href=https://ohdoylerules.com/portfolio/my-old-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS3 Pagebend" href=https://ohdoylerules.com/fiddle/css3-pagebend/>CSS3 Pagebend</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div class=post-intro><p>Create a Pagebend effect using CSS<p><a title="Read CSS3 Pagebend" class=read-more href=https://ohdoylerules.com/fiddle/css3-pagebend/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS Date Card" href=https://ohdoylerules.com/fiddle/css-date-card/>CSS Date Card</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2012</span></span><div class=post-intro><p>Create a Date Card using CSS transitions, animations, and gradients<p><a title="Read CSS Date Card" class=read-more href=https://ohdoylerules.com/fiddle/css-date-card/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/snippets/nodelist-each/ title=nodelist.each>nodelist.each</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2012</span></span><div class=post-intro><p>nodelist.prototype.each in javascript<p><a title="Read nodelist.each" class=read-more href=https://ohdoylerules.com/snippets/nodelist-each/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Mozilla Dev Derby" href=https://ohdoylerules.com/demo/mozilla-dev-derby/>Mozilla Dev Derby</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2012</span></span><div class=post-intro><p>James Doyle runner up in Mozilla Dev Derby September 2012<p><a title="Read Mozilla Dev Derby" class=read-more href=https://ohdoylerules.com/demo/mozilla-dev-derby/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="No-Js Image Preview" href=https://ohdoylerules.com/fiddle/no-js-image-preview/>No-Js Image Preview</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 27, 2012</span></span><div class=post-intro><p>Create a No-Js Image Preview with only CSS<p><a title="Read No-Js Image Preview" class=read-more href=https://ohdoylerules.com/fiddle/no-js-image-preview/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Styling Radios and Checkboxes. Redux." href=https://ohdoylerules.com/web/styling-input-redux/>Styling Radios and Checkboxes. Redux.</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 19, 2012</span></span><div class=post-intro><p>Styling Radios and Checkboxes. Redux.<p><a title="Read Styling Radios and Checkboxes. Redux." class=read-more href=https://ohdoylerules.com/web/styling-input-redux/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WordPress Plugin Swipe.js" href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/>WordPress Plugin Swipe.js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2012</span></span><div class=post-intro><p>WordPress Plugin Swipe.js<p><a title="Read WordPress Plugin Swipe.js" class=read-more href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Making Checkboxes in WordPress options pages" href=https://ohdoylerules.com/web/checkboxes-options/>Making Checkboxes in WordPress options pages</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 11, 2012</span></span><div class=post-intro><p>Making Checkboxes in WordPress options pages<p><a title="Read Making Checkboxes in WordPress options pages" class=read-more href=https://ohdoylerules.com/web/checkboxes-options/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Styling radio and checkbox inputs" href=https://ohdoylerules.com/web/radio-checkboxes/>Styling radio and checkbox inputs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 07, 2012</span></span><div class=post-intro><p>Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs<p><a title="Read Styling radio and checkbox inputs" class=read-more href=https://ohdoylerules.com/web/radio-checkboxes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Generated content in CSS" href=https://ohdoylerules.com/fiddle/generated-content-in-css/>Generated content in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2012</span></span><div class=post-intro><p>How to use Generated content in CSS<p><a title="Read Generated content in CSS" class=read-more href=https://ohdoylerules.com/fiddle/generated-content-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Installing Android 4.1.1 Jelly Bean for Nexus S" href=https://ohdoylerules.com/android/jellybean-nexuss/>Installing Android 4.1.1 Jelly Bean for Nexus S</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 20, 2012</span></span><div class=post-intro><p>How to flash jelly bean onto a nexus s<p><a title="Read Installing Android 4.1.1 Jelly Bean for Nexus S" class=read-more href=https://ohdoylerules.com/android/jellybean-nexuss/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/april-2013-redesign/index.html b/docs/personal-project/april-2013-redesign/index.html
index 644bffe..6972f7f 100644
--- a/docs/personal-project/april-2013-redesign/index.html
+++ b/docs/personal-project/april-2013-redesign/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>April 2013 Redesign! | OhDoyleRules</title><meta content="April 2013 Redesign! | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="April 2013 Redesign!" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/april-2013-redesign/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/april-2013-redesign/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="April 2013 Redesign!" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively." name=description><meta content="Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively." itemprop=description><meta content="Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively." property=og:description><meta content="Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="April 2013 Redesign! | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="april, 2013, redesign, ohdoylerules, james2doyle, website, generated, content, css3, ie7" itemprop=keywords><meta content="april, 2013, redesign, ohdoylerules, james2doyle, website, generated, content, css3, ie7" property=article:tag><meta content="april, 2013, redesign, ohdoylerules, james2doyle, website, generated, content, css3, ie7" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/april-2013-redesign/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">April 2013 Redesign!</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Another redesign. This one is completely by me, with a little help from the <a title="html5blank wordpress theme" href=http://html5blank.com>html5blank</a> Wordpress template. I am using SVGs exclusively. Although I only have 2 images for the entire site, the logo and the mobile nav hamburger/menu button. I think the best part is the new code highlighter. It has some cool features.<pre style=background:#2b303b;color:#c0c5ce><code><span>// here is some javascript
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>April 2013 Redesign! | OhDoyleRules</title><meta content="April 2013 Redesign! | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="April 2013 Redesign!" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/april-2013-redesign/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/april-2013-redesign/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="April 2013 Redesign!" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively." name=description><meta content="Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively." itemprop=description><meta content="Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively." property=og:description><meta content="Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="April 2013 Redesign! | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="april, 2013, redesign, ohdoylerules, james2doyle, website, generated, content, css3, ie7" itemprop=keywords><meta content="april, 2013, redesign, ohdoylerules, james2doyle, website, generated, content, css3, ie7" property=article:tag><meta content="april, 2013, redesign, ohdoylerules, james2doyle, website, generated, content, css3, ie7" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/april-2013-redesign/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">April 2013 Redesign!</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Another redesign. This one is completely by me, with a little help from the <a rel="noopener nofollow noreferrer" title="html5blank wordpress theme" href=http://html5blank.com target=_blank>html5blank</a> Wordpress template. I am using SVGs exclusively. Although I only have 2 images for the entire site, the logo and the mobile nav hamburger/menu button. I think the best part is the new code highlighter. It has some cool features.<pre style=background:#2b303b;color:#c0c5ce><code><span>// here is some javascript
 </span><span>var item = document.getElementById('#item');
 </span><span>item.style.background = 'red';
 </span><span>item.setAttribute('data-index', 1);
diff --git a/docs/personal-project/assemble-starter/index.html b/docs/personal-project/assemble-starter/index.html
index 54f0e94..870ba03 100644
--- a/docs/personal-project/assemble-starter/index.html
+++ b/docs/personal-project/assemble-starter/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Assemble Starter | OhDoyleRules</title><meta content="Assemble Starter | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Assemble Starter" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/assemble-starter/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/assemble-starter/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Assemble Starter" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Assemble for Grunt.js Starter template" name=description><meta content="Assemble for Grunt.js Starter template" itemprop=description><meta content="Assemble for Grunt.js Starter template" property=og:description><meta content="Assemble for Grunt.js Starter template" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Assemble Starter | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grunt, assemble, template, starting, tasks, gruntfile, node, livereload, sass, css, javascript, handlebars" itemprop=keywords><meta content="grunt, assemble, template, starting, tasks, gruntfile, node, livereload, sass, css, javascript, handlebars" property=article:tag><meta content="grunt, assemble, template, starting, tasks, gruntfile, node, livereload, sass, css, javascript, handlebars" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/assemble-starter/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Assemble Starter</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Assemble starter is my starting point for any of my static <a title="Grunt Assemble Homepage" href=http://assemble.io/>assemble sites</a>.<p>You can find the <a title="Assemble Starter Repo" href=https://github.com/james2doyle/assemble-starter>project on Github</a>.<p>I often use assemble when I am building themes. The reason being you can do quick templating (thanks to <a title="Handlebars Homepage" href=http://handlebarsjs.com/>Handlebars</a>), it compiles fast, requires no server, and I am using <a title="Grunt Homepage" href=http://gruntjs.com/>Grunt</a> anyway.<p>Extra grunt tasks:<ul><li>grunt-contrib-watch -- <em>live reload and compiles on save</em><li>grunt-sass -- <em>C lib SASS action</em><li>grunt-contrib-concat -- <em>combine things</em><li>grunt-autoprefixer -- <em>prefix that ugliness</em></ul><p>Modernizr Checks:<ul><li>cssanimations<li>csstransforms<li>csstransforms3d<li>svg<li>touch<li>shiv<li>cssclasses<li>teststyles<li>testprop<li>testallprops<li>prefixes<li>domprefixes<li>css_filters</ul><p>Other Libs:<ul><li><a title="Swipe.js Homepage" href=http://swipejs.com/>swipe.js</a> -- <em>awesome slider lib</em><li><a href=http://github.com/james2doyle/saltjs>salt.js</a> -- <em>my micro selector lib</em></ul><p>Javascript Goodies:<ul><li>prefix() -- <em>detect the js/css prefixes for different browsers</em><li>xhr() -- <em>function for no-jQuery AJAX</em></ul><p>CSS Goodies:<ul><li>normalize.scss</ul><p>You can find the <a title="Assemble Starter Repo" href=https://github.com/james2doyle/assemble-starter>project on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Assemble Starter | OhDoyleRules</title><meta content="Assemble Starter | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Assemble Starter" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/assemble-starter/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/assemble-starter/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Assemble Starter" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Assemble for Grunt.js Starter template" name=description><meta content="Assemble for Grunt.js Starter template" itemprop=description><meta content="Assemble for Grunt.js Starter template" property=og:description><meta content="Assemble for Grunt.js Starter template" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Assemble Starter | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grunt, assemble, template, starting, tasks, gruntfile, node, livereload, sass, css, javascript, handlebars" itemprop=keywords><meta content="grunt, assemble, template, starting, tasks, gruntfile, node, livereload, sass, css, javascript, handlebars" property=article:tag><meta content="grunt, assemble, template, starting, tasks, gruntfile, node, livereload, sass, css, javascript, handlebars" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/assemble-starter/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Assemble Starter</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Assemble starter is my starting point for any of my static <a rel="noopener nofollow noreferrer" title="Grunt Assemble Homepage" href=http://assemble.io/ target=_blank>assemble sites</a>.<p>You can find the <a rel="noopener nofollow noreferrer" title="Assemble Starter Repo" href=https://github.com/james2doyle/assemble-starter target=_blank>project on Github</a>.<p>I often use assemble when I am building themes. The reason being you can do quick templating (thanks to <a rel="noopener nofollow noreferrer" title="Handlebars Homepage" href=http://handlebarsjs.com/ target=_blank>Handlebars</a>), it compiles fast, requires no server, and I am using <a rel="noopener nofollow noreferrer" title="Grunt Homepage" href=http://gruntjs.com/ target=_blank>Grunt</a> anyway.<p>Extra grunt tasks:<ul><li>grunt-contrib-watch -- <em>live reload and compiles on save</em><li>grunt-sass -- <em>C lib SASS action</em><li>grunt-contrib-concat -- <em>combine things</em><li>grunt-autoprefixer -- <em>prefix that ugliness</em></ul><p>Modernizr Checks:<ul><li>cssanimations<li>csstransforms<li>csstransforms3d<li>svg<li>touch<li>shiv<li>cssclasses<li>teststyles<li>testprop<li>testallprops<li>prefixes<li>domprefixes<li>css_filters</ul><p>Other Libs:<ul><li><a rel="noopener nofollow noreferrer" title="Swipe.js Homepage" href=http://swipejs.com/ target=_blank>swipe.js</a> -- <em>awesome slider lib</em><li><a rel="noopener nofollow noreferrer" href=http://github.com/james2doyle/saltjs target=_blank>salt.js</a> -- <em>my micro selector lib</em></ul><p>Javascript Goodies:<ul><li>prefix() -- <em>detect the js/css prefixes for different browsers</em><li>xhr() -- <em>function for no-jQuery AJAX</em></ul><p>CSS Goodies:<ul><li>normalize.scss</ul><p>You can find the <a rel="noopener nofollow noreferrer" title="Assemble Starter Repo" href=https://github.com/james2doyle/assemble-starter target=_blank>project on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/atom-monokai-dark/index.html b/docs/personal-project/atom-monokai-dark/index.html
index 001f01f..643d90a 100644
--- a/docs/personal-project/atom-monokai-dark/index.html
+++ b/docs/personal-project/atom-monokai-dark/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Atom Monokai Dark | OhDoyleRules</title><meta content="Atom Monokai Dark | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Atom Monokai Dark" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/atom-monokai-dark/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/atom-monokai-dark/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Atom Monokai Dark" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Dark Monokai theme for the Github Atom editor" name=description><meta content="Dark Monokai theme for the Github Atom editor" itemprop=description><meta content="Dark Monokai theme for the Github Atom editor" property=og:description><meta content="Dark Monokai theme for the Github Atom editor" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Atom Monokai Dark | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="monokai, theme, dark, github, atom, editor, less, css, tmtheme, font, smoothing, scrollbars" itemprop=keywords><meta content="monokai, theme, dark, github, atom, editor, less, css, tmtheme, font, smoothing, scrollbars" property=article:tag><meta content="monokai, theme, dark, github, atom, editor, less, css, tmtheme, font, smoothing, scrollbars" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/atom-monokai-dark/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Atom Monokai Dark</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 27, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I made a <a href=http://atom.io/packages/monokai-dark>dark monokai</a> syntax theme for <a href=http://atom.io/>Atom</a>.<p>Originally converted from <a href=https://github.com/kevinsawicki/monokai>monokai</a> which in turn came from the <a href=http://www.monokai.nl/blog/wp-content/asdev/Monokai.tmTheme>TextMate</a> theme using the <a href=http://atom.io/docs/latest/converting-a-text-mate-theme>TextMate bundle converter</a>.<div class=center><a href=/images/atom-monokai-dark.png target=_blank><img alt="atom monokai dark screenshot" src=/images/atom-monokai-dark.png></a></div><p>I would also suggest editing your main stylesheet and adding the following CSS:<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/* really nice smooth fonts */
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Atom Monokai Dark | OhDoyleRules</title><meta content="Atom Monokai Dark | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Atom Monokai Dark" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/atom-monokai-dark/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/atom-monokai-dark/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Atom Monokai Dark" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Dark Monokai theme for the Github Atom editor" name=description><meta content="Dark Monokai theme for the Github Atom editor" itemprop=description><meta content="Dark Monokai theme for the Github Atom editor" property=og:description><meta content="Dark Monokai theme for the Github Atom editor" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Atom Monokai Dark | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="monokai, theme, dark, github, atom, editor, less, css, tmtheme, font, smoothing, scrollbars" itemprop=keywords><meta content="monokai, theme, dark, github, atom, editor, less, css, tmtheme, font, smoothing, scrollbars" property=article:tag><meta content="monokai, theme, dark, github, atom, editor, less, css, tmtheme, font, smoothing, scrollbars" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/atom-monokai-dark/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Atom Monokai Dark</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 27, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I made a <a rel="noopener nofollow noreferrer" href=http://atom.io/packages/monokai-dark target=_blank>dark monokai</a> syntax theme for <a rel="noopener nofollow noreferrer" href=http://atom.io/ target=_blank>Atom</a>.<p>Originally converted from <a rel="noopener nofollow noreferrer" href=https://github.com/kevinsawicki/monokai target=_blank>monokai</a> which in turn came from the <a rel="noopener nofollow noreferrer" href=http://www.monokai.nl/blog/wp-content/asdev/Monokai.tmTheme target=_blank>TextMate</a> theme using the <a rel="noopener nofollow noreferrer" href=http://atom.io/docs/latest/converting-a-text-mate-theme target=_blank>TextMate bundle converter</a>.<div class=center><a href=/images/atom-monokai-dark.png target=_blank><img alt="atom monokai dark screenshot" src=/images/atom-monokai-dark.png></a></div><p>I would also suggest editing your main stylesheet and adding the following CSS:<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/* really nice smooth fonts */
 </span><span style=color:#bf616a>body </span><span>{
 </span><span>  -webkit-font-smoothing: antialiased;
 </span><span>  text-rendering: optimizeLegibility;
@@ -28,4 +28,4 @@
 </span><span>    overflow: auto;
 </span><span>  }
 </span><span>}
-</span></code></pre><p>This adds some nicer smoothing and also adds some custom scrollbars to both panes. This gets rid of the ugly strange white ones. I would also suggest checking out <a href=https://ohdoylerules.com/web/source-code-pro-sublime>Source Code Pro</a> for your font!<p>You can download the theme on <a href=http://atom.io/packages/monokai-dark>Atom</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>This adds some nicer smoothing and also adds some custom scrollbars to both panes. This gets rid of the ugly strange white ones. I would also suggest checking out <a rel="noopener nofollow noreferrer" href=https://ohdoylerules.com/web/source-code-pro-sublime target=_blank>Source Code Pro</a> for your font!<p>You can download the theme on <a rel="noopener nofollow noreferrer" href=http://atom.io/packages/monokai-dark target=_blank>Atom</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/canadian-provinces-field/index.html b/docs/personal-project/canadian-provinces-field/index.html
index 7ddbdc2..e715838 100644
--- a/docs/personal-project/canadian-provinces-field/index.html
+++ b/docs/personal-project/canadian-provinces-field/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Canadian Provinces Field | OhDoyleRules</title><meta content="Canadian Provinces Field | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Canadian Provinces Field" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/canadian-provinces-field/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/canadian-provinces-field/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Canadian Provinces Field" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Canadian Provinces Field" name=description><meta content="Canadian Provinces Field" itemprop=description><meta content="Canadian Provinces Field" property=og:description><meta content="Canadian Provinces Field" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Canadian Provinces Field | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="canadian, provinces, pyrocms, dropdown, field" itemprop=keywords><meta content="canadian, provinces, pyrocms, dropdown, field" property=article:tag><meta content="canadian, provinces, pyrocms, dropdown, field" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/canadian-provinces-field/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Canadian Provinces Field</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 15, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Created another <a title="PyroCMS website" href=http://pyrocms.com>PyroCMS</a> field. This one is for Canadian Provinces and Territories. Here is <a href=https://github.com/james2doyle/canadian-provinces-field title=canadian-provinces-field>the github page</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Canadian Provinces Field | OhDoyleRules</title><meta content="Canadian Provinces Field | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Canadian Provinces Field" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/canadian-provinces-field/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/canadian-provinces-field/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Canadian Provinces Field" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Canadian Provinces Field" name=description><meta content="Canadian Provinces Field" itemprop=description><meta content="Canadian Provinces Field" property=og:description><meta content="Canadian Provinces Field" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Canadian Provinces Field | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="canadian, provinces, pyrocms, dropdown, field" itemprop=keywords><meta content="canadian, provinces, pyrocms, dropdown, field" property=article:tag><meta content="canadian, provinces, pyrocms, dropdown, field" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/canadian-provinces-field/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Canadian Provinces Field</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 15, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Created another <a rel="noopener nofollow noreferrer" title="PyroCMS website" href=http://pyrocms.com target=_blank>PyroCMS</a> field. This one is for Canadian Provinces and Territories. Here is <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/canadian-provinces-field target=_blank title=canadian-provinces-field>the github page</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/chrome-reverse-geocode/index.html b/docs/personal-project/chrome-reverse-geocode/index.html
index 3eb9453..86f980d 100644
--- a/docs/personal-project/chrome-reverse-geocode/index.html
+++ b/docs/personal-project/chrome-reverse-geocode/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Chrome Reverse Geocode App | OhDoyleRules</title><meta content="Chrome Reverse Geocode App | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Chrome Reverse Geocode App" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Chrome Reverse Geocode App" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Chrome Reverse Geocode App" name=description><meta content="Chrome Reverse Geocode App" itemprop=description><meta content="Chrome Reverse Geocode App" property=og:description><meta content="Chrome Reverse Geocode App" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Chrome Reverse Geocode App | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="google maps, reverse, geocoding, chrome, packaged, app" itemprop=keywords><meta content="google maps, reverse, geocoding, chrome, packaged, app" property=article:tag><meta content="google maps, reverse, geocoding, chrome, packaged, app" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Chrome Reverse Geocode App</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 08, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I have created a new app (with the help of <a href=https://twitter.com/beatricelaw>Beatrice Law</a>) called <a title="Reverse Geocode on the Chrome Web Store" href=http://goo.gl/Z15Teh>Reverse Geocode</a>.<p>In the process of building the site for <a href=http://textbooksforchange.ca/>Textbooks For Change</a>, a <a href=http://warpaintmedia.ca>WARPAINT Media</a> client, I realized I needed an easy way for them to reverse geocode an address for their map listings.<p>The site is built on <a href=http://philecms.github.io/Phile/>PhileCMS</a> so it is very fast, but requires a little more savvy-ness than normal. I added the static Google Map that is based on the list of coordinates they enter in.<div class=center><a href=http://goo.gl/Z15Teh target=_blank><img alt="chrome reverse geocode app screenshot" src=/images/reverse-geocode.png></a></div><p>It is very easy to update, but not quite that easy to get the coordinates. There is a Google tool to do this, but it is actually not as nice (but I have an obvious bias).<p>The app allows you to enter in an address, then they app goes and gets the latitude and longitude. Then, because this is a <a href=http://developer.chrome.com/apps/about_apps.html>Chrome Packaged App</a>, you can copy it right to your clipboard with a single click!<p>You can download the app on the <a title="Reverse Geocode on the Chrome Web Store" href=http://goo.gl/Z15Teh>Chrome Web Store</a>.<p>The app <a title="Reverse Geocode on Github" href=https://github.com/WARPAINTMedia/chrome-reverse-geocode>is also on github</a> so anyone can submit some changes and improvements.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Chrome Reverse Geocode App | OhDoyleRules</title><meta content="Chrome Reverse Geocode App | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Chrome Reverse Geocode App" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Chrome Reverse Geocode App" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Chrome Reverse Geocode App" name=description><meta content="Chrome Reverse Geocode App" itemprop=description><meta content="Chrome Reverse Geocode App" property=og:description><meta content="Chrome Reverse Geocode App" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Chrome Reverse Geocode App | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="google maps, reverse, geocoding, chrome, packaged, app" itemprop=keywords><meta content="google maps, reverse, geocoding, chrome, packaged, app" property=article:tag><meta content="google maps, reverse, geocoding, chrome, packaged, app" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Chrome Reverse Geocode App</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 08, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I have created a new app (with the help of <a rel="noopener nofollow noreferrer" href=https://twitter.com/beatricelaw target=_blank>Beatrice Law</a>) called <a rel="noopener nofollow noreferrer" title="Reverse Geocode on the Chrome Web Store" href=http://goo.gl/Z15Teh target=_blank>Reverse Geocode</a>.<p>In the process of building the site for <a rel="noopener nofollow noreferrer" href=http://textbooksforchange.ca/ target=_blank>Textbooks For Change</a>, a <a rel="noopener nofollow noreferrer" href=http://warpaintmedia.ca target=_blank>WARPAINT Media</a> client, I realized I needed an easy way for them to reverse geocode an address for their map listings.<p>The site is built on <a rel="noopener nofollow noreferrer" href=http://philecms.github.io/Phile/ target=_blank>PhileCMS</a> so it is very fast, but requires a little more savvy-ness than normal. I added the static Google Map that is based on the list of coordinates they enter in.<div class=center><a href=http://goo.gl/Z15Teh target=_blank><img alt="chrome reverse geocode app screenshot" src=/images/reverse-geocode.png></a></div><p>It is very easy to update, but not quite that easy to get the coordinates. There is a Google tool to do this, but it is actually not as nice (but I have an obvious bias).<p>The app allows you to enter in an address, then they app goes and gets the latitude and longitude. Then, because this is a <a rel="noopener nofollow noreferrer" href=http://developer.chrome.com/apps/about_apps.html target=_blank>Chrome Packaged App</a>, you can copy it right to your clipboard with a single click!<p>You can download the app on the <a rel="noopener nofollow noreferrer" title="Reverse Geocode on the Chrome Web Store" href=http://goo.gl/Z15Teh target=_blank>Chrome Web Store</a>.<p>The app <a rel="noopener nofollow noreferrer" title="Reverse Geocode on Github" href=https://github.com/WARPAINTMedia/chrome-reverse-geocode target=_blank>is also on github</a> so anyone can submit some changes and improvements.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/clean-css-in-office-hours/index.html b/docs/personal-project/clean-css-in-office-hours/index.html
index 6886117..a3819ed 100644
--- a/docs/personal-project/clean-css-in-office-hours/index.html
+++ b/docs/personal-project/clean-css-in-office-hours/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Clean CSS in Chrome Apps Office Hours | OhDoyleRules</title><meta content="Clean CSS in Chrome Apps Office Hours | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Clean CSS in Chrome Apps Office Hours" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Clean CSS in Chrome Apps Office Hours" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours." name=description><meta content="So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours." itemprop=description><meta content="So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours." property=og:description><meta content="So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Clean CSS in Chrome Apps Office Hours | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="clean, css, chrome, apps, office, hours" itemprop=keywords><meta content="clean, css, chrome, apps, office, hours" property=article:tag><meta content="clean, css, chrome, apps, office, hours" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Clean CSS in Chrome Apps Office Hours</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 19, 2012</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=clean-css-made-it-into-a-chrome-apps-office-hours>Clean CSS made it into a Chrome Apps Office hours!!</h3><p>So my chrome app <a title="Clean CSS Chrome App" href=http://james2doyle.github.com/clean-css-chrome-app/>Clean CSS</a> made it onto one of the Chrome Apps Office Hours.<p>The Office Hours is a series of videos by Google where developers talk to the community about Google technology, software and programming. The way I got on was I saw Paul Kinlan, a Google Chrome developer advocate, make a post about the live office hours being held that day.<p>I managed to get a link to my app and he then reviewed it on the show!<p>The app <a title="Clean CSS on Github" href=https://github.com/james2doyle/clean-css-chrome-app/>is also on github</a> so anyone can submit some changes and improvements. You can download the app on the <a title="Clean CSS on Chrome Web Store" href=http://goo.gl/D9F7u>Chrome Web Store</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Clean CSS in Chrome Apps Office Hours | OhDoyleRules</title><meta content="Clean CSS in Chrome Apps Office Hours | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Clean CSS in Chrome Apps Office Hours" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Clean CSS in Chrome Apps Office Hours" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours." name=description><meta content="So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours." itemprop=description><meta content="So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours." property=og:description><meta content="So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Clean CSS in Chrome Apps Office Hours | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="clean, css, chrome, apps, office, hours" itemprop=keywords><meta content="clean, css, chrome, apps, office, hours" property=article:tag><meta content="clean, css, chrome, apps, office, hours" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Clean CSS in Chrome Apps Office Hours</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 19, 2012</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=clean-css-made-it-into-a-chrome-apps-office-hours>Clean CSS made it into a Chrome Apps Office hours!!</h3><p>So my chrome app <a rel="noopener nofollow noreferrer" title="Clean CSS Chrome App" href=http://james2doyle.github.com/clean-css-chrome-app/ target=_blank>Clean CSS</a> made it onto one of the Chrome Apps Office Hours.<p>The Office Hours is a series of videos by Google where developers talk to the community about Google technology, software and programming. The way I got on was I saw Paul Kinlan, a Google Chrome developer advocate, make a post about the live office hours being held that day.<p>I managed to get a link to my app and he then reviewed it on the show!<p>The app <a rel="noopener nofollow noreferrer" title="Clean CSS on Github" href=https://github.com/james2doyle/clean-css-chrome-app/ target=_blank>is also on github</a> so anyone can submit some changes and improvements. You can download the app on the <a rel="noopener nofollow noreferrer" title="Clean CSS on Chrome Web Store" href=http://goo.gl/D9F7u target=_blank>Chrome Web Store</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/clean-css-updated/index.html b/docs/personal-project/clean-css-updated/index.html
index 9471094..cb16e34 100644
--- a/docs/personal-project/clean-css-updated/index.html
+++ b/docs/personal-project/clean-css-updated/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Clean CSS Updated | OhDoyleRules</title><meta content="Clean CSS Updated | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Clean CSS Updated" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/clean-css-updated/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/clean-css-updated/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Clean CSS Updated" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Clean CSS Chrome app Updated" name=description><meta content="Clean CSS Chrome app Updated" itemprop=description><meta content="Clean CSS Chrome app Updated" property=og:description><meta content="Clean CSS Chrome app Updated" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Clean CSS Updated | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="clean, css, chrome, app, extension" itemprop=keywords><meta content="clean, css, chrome, app, extension" property=article:tag><meta content="clean, css, chrome, app, extension" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/clean-css-updated/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Clean CSS Updated</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I updated my Chrome packaged app, Clean CSS. Here is <a title="Clean CSS Chrome App" href=http://james2doyle.github.com/clean-css-chrome-app/>the website</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Clean CSS Updated | OhDoyleRules</title><meta content="Clean CSS Updated | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Clean CSS Updated" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/clean-css-updated/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/clean-css-updated/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Clean CSS Updated" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Clean CSS Chrome app Updated" name=description><meta content="Clean CSS Chrome app Updated" itemprop=description><meta content="Clean CSS Chrome app Updated" property=og:description><meta content="Clean CSS Chrome app Updated" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Clean CSS Updated | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="clean, css, chrome, app, extension" itemprop=keywords><meta content="clean, css, chrome, app, extension" property=article:tag><meta content="clean, css, chrome, app, extension" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/clean-css-updated/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Clean CSS Updated</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I updated my Chrome packaged app, Clean CSS. Here is <a rel="noopener nofollow noreferrer" title="Clean CSS Chrome App" href=http://james2doyle.github.com/clean-css-chrome-app/ target=_blank>the website</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/docracy-logo-svg/index.html b/docs/personal-project/docracy-logo-svg/index.html
index bdcf92a..15a6b69 100644
--- a/docs/personal-project/docracy-logo-svg/index.html
+++ b/docs/personal-project/docracy-logo-svg/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Docracy SVG logo | OhDoyleRules</title><meta content="Docracy SVG logo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Docracy SVG logo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/docracy-logo-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/docracy-logo-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Docracy SVG logo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Docracy logo in vector svg" name=description><meta content="Docracy logo in vector svg" itemprop=description><meta content="Docracy logo in vector svg" property=og:description><meta content="Docracy logo in vector svg" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Docracy SVG logo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="docracy, documents, legal, svg, vector, ai, image, logo" itemprop=keywords><meta content="docracy, documents, legal, svg, vector, ai, image, logo" property=article:tag><meta content="docracy, documents, legal, svg, vector, ai, image, logo" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/docracy-logo-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Docracy SVG logo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>The other founder of my company (<a title="WARPAINT Media Homepage" href=http://warpaintmedia.ca>WARPAINT Media</a>) was working on a blog post where we list all the PAAS/SAAS tools that we use. One of them is <a title="Docracy Homepage" href=https://www.docracy.com/>Docracy</a>. It is a site that shares free legal documents. You can modify and fork them to your own account, they have signing features as well.<p>Well again, I was unable to find the vector logo of their icon. So in my typical fashion, I recreated it. You can see it below.<div class=center><a title="docracy svg vector" href=/images/docracy.svg target=_blank><img alt="docracy svg vector" src=/images/docracy.svg></a></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Docracy SVG logo | OhDoyleRules</title><meta content="Docracy SVG logo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Docracy SVG logo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/docracy-logo-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/docracy-logo-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Docracy SVG logo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Docracy logo in vector svg" name=description><meta content="Docracy logo in vector svg" itemprop=description><meta content="Docracy logo in vector svg" property=og:description><meta content="Docracy logo in vector svg" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Docracy SVG logo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="docracy, documents, legal, svg, vector, ai, image, logo" itemprop=keywords><meta content="docracy, documents, legal, svg, vector, ai, image, logo" property=article:tag><meta content="docracy, documents, legal, svg, vector, ai, image, logo" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/docracy-logo-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Docracy SVG logo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>The other founder of my company (<a rel="noopener nofollow noreferrer" title="WARPAINT Media Homepage" href=http://warpaintmedia.ca target=_blank>WARPAINT Media</a>) was working on a blog post where we list all the PAAS/SAAS tools that we use. One of them is <a rel="noopener nofollow noreferrer" title="Docracy Homepage" href=https://www.docracy.com/ target=_blank>Docracy</a>. It is a site that shares free legal documents. You can modify and fork them to your own account, they have signing features as well.<p>Well again, I was unable to find the vector logo of their icon. So in my typical fashion, I recreated it. You can see it below.<div class=center><a title="docracy svg vector" href=/images/docracy.svg target=_blank><img alt="docracy svg vector" src=/images/docracy.svg></a></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/git-website-workflow/index.html b/docs/personal-project/git-website-workflow/index.html
index 29d7c8c..6a311d7 100644
--- a/docs/personal-project/git-website-workflow/index.html
+++ b/docs/personal-project/git-website-workflow/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Git Website Workflow | OhDoyleRules</title><meta content="Git Website Workflow | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Git Website Workflow" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/git-website-workflow/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/git-website-workflow/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Git Website Workflow" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Git Website Workflow" name=description><meta content="Git Website Workflow" itemprop=description><meta content="Git Website Workflow" property=og:description><meta content="Git Website Workflow" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Git Website Workflow | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="git, website, workflow, web, hub, source, server, version, control, aws, amazon web services, bash, shell, scripting" itemprop=keywords><meta content="git, website, workflow, web, hub, source, server, version, control, aws, amazon web services, bash, shell, scripting" property=article:tag><meta content="git, website, workflow, web, hub, source, server, version, control, aws, amazon web services, bash, shell, scripting" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/git-website-workflow/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Git Website Workflow</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 13, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="Amazon Web Services Logo" src=/images/awslogo.png></div><p>I recently switched to using Amazon Web Services for my hosting. It is awesome. Because it(EC2) is just a cloud computer, I can install anything I want and set up any workflow I desire. I recently found <a title="A web-focused Git workflow" href=http://goo.gl/0L3E6>an article</a> that was about a website git workflow.<p>I finally got the flow down, but it was taking a little too long to start a project. So I decided to <a title="git-websit-workflow bash script" href=https://github.com/james2doyle/git-website-workflow>make it into a script</a>.This works with any cloud computer workflow. It doesn't have to be just Amazon.<p>With a little help from <a title="google plus bash community post" href=https://plus.google.com/109231487156400680487/postsWzueZxHuP7b>some people on google+</a> I finally got it down. Check out the <a title="A web-focused Git workflow" href=http://goo.gl/0L3E6>original article</a> on how itworks and the philosophy of why.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Git Website Workflow | OhDoyleRules</title><meta content="Git Website Workflow | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Git Website Workflow" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/git-website-workflow/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/git-website-workflow/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Git Website Workflow" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Git Website Workflow" name=description><meta content="Git Website Workflow" itemprop=description><meta content="Git Website Workflow" property=og:description><meta content="Git Website Workflow" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Git Website Workflow | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="git, website, workflow, web, hub, source, server, version, control, aws, amazon web services, bash, shell, scripting" itemprop=keywords><meta content="git, website, workflow, web, hub, source, server, version, control, aws, amazon web services, bash, shell, scripting" property=article:tag><meta content="git, website, workflow, web, hub, source, server, version, control, aws, amazon web services, bash, shell, scripting" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/git-website-workflow/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Git Website Workflow</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 13, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="Amazon Web Services Logo" src=/images/awslogo.png></div><p>I recently switched to using Amazon Web Services for my hosting. It is awesome. Because it(EC2) is just a cloud computer, I can install anything I want and set up any workflow I desire. I recently found <a rel="noopener nofollow noreferrer" title="A web-focused Git workflow" href=http://goo.gl/0L3E6 target=_blank>an article</a> that was about a website git workflow.<p>I finally got the flow down, but it was taking a little too long to start a project. So I decided to <a rel="noopener nofollow noreferrer" title="git-websit-workflow bash script" href=https://github.com/james2doyle/git-website-workflow target=_blank>make it into a script</a>.This works with any cloud computer workflow. It doesn't have to be just Amazon.<p>With a little help from <a rel="noopener nofollow noreferrer" title="google plus bash community post" href=https://plus.google.com/109231487156400680487/postsWzueZxHuP7b target=_blank>some people on google+</a> I finally got it down. Check out the <a rel="noopener nofollow noreferrer" title="A web-focused Git workflow" href=http://goo.gl/0L3E6 target=_blank>original article</a> on how itworks and the philosophy of why.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/github-wiki-to-html/index.html b/docs/personal-project/github-wiki-to-html/index.html
index 4601df3..e9f879b 100644
--- a/docs/personal-project/github-wiki-to-html/index.html
+++ b/docs/personal-project/github-wiki-to-html/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Github Wiki To HTML | OhDoyleRules</title><meta content="Github Wiki To HTML | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Github Wiki To HTML" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/github-wiki-to-html/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/github-wiki-to-html/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Github Wiki To HTML" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Github Wiki To HTML" name=description><meta content="Github Wiki To HTML" itemprop=description><meta content="Github Wiki To HTML" property=og:description><meta content="Github Wiki To HTML" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Github Wiki To HTML | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="github, gh pages, markdown, md, wiki, html, marked, node, export" itemprop=keywords><meta content="github, gh pages, markdown, md, wiki, html, marked, node, export" property=article:tag><meta content="github, gh pages, markdown, md, wiki, html, marked, node, export" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/github-wiki-to-html/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Github Wiki To HTML</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you ever wanted to convert a Github wiki to a set of HTML pages? This can be an easy way to generate new gh-pages (github web pages) based on the projects Wiki.<p>As of <a href=https://github.com/blog/699-making-github-more-open-git-backed-wikis>August 2010</a>, you can actually clone a repositories wiki to your local machine just by adding .wiki at the end.<p>This pulls down all the wiki pages in their current format, by default this is <code>.md</code> files.<p>Now what can you do with these files? Well how about converting them to HTML so that you can use them in your gh-pages repo?<p>After cloning the <em>.wiki</em> repo to your local, you can create a script to convert all the files to HTML.<ul><li>first <a href=https://github.com/chjj/marked>install marked globally</a> via NPM<li>make a directory called <code>html</code> in the root of the repo<li>create a file called <code>convert.sh</code><li>run <code>chmod +x convert.sh</code> on that file to allow execution<li>paste the following into the file:</ul><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e>#!/bin/bash
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Github Wiki To HTML | OhDoyleRules</title><meta content="Github Wiki To HTML | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Github Wiki To HTML" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/github-wiki-to-html/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/github-wiki-to-html/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Github Wiki To HTML" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Github Wiki To HTML" name=description><meta content="Github Wiki To HTML" itemprop=description><meta content="Github Wiki To HTML" property=og:description><meta content="Github Wiki To HTML" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Github Wiki To HTML | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="github, gh pages, markdown, md, wiki, html, marked, node, export" itemprop=keywords><meta content="github, gh pages, markdown, md, wiki, html, marked, node, export" property=article:tag><meta content="github, gh pages, markdown, md, wiki, html, marked, node, export" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/github-wiki-to-html/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Github Wiki To HTML</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you ever wanted to convert a Github wiki to a set of HTML pages? This can be an easy way to generate new gh-pages (github web pages) based on the projects Wiki.<p>As of <a rel="noopener nofollow noreferrer" href=https://github.com/blog/699-making-github-more-open-git-backed-wikis target=_blank>August 2010</a>, you can actually clone a repositories wiki to your local machine just by adding .wiki at the end.<p>This pulls down all the wiki pages in their current format, by default this is <code>.md</code> files.<p>Now what can you do with these files? Well how about converting them to HTML so that you can use them in your gh-pages repo?<p>After cloning the <em>.wiki</em> repo to your local, you can create a script to convert all the files to HTML.<ul><li>first <a rel="noopener nofollow noreferrer" href=https://github.com/chjj/marked target=_blank>install marked globally</a> via NPM<li>make a directory called <code>html</code> in the root of the repo<li>create a file called <code>convert.sh</code><li>run <code>chmod +x convert.sh</code> on that file to allow execution<li>paste the following into the file:</ul><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e>#!/bin/bash
 </span><span>
 </span><span style=color:#65737e># for each md file in the directory
 </span><span style=color:#b48ead>for</span><span> file </span><span style=color:#b48ead>in </span><span>*.md
@@ -7,4 +7,4 @@
 </span><span>    </span><span style=color:#65737e># --gfm == use github flavoured markdown
 </span><span>    </span><span style=color:#bf616a>marked -o</span><span> html/$</span><span style=color:#bf616a>file</span><span>.html $</span><span style=color:#bf616a>file --gfm
 </span><span style=color:#b48ead>done
-</span></code></pre><p>Now if you look in the <code>html</code> directory, you will see all the markdown files have been converted and are in that folder.<p>In the next week or so, I will write a new post about how to use this method and the <a title="Grunt Assemble Project" href=https://github.com/assemble/assemble>grunt assemble</a> plugin to make simple pages.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Now if you look in the <code>html</code> directory, you will see all the markdown files have been converted and are in that folder.<p>In the next week or so, I will write a new post about how to use this method and the <a rel="noopener nofollow noreferrer" title="Grunt Assemble Project" href=https://github.com/assemble/assemble target=_blank>grunt assemble</a> plugin to make simple pages.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/grunt-highlight/index.html b/docs/personal-project/grunt-highlight/index.html
index 1534e07..a4bb248 100644
--- a/docs/personal-project/grunt-highlight/index.html
+++ b/docs/personal-project/grunt-highlight/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Grunt Highlight Plugin | OhDoyleRules</title><meta content="Grunt Highlight Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Grunt Highlight Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/grunt-highlight/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/grunt-highlight/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Grunt Highlight Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Grunt task for running Highlight.js over files or blocks of code" name=description><meta content="Grunt task for running Highlight.js over files or blocks of code" itemprop=description><meta content="Grunt task for running Highlight.js over files or blocks of code" property=og:description><meta content="Grunt task for running Highlight.js over files or blocks of code" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Grunt Highlight Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grunt, highlight.js, prettyprint, plugin, node" itemprop=keywords><meta content="grunt, highlight.js, prettyprint, plugin, node" property=article:tag><meta content="grunt, highlight.js, prettyprint, plugin, node" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/grunt-highlight/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Grunt Highlight Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 25, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Over the weekend, in a couple hours, I wrote this grunt plugin for <a href=http://highlightjs.org>Highlight.js</a>. I know that <a href=https://github.com/chjj/marked>marked</a> does an excellent job of parsing markdown, and can also use highlight, but I wanted something I could use in <a href=https://github.com/assemble/assemble/>assemble</a> for HTML parsing or full css/js files.<p>This was made much easier thanks to the <a href=https://github.com/yeoman/generator-gruntplugin>yeoman-gruntplugin</a> project.<h3 id=getting-started>Getting Started</h3><p>This plugin requires Grunt.<p>If you haven't used <a href=http://gruntjs.com/>Grunt</a> before, be sure to check out the <a href=http://gruntjs.com/getting-started>Getting Started</a> guide, as it explains how to create a <a href=http://gruntjs.com/sample-gruntfile>Gruntfile</a> as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>npm</span><span> install grunt-highlight</span><span style=color:#bf616a> --save-dev
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Grunt Highlight Plugin | OhDoyleRules</title><meta content="Grunt Highlight Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Grunt Highlight Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/grunt-highlight/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/grunt-highlight/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Grunt Highlight Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Grunt task for running Highlight.js over files or blocks of code" name=description><meta content="Grunt task for running Highlight.js over files or blocks of code" itemprop=description><meta content="Grunt task for running Highlight.js over files or blocks of code" property=og:description><meta content="Grunt task for running Highlight.js over files or blocks of code" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Grunt Highlight Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grunt, highlight.js, prettyprint, plugin, node" itemprop=keywords><meta content="grunt, highlight.js, prettyprint, plugin, node" property=article:tag><meta content="grunt, highlight.js, prettyprint, plugin, node" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/grunt-highlight/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Grunt Highlight Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 25, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Over the weekend, in a couple hours, I wrote this grunt plugin for <a rel="noopener nofollow noreferrer" href=http://highlightjs.org target=_blank>Highlight.js</a>. I know that <a rel="noopener nofollow noreferrer" href=https://github.com/chjj/marked target=_blank>marked</a> does an excellent job of parsing markdown, and can also use highlight, but I wanted something I could use in <a rel="noopener nofollow noreferrer" href=https://github.com/assemble/assemble/ target=_blank>assemble</a> for HTML parsing or full css/js files.<p>This was made much easier thanks to the <a rel="noopener nofollow noreferrer" href=https://github.com/yeoman/generator-gruntplugin target=_blank>yeoman-gruntplugin</a> project.<h3 id=getting-started>Getting Started</h3><p>This plugin requires Grunt.<p>If you haven't used <a rel="noopener nofollow noreferrer" href=http://gruntjs.com/ target=_blank>Grunt</a> before, be sure to check out the <a rel="noopener nofollow noreferrer" href=http://gruntjs.com/getting-started target=_blank>Getting Started</a> guide, as it explains how to create a <a rel="noopener nofollow noreferrer" href=http://gruntjs.com/sample-gruntfile target=_blank>Gruntfile</a> as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>npm</span><span> install grunt-highlight</span><span style=color:#bf616a> --save-dev
 </span></code></pre><p>Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#bf616a>grunt</span><span>.</span><span style=color:#8fa1b3>loadNpmTasks</span><span>('</span><span style=color:#a3be8c>grunt-highlight</span><span>');
 </span></code></pre><h3 id=the-highlight-task>The "highlight" task</h3><h4 id=overview>Overview</h4><p>In your project's Gruntfile, add a section named <code>highlight</code> to the data object passed into <code>grunt.initConfig()</code>.<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#bf616a>grunt</span><span>.</span><span style=color:#8fa1b3>initConfig</span><span>({
 </span><span>  highlight: {
@@ -57,4 +57,4 @@
 </span><span>    }
 </span><span>  }
 </span><span>});
-</span></code></pre><p>Check out the project <a href=https://github.com/james2doyle/grunt-highlight>on github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Check out the project <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/grunt-highlight target=_blank>on github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/grunt-sundown/index.html b/docs/personal-project/grunt-sundown/index.html
index 7d63886..f00e794 100644
--- a/docs/personal-project/grunt-sundown/index.html
+++ b/docs/personal-project/grunt-sundown/index.html
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Grunt Sundown | OhDoyleRules</title><meta content="Grunt Sundown | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Grunt Sundown" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/grunt-sundown/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/grunt-sundown/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Grunt Sundown" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Grunt Sundown" name=description><meta content="Grunt Sundown" itemprop=description><meta content="Grunt Sundown" property=og:description><meta content="Grunt Sundown" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Grunt Sundown | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grunt, sundown, markdown, plugin, node, robotskirt, c, library" itemprop=keywords><meta content="grunt, sundown, markdown, plugin, node, robotskirt, c, library" property=article:tag><meta content="grunt, sundown, markdown, plugin, node, robotskirt, c, library" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/grunt-sundown/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Grunt Sundown</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 08, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p><strong>grunt-sundown</strong> is a wrapper for <a href=https://github.com/benmills/robotskirt>robotskirt</a>(<a href=https://github.com/vmg/sundown>Sundown</a>) - a C implementation of <a href=http://daringfireball.net/projects/markdown/>Markdown</a><h3 id=getting-started>Getting Started</h3><p>This plugin requires Grunt <code>~0.4.1</code><p>If you haven't used <a href=http://gruntjs.com/>Grunt</a> before, be sure to check out the <a href=http://gruntjs.com/getting-started>Getting Started</a> guide, as it explains how to create a <a href=http://gruntjs.com/sample-gruntfile>Gruntfile</a> as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:<pre style=background:#2b303b;color:#c0c5ce><code><span>npm install grunt-sundown --save-dev
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Grunt Sundown | OhDoyleRules</title><meta content="Grunt Sundown | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Grunt Sundown" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/grunt-sundown/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/grunt-sundown/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Grunt Sundown" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Grunt Sundown" name=description><meta content="Grunt Sundown" itemprop=description><meta content="Grunt Sundown" property=og:description><meta content="Grunt Sundown" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Grunt Sundown | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grunt, sundown, markdown, plugin, node, robotskirt, c, library" itemprop=keywords><meta content="grunt, sundown, markdown, plugin, node, robotskirt, c, library" property=article:tag><meta content="grunt, sundown, markdown, plugin, node, robotskirt, c, library" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/grunt-sundown/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Grunt Sundown</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 08, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p><strong>grunt-sundown</strong> is a wrapper for <a rel="noopener nofollow noreferrer" href=https://github.com/benmills/robotskirt target=_blank>robotskirt</a>(<a rel="noopener nofollow noreferrer" href=https://github.com/vmg/sundown target=_blank>Sundown</a>) - a C implementation of <a rel="noopener nofollow noreferrer" href=http://daringfireball.net/projects/markdown/ target=_blank>Markdown</a><h3 id=getting-started>Getting Started</h3><p>This plugin requires Grunt <code>~0.4.1</code><p>If you haven't used <a rel="noopener nofollow noreferrer" href=http://gruntjs.com/ target=_blank>Grunt</a> before, be sure to check out the <a rel="noopener nofollow noreferrer" href=http://gruntjs.com/getting-started target=_blank>Getting Started</a> guide, as it explains how to create a <a rel="noopener nofollow noreferrer" href=http://gruntjs.com/sample-gruntfile target=_blank>Gruntfile</a> as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:<pre style=background:#2b303b;color:#c0c5ce><code><span>npm install grunt-sundown --save-dev
 </span></code></pre><p>Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:<pre style=background:#2b303b;color:#c0c5ce><code><span>grunt.loadNpmTasks('grunt-sundown');
-</span></code></pre><p>You can find the project <a title="grunt-sundown on Github" href=https://github.com/james2doyle/grunt-sundown>on Github</a>.<h3 id=the-sundown-task>The "sundown" task</h3><h4 id=overview>Overview</h4><p>In your project's Gruntfile, add a section named <code>sundown</code> to the data object passed into <code>grunt.initConfig()</code>.<pre style=background:#2b303b;color:#c0c5ce><code><span>grunt.initConfig({
+</span></code></pre><p>You can find the project <a rel="noopener nofollow noreferrer" title="grunt-sundown on Github" href=https://github.com/james2doyle/grunt-sundown target=_blank>on Github</a>.<h3 id=the-sundown-task>The "sundown" task</h3><h4 id=overview>Overview</h4><p>In your project's Gruntfile, add a section named <code>sundown</code> to the data object passed into <code>grunt.initConfig()</code>.<pre style=background:#2b303b;color:#c0c5ce><code><span>grunt.initConfig({
 </span><span>  sundown: {
 </span><span>    target: {
 </span><span>      options: {
@@ -41,4 +41,4 @@
 </span><span>  },
 </span><span>  separator: '\n\n' // concat option for multiple files
 </span><span>}
-</span></code></pre><h4 id=more-information>More Information</h4><p>You can try your luck on the <a href=https://github.com/vmg/sundown>Sundown</a> homepage. Or check out some of the <a href=https://github.com/vmg/sundown#bindings>other wrappers</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><h4 id=more-information>More Information</h4><p>You can try your luck on the <a rel="noopener nofollow noreferrer" href=https://github.com/vmg/sundown target=_blank>Sundown</a> homepage. Or check out some of the <a rel="noopener nofollow noreferrer" href=https://github.com/vmg/sundown#bindings target=_blank>other wrappers</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/index.html b/docs/personal-project/index.html
index 3643ad1..b612526 100644
--- a/docs/personal-project/index.html
+++ b/docs/personal-project/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Personal Project | OhDoyleRules</title><meta content="Personal Project | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Personal Project" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Personal Project" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The personal project category of the blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The personal project category of the blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The personal project category of the blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The personal project category of the blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Chrome Reverse Geocode App" href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/>Chrome Reverse Geocode App</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 08, 2014</span></span><div class=post-intro><p>Chrome Reverse Geocode App<p><a title="Read Chrome Reverse Geocode App" class=read-more href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Clean CSS in Chrome Apps Office Hours" href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/>Clean CSS in Chrome Apps Office Hours</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 19, 2012</span></span><div class=post-intro><p>So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours.<p><a title="Read Clean CSS in Chrome Apps Office Hours" class=read-more href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Blurb Field" href=https://ohdoylerules.com/personal-project/pyro-blurb-field/>Pyro Blurb Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2013</span></span><div class=post-intro><p>A field for Pyrocms that allows you to create little blurbs in a list<p><a title="Read Pyro Blurb Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-blurb-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PHP WebSocket Chat" href=https://ohdoylerules.com/personal-project/php-websocket-chat/>PHP WebSocket Chat</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 08, 2014</span></span><div class=post-intro><p>PHP websocket chat application example<p><a title="Read PHP WebSocket Chat" class=read-more href=https://ohdoylerules.com/personal-project/php-websocket-chat/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CrunchBase SVG logo" href=https://ohdoylerules.com/personal-project/crunchbase-svg/>CrunchBase SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div class=post-intro><p>CrunchBase SVG logo<p><a title="Read CrunchBase SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/crunchbase-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="NPM logo SVG" href=https://ohdoylerules.com/personal-project/npm-logo-svg/>NPM logo SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 07, 2013</span></span><div class=post-intro><p>The NPM logo as a SVG<p><a title="Read NPM logo SVG" class=read-more href=https://ohdoylerules.com/personal-project/npm-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Github Markdown Field Type" href=https://ohdoylerules.com/personal-project/pyro-github-markdown/>Pyro Github Markdown Field Type</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>Pyro Github Markdown Field Type<p><a title="Read Pyro Github Markdown Field Type" class=read-more href=https://ohdoylerules.com/personal-project/pyro-github-markdown/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Binder" href=https://ohdoylerules.com/personal-project/simple-binder/>Simple Binder</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2014</span></span><div class=post-intro><p>simplebinder is a zero dependency one-way databinder for javascript<p><a title="Read Simple Binder" class=read-more href=https://ohdoylerules.com/personal-project/simple-binder/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kaenon Vector Logo" href=https://ohdoylerules.com/personal-project/kaenon-logo/>Kaenon Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 10, 2014</span></span><div class=post-intro><p>The Kaenon logo in a vector SVG format<p><a title="Read Kaenon Vector Logo" class=read-more href=https://ohdoylerules.com/personal-project/kaenon-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS UA Sniffer Plugin" href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/>PyroCMS UA Sniffer Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>A plugin for PyroCMS that allows UA Sniffing<p><a title="Read PyroCMS UA Sniffer Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Groupon SVG logo" href=https://ohdoylerules.com/personal-project/groupon-green-logo-svg/>Groupon SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 24, 2014</span></span><div class=post-intro><p>groupon logo in vector svg<p><a title="Read Groupon SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/groupon-green-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Switching to SVG on Grey Nimbus" href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/>Switching to SVG on Grey Nimbus</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 14, 2013</span></span><div class=post-intro><p>Switching to SVG for all images on my website<p><a title="Read Switching to SVG on Grey Nimbus" class=read-more href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Phile CMS" href=https://ohdoylerules.com/personal-project/phile-cms/>Phile CMS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2013</span></span><div class=post-intro><p>Phile is flat-file CMS based on Pico<p><a title="Read Phile CMS" class=read-more href=https://ohdoylerules.com/personal-project/phile-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="April 2013 Redesign!" href=https://ohdoylerules.com/personal-project/april-2013-redesign/>April 2013 Redesign!</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div class=post-intro><p>Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively.<p><a title="Read April 2013 Redesign!" class=read-more href=https://ohdoylerules.com/personal-project/april-2013-redesign/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Twitter Widget" href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/>Pyro Twitter Widget</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 08, 2013</span></span><div class=post-intro><p>Pyro Twitter Widget<p><a title="Read Pyro Twitter Widget" class=read-more href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/lico-luvit-cms/ title=Lico>Lico</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2014</span></span><div class=post-intro><p>Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua<p><a title="Read Lico" class=read-more href=https://ohdoylerules.com/personal-project/lico-luvit-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Clean CSS Updated" href=https://ohdoylerules.com/personal-project/clean-css-updated/>Clean CSS Updated</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2013</span></span><div class=post-intro><p>Clean CSS Chrome app Updated<p><a title="Read Clean CSS Updated" class=read-more href=https://ohdoylerules.com/personal-project/clean-css-updated/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/rework-math/ title=rework-math>rework-math</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>I created a plugin for rework that allows you to do simple math<p><a title="Read rework-math" class=read-more href=https://ohdoylerules.com/personal-project/rework-math/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS Module Generator 2.0" href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/>PyroCMS Module Generator 2.0</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 16, 2014</span></span><div class=post-intro><p>The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up<p><a title="Read PyroCMS Module Generator 2.0" class=read-more href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Phalcon Micro App Starter" href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/>Phalcon Micro App Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 20, 2015</span></span><div class=post-intro><p>A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class<p><a title="Read Phalcon Micro App Starter" class=read-more href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kube in Styl/Rework" href=https://ohdoylerules.com/personal-project/kube-in-stylrework/>Kube in Styl/Rework</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 19, 2013</span></span><div class=post-intro><p>Kube in Styl/Rework<p><a title="Read Kube in Styl/Rework" class=read-more href=https://ohdoylerules.com/personal-project/kube-in-stylrework/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Image Widget" href=https://ohdoylerules.com/personal-project/pyro-image-widget/>Pyro Image Widget</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div class=post-intro><p>A widget for Pyro CMS for creating Image sections<p><a title="Read Pyro Image Widget" class=read-more href=https://ohdoylerules.com/personal-project/pyro-image-widget/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/rework-shade/ title=rework-shade>rework-shade</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>A package for rework that allows a shade function<p><a title="Read rework-shade" class=read-more href=https://ohdoylerules.com/personal-project/rework-shade/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Git Website Workflow" href=https://ohdoylerules.com/personal-project/git-website-workflow/>Git Website Workflow</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 13, 2013</span></span><div class=post-intro><p>Git Website Workflow<p><a title="Read Git Website Workflow" class=read-more href=https://ohdoylerules.com/personal-project/git-website-workflow/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Assemble Starter" href=https://ohdoylerules.com/personal-project/assemble-starter/>Assemble Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2013</span></span><div class=post-intro><p>Assemble for Grunt.js Starter template<p><a title="Read Assemble Starter" class=read-more href=https://ohdoylerules.com/personal-project/assemble-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Disqus Comments" href=https://ohdoylerules.com/personal-project/disqus-comments/>Disqus Comments</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 27, 2013</span></span><div class=post-intro><p>Adding Disqus Comments to the website<p><a title="Read Disqus Comments" class=read-more href=https://ohdoylerules.com/personal-project/disqus-comments/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Atom Monokai Dark" href=https://ohdoylerules.com/personal-project/atom-monokai-dark/>Atom Monokai Dark</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 27, 2014</span></span><div class=post-intro><p>Dark Monokai theme for the Github Atom editor<p><a title="Read Atom Monokai Dark" class=read-more href=https://ohdoylerules.com/personal-project/atom-monokai-dark/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico-Useragent Plugin" href=https://ohdoylerules.com/personal-project/pico-useragent/>Pico-Useragent Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div class=post-intro><p>A plugin for pico that allows you to list the useragent<p><a title="Read Pico-Useragent Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-useragent/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico Get By Filename Plugin" href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/>Pico Get By Filename Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2013</span></span><div class=post-intro><p>I wrote another small plugin for PicoCMS that actually lets you load files based on the filename<p><a title="Read Pico Get By Filename Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The Alternative Cms" href=https://ohdoylerules.com/personal-project/the-alternative-cms/>The Alternative Cms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 26, 2014</span></span><div class=post-intro><p>Presentation for The Alternative Cms<p><a title="Read The Alternative Cms" class=read-more href=https://ohdoylerules.com/personal-project/the-alternative-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Canadian Provinces Field" href=https://ohdoylerules.com/personal-project/canadian-provinces-field/>Canadian Provinces Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 15, 2013</span></span><div class=post-intro><p>Canadian Provinces Field<p><a title="Read Canadian Provinces Field" class=read-more href=https://ohdoylerules.com/personal-project/canadian-provinces-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grunt Highlight Plugin" href=https://ohdoylerules.com/personal-project/grunt-highlight/>Grunt Highlight Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 25, 2013</span></span><div class=post-intro><p>Grunt task for running Highlight.js over files or blocks of code<p><a title="Read Grunt Highlight Plugin" class=read-more href=https://ohdoylerules.com/personal-project/grunt-highlight/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Docracy SVG logo" href=https://ohdoylerules.com/personal-project/docracy-logo-svg/>Docracy SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2013</span></span><div class=post-intro><p>Docracy logo in vector svg<p><a title="Read Docracy SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/docracy-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Zepto Drag & Swap" href=https://ohdoylerules.com/personal-project/zepto-drag-swap/>Zepto Drag & Swap</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div class=post-intro><p>Create a drag and drop list with Zepto<p><a title="Read Zepto Drag & Swap" class=read-more href=https://ohdoylerules.com/personal-project/zepto-drag-swap/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Markdown Logo Vector SVG" href=https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/>Markdown Logo Vector SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div class=post-intro><p>Markdown Logo Vector SVG<p><a title="Read Markdown Logo Vector SVG" class=read-more href=https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Startup Canada SVG logos" href=https://ohdoylerules.com/personal-project/startup-canada-svg/>Startup Canada SVG logos</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div class=post-intro><p>All the Startup Canada SVG logos<p><a title="Read Startup Canada SVG logos" class=read-more href=https://ohdoylerules.com/personal-project/startup-canada-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Swipe.js Module" href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/>Pyro Swipe.js Module</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div class=post-intro><p>A module for Pyro CMS that wraps up the Swipe.js Module<p><a title="Read Pyro Swipe.js Module" class=read-more href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grunt Sundown" href=https://ohdoylerules.com/personal-project/grunt-sundown/>Grunt Sundown</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 08, 2013</span></span><div class=post-intro><p>Grunt Sundown<p><a title="Read Grunt Sundown" class=read-more href=https://ohdoylerules.com/personal-project/grunt-sundown/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Minimal Raspberry Pi OS" href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/>Minimal Raspberry Pi OS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2015</span></span>  <span class=post-date>🕙  <span>Updated: March 20, 2015</span></span><div class=post-intro><p>Setup and improve the Moebius OS for the Raspberry Pi<p><a title="Read Minimal Raspberry Pi OS" class=read-more href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro List Field" href=https://ohdoylerules.com/personal-project/pyro-list-field/>Pyro List Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 23, 2013</span></span><div class=post-intro><p>A field for Pyro CMS that allows the creation of Lists<p><a title="Read Pyro List Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-list-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="NudeProject - a starting point for simple websites" href=https://ohdoylerules.com/personal-project/nudeproject/>NudeProject - a starting point for simple websites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2013</span></span><div class=post-intro><p>NudeProject - a starting point for simple websites<p><a title="Read NudeProject - a starting point for simple websites" class=read-more href=https://ohdoylerules.com/personal-project/nudeproject/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Github Wiki To HTML" href=https://ohdoylerules.com/personal-project/github-wiki-to-html/>Github Wiki To HTML</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 17, 2013</span></span><div class=post-intro><p>Github Wiki To HTML<p><a title="Read Github Wiki To HTML" class=read-more href=https://ohdoylerules.com/personal-project/github-wiki-to-html/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS PageWidgets Field Type" href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/>PyroCMS PageWidgets Field Type</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 05, 2013</span></span><div class=post-intro><p>PyroCMS PageWidgets Field Type<p><a title="Read PyroCMS PageWidgets Field Type" class=read-more href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Google Drive Flat SVG Logo" href=https://ohdoylerules.com/personal-project/google-drive-svg-logo/>Google Drive Flat SVG Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 01, 2013</span></span><div class=post-intro><p>Google Drive Flat SVG Logo<p><a title="Read Google Drive Flat SVG Logo" class=read-more href=https://ohdoylerules.com/personal-project/google-drive-svg-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/kube-node-express/ title=Kube-Node-Express>Kube-Node-Express</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2012</span></span><div class=post-intro><p>Kube-Node-Express<p><a title="Read Kube-Node-Express" class=read-more href=https://ohdoylerules.com/personal-project/kube-node-express/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Image Select Field" href=https://ohdoylerules.com/personal-project/pyro-image-select-field/>Pyro Image Select Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div class=post-intro><p>A field for Pyro CMS that allows you to select images from your uploads<p><a title="Read Pyro Image Select Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-image-select-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/jquery-doodal-js/ title=jQuery-doodal-js>jQuery-doodal-js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 09, 2013</span></span><div class=post-intro><p>jQuery-doodal-js<p><a title="Read jQuery-doodal-js" class=read-more href=https://ohdoylerules.com/personal-project/jquery-doodal-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="pico-download plugin" href=https://ohdoylerules.com/personal-project/pico-download-plugin/>pico-download plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2013</span></span><div class=post-intro><p>I created a plugin to force files to download in PicoCMS<p><a title="Read pico-download plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-download-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vim Vector Logo" href=https://ohdoylerules.com/personal-project/vim-svg/>Vim Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 04, 2014</span></span>  <span class=post-date>🕙  <span>Updated: June 17, 2014</span></span><div class=post-intro><p>The Vim logo in a vector SVG format. Also includes a ICNS file for OSX.<p><a title="Read Vim Vector Logo" class=read-more href=https://ohdoylerules.com/personal-project/vim-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Sublime Node Snippets" href=https://ohdoylerules.com/personal-project/sublime-node-snippets/>Sublime Node Snippets</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 25, 2014</span></span><div class=post-intro><p>Sublime Text snippets for node, async, underscore, and lodash<p><a title="Read Sublime Node Snippets" class=read-more href=https://ohdoylerules.com/personal-project/sublime-node-snippets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS Module Generator" href=https://ohdoylerules.com/personal-project/pyro-module-generator/>PyroCMS Module Generator</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div class=post-intro><p>PyroCMS Module Generator that can generate modules for pyrocms<p><a title="Read PyroCMS Module Generator" class=read-more href=https://ohdoylerules.com/personal-project/pyro-module-generator/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico Slider Plugin" href=https://ohdoylerules.com/personal-project/pico-slider-plugin/>Pico Slider Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 17, 2013</span></span><div class=post-intro><p>a plugin for Pico that allows you to create a Slider<p><a title="Read Pico Slider Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-slider-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Koding Interview" href=https://ohdoylerules.com/personal-project/koding-interview/>Koding Interview</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2014</span></span><div class=post-intro><p>James Doyle interview by the developer social network Koding<p><a title="Read Koding Interview" class=read-more href=https://ohdoylerules.com/personal-project/koding-interview/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="All About PhileCMS Video" href=https://ohdoylerules.com/personal-project/phile-intro-video/>All About PhileCMS Video</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 07, 2014</span></span><div class=post-intro><p>All About PhileCMS Video<p><a title="Read All About PhileCMS Video" class=read-more href=https://ohdoylerules.com/personal-project/phile-intro-video/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Personal Project | OhDoyleRules</title><meta content="Personal Project | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Personal Project" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Personal Project" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The personal project category of the blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The personal project category of the blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The personal project category of the blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The personal project category of the blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Kube in Styl/Rework" href=https://ohdoylerules.com/personal-project/kube-in-stylrework/>Kube in Styl/Rework</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 19, 2013</span></span><div class=post-intro><p>Kube in Styl/Rework<p><a title="Read Kube in Styl/Rework" class=read-more href=https://ohdoylerules.com/personal-project/kube-in-stylrework/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="April 2013 Redesign!" href=https://ohdoylerules.com/personal-project/april-2013-redesign/>April 2013 Redesign!</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div class=post-intro><p>Another redesign. This one is completely by me, with a little help from the html5blank Wordpress template. I am using SVGs exclusively.<p><a title="Read April 2013 Redesign!" class=read-more href=https://ohdoylerules.com/personal-project/april-2013-redesign/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Assemble Starter" href=https://ohdoylerules.com/personal-project/assemble-starter/>Assemble Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 17, 2013</span></span><div class=post-intro><p>Assemble for Grunt.js Starter template<p><a title="Read Assemble Starter" class=read-more href=https://ohdoylerules.com/personal-project/assemble-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/lico-luvit-cms/ title=Lico>Lico</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2014</span></span><div class=post-intro><p>Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua<p><a title="Read Lico" class=read-more href=https://ohdoylerules.com/personal-project/lico-luvit-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Swipe.js Module" href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/>Pyro Swipe.js Module</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div class=post-intro><p>A module for Pyro CMS that wraps up the Swipe.js Module<p><a title="Read Pyro Swipe.js Module" class=read-more href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Markdown Logo Vector SVG" href=https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/>Markdown Logo Vector SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div class=post-intro><p>Markdown Logo Vector SVG<p><a title="Read Markdown Logo Vector SVG" class=read-more href=https://ohdoylerules.com/personal-project/markdown-logo-vector-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Github Markdown Field Type" href=https://ohdoylerules.com/personal-project/pyro-github-markdown/>Pyro Github Markdown Field Type</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>Pyro Github Markdown Field Type<p><a title="Read Pyro Github Markdown Field Type" class=read-more href=https://ohdoylerules.com/personal-project/pyro-github-markdown/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS Module Generator" href=https://ohdoylerules.com/personal-project/pyro-module-generator/>PyroCMS Module Generator</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div class=post-intro><p>PyroCMS Module Generator that can generate modules for pyrocms<p><a title="Read PyroCMS Module Generator" class=read-more href=https://ohdoylerules.com/personal-project/pyro-module-generator/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PHP WebSocket Chat" href=https://ohdoylerules.com/personal-project/php-websocket-chat/>PHP WebSocket Chat</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 08, 2014</span></span><div class=post-intro><p>PHP websocket chat application example<p><a title="Read PHP WebSocket Chat" class=read-more href=https://ohdoylerules.com/personal-project/php-websocket-chat/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Switching to SVG on Grey Nimbus" href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/>Switching to SVG on Grey Nimbus</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 14, 2013</span></span><div class=post-intro><p>Switching to SVG for all images on my website<p><a title="Read Switching to SVG on Grey Nimbus" class=read-more href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Phile CMS" href=https://ohdoylerules.com/personal-project/phile-cms/>Phile CMS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2013</span></span><div class=post-intro><p>Phile is flat-file CMS based on Pico<p><a title="Read Phile CMS" class=read-more href=https://ohdoylerules.com/personal-project/phile-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro List Field" href=https://ohdoylerules.com/personal-project/pyro-list-field/>Pyro List Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 23, 2013</span></span><div class=post-intro><p>A field for Pyro CMS that allows the creation of Lists<p><a title="Read Pyro List Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-list-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Docracy SVG logo" href=https://ohdoylerules.com/personal-project/docracy-logo-svg/>Docracy SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2013</span></span><div class=post-intro><p>Docracy logo in vector svg<p><a title="Read Docracy SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/docracy-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CrunchBase SVG logo" href=https://ohdoylerules.com/personal-project/crunchbase-svg/>CrunchBase SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div class=post-intro><p>CrunchBase SVG logo<p><a title="Read CrunchBase SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/crunchbase-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Git Website Workflow" href=https://ohdoylerules.com/personal-project/git-website-workflow/>Git Website Workflow</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 13, 2013</span></span><div class=post-intro><p>Git Website Workflow<p><a title="Read Git Website Workflow" class=read-more href=https://ohdoylerules.com/personal-project/git-website-workflow/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Twitter Widget" href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/>Pyro Twitter Widget</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 08, 2013</span></span><div class=post-intro><p>Pyro Twitter Widget<p><a title="Read Pyro Twitter Widget" class=read-more href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Github Wiki To HTML" href=https://ohdoylerules.com/personal-project/github-wiki-to-html/>Github Wiki To HTML</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 17, 2013</span></span><div class=post-intro><p>Github Wiki To HTML<p><a title="Read Github Wiki To HTML" class=read-more href=https://ohdoylerules.com/personal-project/github-wiki-to-html/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico-Useragent Plugin" href=https://ohdoylerules.com/personal-project/pico-useragent/>Pico-Useragent Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div class=post-intro><p>A plugin for pico that allows you to list the useragent<p><a title="Read Pico-Useragent Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-useragent/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Startup Canada SVG logos" href=https://ohdoylerules.com/personal-project/startup-canada-svg/>Startup Canada SVG logos</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div class=post-intro><p>All the Startup Canada SVG logos<p><a title="Read Startup Canada SVG logos" class=read-more href=https://ohdoylerules.com/personal-project/startup-canada-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/kube-node-express/ title=Kube-Node-Express>Kube-Node-Express</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2012</span></span><div class=post-intro><p>Kube-Node-Express<p><a title="Read Kube-Node-Express" class=read-more href=https://ohdoylerules.com/personal-project/kube-node-express/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Phalcon Micro App Starter" href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/>Phalcon Micro App Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 20, 2015</span></span><div class=post-intro><p>A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class<p><a title="Read Phalcon Micro App Starter" class=read-more href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Canadian Provinces Field" href=https://ohdoylerules.com/personal-project/canadian-provinces-field/>Canadian Provinces Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 15, 2013</span></span><div class=post-intro><p>Canadian Provinces Field<p><a title="Read Canadian Provinces Field" class=read-more href=https://ohdoylerules.com/personal-project/canadian-provinces-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The Alternative Cms" href=https://ohdoylerules.com/personal-project/the-alternative-cms/>The Alternative Cms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 26, 2014</span></span><div class=post-intro><p>Presentation for The Alternative Cms<p><a title="Read The Alternative Cms" class=read-more href=https://ohdoylerules.com/personal-project/the-alternative-cms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grunt Highlight Plugin" href=https://ohdoylerules.com/personal-project/grunt-highlight/>Grunt Highlight Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 25, 2013</span></span><div class=post-intro><p>Grunt task for running Highlight.js over files or blocks of code<p><a title="Read Grunt Highlight Plugin" class=read-more href=https://ohdoylerules.com/personal-project/grunt-highlight/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Blurb Field" href=https://ohdoylerules.com/personal-project/pyro-blurb-field/>Pyro Blurb Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2013</span></span><div class=post-intro><p>A field for Pyrocms that allows you to create little blurbs in a list<p><a title="Read Pyro Blurb Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-blurb-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Binder" href=https://ohdoylerules.com/personal-project/simple-binder/>Simple Binder</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2014</span></span><div class=post-intro><p>simplebinder is a zero dependency one-way databinder for javascript<p><a title="Read Simple Binder" class=read-more href=https://ohdoylerules.com/personal-project/simple-binder/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico Get By Filename Plugin" href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/>Pico Get By Filename Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2013</span></span><div class=post-intro><p>I wrote another small plugin for PicoCMS that actually lets you load files based on the filename<p><a title="Read Pico Get By Filename Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/rework-math/ title=rework-math>rework-math</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>I created a plugin for rework that allows you to do simple math<p><a title="Read rework-math" class=read-more href=https://ohdoylerules.com/personal-project/rework-math/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Clean CSS in Chrome Apps Office Hours" href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/>Clean CSS in Chrome Apps Office Hours</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 19, 2012</span></span><div class=post-intro><p>So my chrome app Clean CSS made it onto one of the Chrome Apps Office Hours.<p><a title="Read Clean CSS in Chrome Apps Office Hours" class=read-more href=https://ohdoylerules.com/personal-project/clean-css-in-office-hours/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Sublime Node Snippets" href=https://ohdoylerules.com/personal-project/sublime-node-snippets/>Sublime Node Snippets</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 25, 2014</span></span><div class=post-intro><p>Sublime Text snippets for node, async, underscore, and lodash<p><a title="Read Sublime Node Snippets" class=read-more href=https://ohdoylerules.com/personal-project/sublime-node-snippets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS Module Generator 2.0" href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/>PyroCMS Module Generator 2.0</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 16, 2014</span></span><div class=post-intro><p>The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up<p><a title="Read PyroCMS Module Generator 2.0" class=read-more href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="NPM logo SVG" href=https://ohdoylerules.com/personal-project/npm-logo-svg/>NPM logo SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 07, 2013</span></span><div class=post-intro><p>The NPM logo as a SVG<p><a title="Read NPM logo SVG" class=read-more href=https://ohdoylerules.com/personal-project/npm-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vim Vector Logo" href=https://ohdoylerules.com/personal-project/vim-svg/>Vim Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 04, 2014</span></span>  <span class=post-date>🕙  <span>Updated: June 17, 2014</span></span><div class=post-intro><p>The Vim logo in a vector SVG format. Also includes a ICNS file for OSX.<p><a title="Read Vim Vector Logo" class=read-more href=https://ohdoylerules.com/personal-project/vim-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Clean CSS Updated" href=https://ohdoylerules.com/personal-project/clean-css-updated/>Clean CSS Updated</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2013</span></span><div class=post-intro><p>Clean CSS Chrome app Updated<p><a title="Read Clean CSS Updated" class=read-more href=https://ohdoylerules.com/personal-project/clean-css-updated/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Image Select Field" href=https://ohdoylerules.com/personal-project/pyro-image-select-field/>Pyro Image Select Field</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div class=post-intro><p>A field for Pyro CMS that allows you to select images from your uploads<p><a title="Read Pyro Image Select Field" class=read-more href=https://ohdoylerules.com/personal-project/pyro-image-select-field/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pico Slider Plugin" href=https://ohdoylerules.com/personal-project/pico-slider-plugin/>Pico Slider Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 17, 2013</span></span><div class=post-intro><p>a plugin for Pico that allows you to create a Slider<p><a title="Read Pico Slider Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-slider-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grunt Sundown" href=https://ohdoylerules.com/personal-project/grunt-sundown/>Grunt Sundown</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 08, 2013</span></span><div class=post-intro><p>Grunt Sundown<p><a title="Read Grunt Sundown" class=read-more href=https://ohdoylerules.com/personal-project/grunt-sundown/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/rework-shade/ title=rework-shade>rework-shade</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>A package for rework that allows a shade function<p><a title="Read rework-shade" class=read-more href=https://ohdoylerules.com/personal-project/rework-shade/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS PageWidgets Field Type" href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/>PyroCMS PageWidgets Field Type</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 05, 2013</span></span><div class=post-intro><p>PyroCMS PageWidgets Field Type<p><a title="Read PyroCMS PageWidgets Field Type" class=read-more href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Groupon SVG logo" href=https://ohdoylerules.com/personal-project/groupon-green-logo-svg/>Groupon SVG logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 24, 2014</span></span><div class=post-intro><p>groupon logo in vector svg<p><a title="Read Groupon SVG logo" class=read-more href=https://ohdoylerules.com/personal-project/groupon-green-logo-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/personal-project/jquery-doodal-js/ title=jQuery-doodal-js>jQuery-doodal-js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 09, 2013</span></span><div class=post-intro><p>jQuery-doodal-js<p><a title="Read jQuery-doodal-js" class=read-more href=https://ohdoylerules.com/personal-project/jquery-doodal-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="NudeProject - a starting point for simple websites" href=https://ohdoylerules.com/personal-project/nudeproject/>NudeProject - a starting point for simple websites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2013</span></span><div class=post-intro><p>NudeProject - a starting point for simple websites<p><a title="Read NudeProject - a starting point for simple websites" class=read-more href=https://ohdoylerules.com/personal-project/nudeproject/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Disqus Comments" href=https://ohdoylerules.com/personal-project/disqus-comments/>Disqus Comments</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 27, 2013</span></span><div class=post-intro><p>Adding Disqus Comments to the website<p><a title="Read Disqus Comments" class=read-more href=https://ohdoylerules.com/personal-project/disqus-comments/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Google Drive Flat SVG Logo" href=https://ohdoylerules.com/personal-project/google-drive-svg-logo/>Google Drive Flat SVG Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 01, 2013</span></span><div class=post-intro><p>Google Drive Flat SVG Logo<p><a title="Read Google Drive Flat SVG Logo" class=read-more href=https://ohdoylerules.com/personal-project/google-drive-svg-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Zepto Drag & Swap" href=https://ohdoylerules.com/personal-project/zepto-drag-swap/>Zepto Drag & Swap</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div class=post-intro><p>Create a drag and drop list with Zepto<p><a title="Read Zepto Drag & Swap" class=read-more href=https://ohdoylerules.com/personal-project/zepto-drag-swap/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Pyro Image Widget" href=https://ohdoylerules.com/personal-project/pyro-image-widget/>Pyro Image Widget</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div class=post-intro><p>A widget for Pyro CMS for creating Image sections<p><a title="Read Pyro Image Widget" class=read-more href=https://ohdoylerules.com/personal-project/pyro-image-widget/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kaenon Vector Logo" href=https://ohdoylerules.com/personal-project/kaenon-logo/>Kaenon Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 10, 2014</span></span><div class=post-intro><p>The Kaenon logo in a vector SVG format<p><a title="Read Kaenon Vector Logo" class=read-more href=https://ohdoylerules.com/personal-project/kaenon-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Koding Interview" href=https://ohdoylerules.com/personal-project/koding-interview/>Koding Interview</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2014</span></span><div class=post-intro><p>James Doyle interview by the developer social network Koding<p><a title="Read Koding Interview" class=read-more href=https://ohdoylerules.com/personal-project/koding-interview/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PyroCMS UA Sniffer Plugin" href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/>PyroCMS UA Sniffer Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div class=post-intro><p>A plugin for PyroCMS that allows UA Sniffing<p><a title="Read PyroCMS UA Sniffer Plugin" class=read-more href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Minimal Raspberry Pi OS" href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/>Minimal Raspberry Pi OS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2015</span></span>  <span class=post-date>🕙  <span>Updated: March 20, 2015</span></span><div class=post-intro><p>Setup and improve the Moebius OS for the Raspberry Pi<p><a title="Read Minimal Raspberry Pi OS" class=read-more href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="pico-download plugin" href=https://ohdoylerules.com/personal-project/pico-download-plugin/>pico-download plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2013</span></span><div class=post-intro><p>I created a plugin to force files to download in PicoCMS<p><a title="Read pico-download plugin" class=read-more href=https://ohdoylerules.com/personal-project/pico-download-plugin/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Chrome Reverse Geocode App" href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/>Chrome Reverse Geocode App</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 08, 2014</span></span><div class=post-intro><p>Chrome Reverse Geocode App<p><a title="Read Chrome Reverse Geocode App" class=read-more href=https://ohdoylerules.com/personal-project/chrome-reverse-geocode/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="All About PhileCMS Video" href=https://ohdoylerules.com/personal-project/phile-intro-video/>All About PhileCMS Video</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 07, 2014</span></span><div class=post-intro><p>All About PhileCMS Video<p><a title="Read All About PhileCMS Video" class=read-more href=https://ohdoylerules.com/personal-project/phile-intro-video/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Atom Monokai Dark" href=https://ohdoylerules.com/personal-project/atom-monokai-dark/>Atom Monokai Dark</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 27, 2014</span></span><div class=post-intro><p>Dark Monokai theme for the Github Atom editor<p><a title="Read Atom Monokai Dark" class=read-more href=https://ohdoylerules.com/personal-project/atom-monokai-dark/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/jquery-doodal-js/index.html b/docs/personal-project/jquery-doodal-js/index.html
index 49dd558..d8a2589 100644
--- a/docs/personal-project/jquery-doodal-js/index.html
+++ b/docs/personal-project/jquery-doodal-js/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>jQuery-doodal-js | OhDoyleRules</title><meta content="jQuery-doodal-js | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=jQuery-doodal-js itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/jquery-doodal-js/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/jquery-doodal-js/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=jQuery-doodal-js name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content=jQuery-doodal-js name=description><meta content=jQuery-doodal-js itemprop=description><meta content=jQuery-doodal-js property=og:description><meta content=jQuery-doodal-js name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="jQuery-doodal-js | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="jquery, plugin, modal, events, trigger, css3, transitions, animations, alert, confirm" itemprop=keywords><meta content="jquery, plugin, modal, events, trigger, css3, transitions, animations, alert, confirm" property=article:tag><meta content="jquery, plugin, modal, events, trigger, css3, transitions, animations, alert, confirm" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/jquery-doodal-js/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">jQuery-doodal-js</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 09, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>jQuery.doodal.js is a very simplistic modal plugin for jQuery. It has custom events, allows stacking, and is powered by CSS transitions<p><a href=http://james2doyle.github.io/jquery.doodal.js/>See the demo</a><h3 id=usage>Usage</h3><p>Instatiate a new doodal.<pre style=background:#2b303b;color:#c0c5ce><code><span>$('.doodal').doodal({
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>jQuery-doodal-js | OhDoyleRules</title><meta content="jQuery-doodal-js | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=jQuery-doodal-js itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/jquery-doodal-js/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/jquery-doodal-js/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=jQuery-doodal-js name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content=jQuery-doodal-js name=description><meta content=jQuery-doodal-js itemprop=description><meta content=jQuery-doodal-js property=og:description><meta content=jQuery-doodal-js name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="jQuery-doodal-js | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="jquery, plugin, modal, events, trigger, css3, transitions, animations, alert, confirm" itemprop=keywords><meta content="jquery, plugin, modal, events, trigger, css3, transitions, animations, alert, confirm" property=article:tag><meta content="jquery, plugin, modal, events, trigger, css3, transitions, animations, alert, confirm" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/jquery-doodal-js/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">jQuery-doodal-js</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 09, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>jQuery.doodal.js is a very simplistic modal plugin for jQuery. It has custom events, allows stacking, and is powered by CSS transitions<p><a rel="noopener nofollow noreferrer" href=http://james2doyle.github.io/jquery.doodal.js/ target=_blank>See the demo</a><h3 id=usage>Usage</h3><p>Instatiate a new doodal.<pre style=background:#2b303b;color:#c0c5ce><code><span>$('.doodal').doodal({
 </span><span>  type: 'modal',
 </span><span>  closeclass: '.doodal-close',
 </span><span>  trueclass: '.doodal-true',
@@ -6,4 +6,4 @@
 </span><span>  showclass: 'showing'
 </span><span>});
 </span></code></pre><p>Those are all the default options so in this specific example I am not actually overwriting anything.<p>Now trigger an <code>open</code> to see it:<pre style=background:#2b303b;color:#c0c5ce><code><span>$('#doodal1').trigger('open');
-</span></code></pre><h3 id=custom-events>Custom Events</h3><ul><li><em>open</em>: - when the modal starts to open<li><em>afteropen</em>: - after the animation is over and it is open<li><em>ontrue</em>: - for confirms yes button<li><em>onfalse</em>: - for confirms no button<li><em>close</em>: - when the close is clicked<li><em>afterclose</em>: - after the animation is over and it is hidden</ul><p>You can also view the <a href=https://github.com/james2doyle/jquery.doodal.js>project on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><h3 id=custom-events>Custom Events</h3><ul><li><em>open</em>: - when the modal starts to open<li><em>afteropen</em>: - after the animation is over and it is open<li><em>ontrue</em>: - for confirms yes button<li><em>onfalse</em>: - for confirms no button<li><em>close</em>: - when the close is clicked<li><em>afterclose</em>: - after the animation is over and it is hidden</ul><p>You can also view the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/jquery.doodal.js target=_blank>project on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/koding-interview/index.html b/docs/personal-project/koding-interview/index.html
index 055774e..9b5de3a 100644
--- a/docs/personal-project/koding-interview/index.html
+++ b/docs/personal-project/koding-interview/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Koding Interview | OhDoyleRules</title><meta content="Koding Interview | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Koding Interview" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/koding-interview/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/koding-interview/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Koding Interview" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="James Doyle interview by the developer social network Koding" name=description><meta content="James Doyle interview by the developer social network Koding" itemprop=description><meta content="James Doyle interview by the developer social network Koding" property=og:description><meta content="James Doyle interview by the developer social network Koding" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Koding Interview | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="koding, interview, warpaint media, phile, cms, php, javascript, github, james2doyle" itemprop=keywords><meta content="koding, interview, warpaint media, phile, cms, php, javascript, github, james2doyle" property=article:tag><meta content="koding, interview, warpaint media, phile, cms, php, javascript, github, james2doyle" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/koding-interview/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Koding Interview</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>A few months back I was interviewed by the developer socila network Koding.<p>The initiative was for them to showcase some of the people using their network to build their skill and circle of friends. It is a really cool social network that has been gaining a lot of traction lately.<p>Here is <a href=http://stories.koding.com/story/james-doyle/>the link to the interview</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Koding Interview | OhDoyleRules</title><meta content="Koding Interview | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Koding Interview" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/koding-interview/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/koding-interview/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Koding Interview" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="James Doyle interview by the developer social network Koding" name=description><meta content="James Doyle interview by the developer social network Koding" itemprop=description><meta content="James Doyle interview by the developer social network Koding" property=og:description><meta content="James Doyle interview by the developer social network Koding" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Koding Interview | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="koding, interview, warpaint media, phile, cms, php, javascript, github, james2doyle" itemprop=keywords><meta content="koding, interview, warpaint media, phile, cms, php, javascript, github, james2doyle" property=article:tag><meta content="koding, interview, warpaint media, phile, cms, php, javascript, github, james2doyle" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/koding-interview/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Koding Interview</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>A few months back I was interviewed by the developer socila network Koding.<p>The initiative was for them to showcase some of the people using their network to build their skill and circle of friends. It is a really cool social network that has been gaining a lot of traction lately.<p>Here is <a rel="noopener nofollow noreferrer" href=http://stories.koding.com/story/james-doyle/ target=_blank>the link to the interview</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/kube-in-stylrework/index.html b/docs/personal-project/kube-in-stylrework/index.html
index 8870fc0..116e28b 100644
--- a/docs/personal-project/kube-in-stylrework/index.html
+++ b/docs/personal-project/kube-in-stylrework/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Kube in Styl/Rework | OhDoyleRules</title><meta content="Kube in Styl/Rework | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Kube in Styl/Rework" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/kube-in-stylrework/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/kube-in-stylrework/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Kube in Styl/Rework" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Kube in Styl/Rework" name=description><meta content="Kube in Styl/Rework" itemprop=description><meta content="Kube in Styl/Rework" property=og:description><meta content="Kube in Styl/Rework" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Kube in Styl/Rework | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="kube, css, styl, rework, stylus, less, imperavi" itemprop=keywords><meta content="kube, css, styl, rework, stylus, less, imperavi" property=article:tag><meta content="kube, css, styl, rework, stylus, less, imperavi" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/kube-in-stylrework/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Kube in Styl/Rework</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 19, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I finally finished the conversion of the <a href=http://imperavi.com/kube/>Kube CSS Framework</a>.<p>The original is written in <a title="LESSCSS Homepage" href=http://lesscss.org/>LESS</a> and I have rewrote it to work with <a href=https://github.com/visionmedia/styl title=visionmedia/styl>Styl</a> and <a href=https://github.com/visionmedia/rework title=visionmedia/rework>Rework</a>.<p><a href=https://github.com/james2doyle/kube-styl title=james2doyle/kube-styl>Here is the github repo</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Kube in Styl/Rework | OhDoyleRules</title><meta content="Kube in Styl/Rework | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Kube in Styl/Rework" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/kube-in-stylrework/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/kube-in-stylrework/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Kube in Styl/Rework" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Kube in Styl/Rework" name=description><meta content="Kube in Styl/Rework" itemprop=description><meta content="Kube in Styl/Rework" property=og:description><meta content="Kube in Styl/Rework" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Kube in Styl/Rework | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="kube, css, styl, rework, stylus, less, imperavi" itemprop=keywords><meta content="kube, css, styl, rework, stylus, less, imperavi" property=article:tag><meta content="kube, css, styl, rework, stylus, less, imperavi" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/kube-in-stylrework/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Kube in Styl/Rework</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 19, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I finally finished the conversion of the <a rel="noopener nofollow noreferrer" href=http://imperavi.com/kube/ target=_blank>Kube CSS Framework</a>.<p>The original is written in <a rel="noopener nofollow noreferrer" title="LESSCSS Homepage" href=http://lesscss.org/ target=_blank>LESS</a> and I have rewrote it to work with <a rel="noopener nofollow noreferrer" href=https://github.com/visionmedia/styl target=_blank title=visionmedia/styl>Styl</a> and <a rel="noopener nofollow noreferrer" href=https://github.com/visionmedia/rework target=_blank title=visionmedia/rework>Rework</a>.<p><a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/kube-styl target=_blank title=james2doyle/kube-styl>Here is the github repo</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/kube-node-express/index.html b/docs/personal-project/kube-node-express/index.html
index 7c9e871..5644f9d 100644
--- a/docs/personal-project/kube-node-express/index.html
+++ b/docs/personal-project/kube-node-express/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Kube-Node-Express | OhDoyleRules</title><meta content="Kube-Node-Express | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Kube-Node-Express itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/kube-node-express/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/kube-node-express/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Kube-Node-Express name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content=Kube-Node-Express name=description><meta content=Kube-Node-Express itemprop=description><meta content=Kube-Node-Express property=og:description><meta content=Kube-Node-Express name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Kube-Node-Express | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="kube, node, express, css, framework, middleware, stylus, jade" itemprop=keywords><meta content="kube, node, express, css, framework, middleware, stylus, jade" property=article:tag><meta content="kube, node, express, css, framework, middleware, stylus, jade" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/kube-node-express/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Kube-Node-Express</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I have released my first node.js-based public repo! It is called <a href=https://github.com/james2doyle/kube-node-express title=Kube-Node-Express>Kube-Node-Express</a>.</p><img alt="Kube CSS Framework" src=/images/Screen-Shot-2012-10-20-at-3.46.33-PM11.png><p>This is based off of the <a title="Kube CSS Framework" href=http://imperavi.com/kube/>Kube CSS Framework by Imperavi</a>. It uses the <a href=http://expressjs.com/ title=expressjs>express</a> framework for node. This was inspired by a similar project I saw that was <a title="node boilerplate" href=https://github.com/robrighter/node-boilerplate>based on the HTML5 Boilerplate</a>. I will probably end up stealing more ideas from that project too.<h4 id=disclaimer>disclaimer</h4><p>I did not create any of these frameworks, I just combined them all together.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Kube-Node-Express | OhDoyleRules</title><meta content="Kube-Node-Express | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Kube-Node-Express itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/kube-node-express/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/kube-node-express/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Kube-Node-Express name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content=Kube-Node-Express name=description><meta content=Kube-Node-Express itemprop=description><meta content=Kube-Node-Express property=og:description><meta content=Kube-Node-Express name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Kube-Node-Express | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="kube, node, express, css, framework, middleware, stylus, jade" itemprop=keywords><meta content="kube, node, express, css, framework, middleware, stylus, jade" property=article:tag><meta content="kube, node, express, css, framework, middleware, stylus, jade" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/kube-node-express/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Kube-Node-Express</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I have released my first node.js-based public repo! It is called <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/kube-node-express target=_blank title=Kube-Node-Express>Kube-Node-Express</a>.</p><img alt="Kube CSS Framework" src=/images/Screen-Shot-2012-10-20-at-3.46.33-PM11.png><p>This is based off of the <a rel="noopener nofollow noreferrer" title="Kube CSS Framework" href=http://imperavi.com/kube/ target=_blank>Kube CSS Framework by Imperavi</a>. It uses the <a rel="noopener nofollow noreferrer" href=http://expressjs.com/ target=_blank title=expressjs>express</a> framework for node. This was inspired by a similar project I saw that was <a rel="noopener nofollow noreferrer" title="node boilerplate" href=https://github.com/robrighter/node-boilerplate target=_blank>based on the HTML5 Boilerplate</a>. I will probably end up stealing more ideas from that project too.<h4 id=disclaimer>disclaimer</h4><p>I did not create any of these frameworks, I just combined them all together.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/lico-luvit-cms/index.html b/docs/personal-project/lico-luvit-cms/index.html
index e76cd3d..0b85572 100644
--- a/docs/personal-project/lico-luvit-cms/index.html
+++ b/docs/personal-project/lico-luvit-cms/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Lico | OhDoyleRules</title><meta content="Lico | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Lico itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/lico-luvit-cms/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/lico-luvit-cms/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Lico name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua" name=description><meta content="Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua" itemprop=description><meta content="Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua" property=og:description><meta content="Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Lico | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="lico, lua, luvit, luajit, markdown, flat, file, cms, sltluv, pico, php, template, node, joyent, nodejs, libuv" itemprop=keywords><meta content="lico, lua, luvit, luajit, markdown, flat, file, cms, sltluv, pico, php, template, node, joyent, nodejs, libuv" property=article:tag><meta content="lico, lua, luvit, luajit, markdown, flat, file, cms, sltluv, pico, php, template, node, joyent, nodejs, libuv" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/lico-luvit-cms/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Lico</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I have re-created Pico (<a href=https://github.com/picocms/Pico>github</a> or <a href=http://picocms.org/>homepage</a>) using the awesome <a href=https://github.com/luvit/luvit>Luvit</a> framework. Luvit is a <a href=http://luajit.org/>LuaJIT</a> wrapper for <a href=https://github.com/joyent/libuv>libuv</a>, of <a href=http://nodejs.org/>node.js</a> fame. It is called <a title="Lico On Github" href=https://github.com/james2doyle/Lico>Lico</a>!<h3 id=what-is-lico>What is Lico?</h3><p>Pico says, <em>"Pico is a stupidly simple, blazing fast, flat file CMS"</em>. Lico aims for the same thing. There is a very close parity with Pico even though this is very early.<p>I used the static server from the Luvit examples as a base and went from there.<h3 id=how-to-create-content>How to create content?</h3><p>You can understand the basics by looking at the included content directory and just running the <code>server.lua</code> file and hitting the index page.<p>If you need more information you can see the <a href=http://picocms.org/docs.html>Pico docs</a> and understand what is happening and how it works.<h3 id=what-features-are-implemented>What features are implemented?</h3><ul><li>Markdown Parsing using <a href=https://github.com/mneudert/luvit-markdown>luvit-markdown</a> -- <em>looking to switch to <a href=https://github.com/torch/sundown-ffi/tree/hoedown>Hoedown</a></em><li>HTML Templating (using my own modified version of <a href=https://github.com/james2doyle/sltluv>SLT2</a><li>Flexible Meta schema (Uses HTML comments instead of PHP style)</ul><h3 id=whats-missing>Whats missing?</h3><p>Plugins. Although with the native of the <a href=https://github.com/luvit/luvit/blob/master/examples/event-emitters.lua>Event Emitter</a> inside Luvit, this should be rather easy to re-create.<p>You can use SLTLuv to add new functions and features to your templates. You can see the <code>modules/slt-extensions.lua</code> on how to add extensions to the templates. I also added in some examples in the <code>default/themes/index.html</code>, if you want to see how they work.<p>Check out the <a href=https://github.com/henix/slt2#example>slt2 examples</a> to see how to write proper templates.<p>The markdown engine is rather simple. There is no fenced code blocks, and sometimes it will wrap uncommon HTML tags with <code>&LTp></code> tags (I tried using a <code>figure</code> element and it was wrapped in p tags). I want switch to <a href=https://github.com/torch/sundown-ffi/tree/hoedown>Hoedown</a> soon.<h3 id=performance>Performance</h3><p>Well, this is very interesting. Running the default setup for Pico and Lico, reveals Lico is twice as fast in at the browser level.<p>Using the Chrome Devtools Network Panel, I measured the index page of each system. I consistently got around 120ms for each request. For Pico, the results were varied quite a bit. They ranged from 200ms to as high as 500ms, but never going under 200ms.<p>There are a lot of factors here, but the default Pico has 3 pages and my Lico testing suite (same one as this repo) had 6 pages.<p>I did some other testing against my other project, <a href=https://github.com/PhileCMS/Phile#performance-with-20-pages>PhileCMS</a>. You can see that Pico doesn't handle large amounts of pages very well.<h3 id=there-are-issues>There are issues!</h3><p>Yeah I bet. I am not a Lua developer. I made this over a week-long period trying to learn Lua. If you notice some funky stuff or clean n00b issues, please create issues or pull requests.<h3 id=repo>Repo?</h3><p>Here is the <a href=https://github.com/james2doyle/Lico>link to the Github repository</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Lico | OhDoyleRules</title><meta content="Lico | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Lico itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/lico-luvit-cms/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/lico-luvit-cms/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Lico name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua" name=description><meta content="Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua" itemprop=description><meta content="Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua" property=og:description><meta content="Lico is a re-creation of the PicoCMS for PHP, but written for Luvit for Lua" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Lico | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="lico, lua, luvit, luajit, markdown, flat, file, cms, sltluv, pico, php, template, node, joyent, nodejs, libuv" itemprop=keywords><meta content="lico, lua, luvit, luajit, markdown, flat, file, cms, sltluv, pico, php, template, node, joyent, nodejs, libuv" property=article:tag><meta content="lico, lua, luvit, luajit, markdown, flat, file, cms, sltluv, pico, php, template, node, joyent, nodejs, libuv" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/lico-luvit-cms/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Lico</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I have re-created Pico (<a rel="noopener nofollow noreferrer" href=https://github.com/picocms/Pico target=_blank>github</a> or <a rel="noopener nofollow noreferrer" href=http://picocms.org/ target=_blank>homepage</a>) using the awesome <a rel="noopener nofollow noreferrer" href=https://github.com/luvit/luvit target=_blank>Luvit</a> framework. Luvit is a <a rel="noopener nofollow noreferrer" href=http://luajit.org/ target=_blank>LuaJIT</a> wrapper for <a rel="noopener nofollow noreferrer" href=https://github.com/joyent/libuv target=_blank>libuv</a>, of <a rel="noopener nofollow noreferrer" href=http://nodejs.org/ target=_blank>node.js</a> fame. It is called <a rel="noopener nofollow noreferrer" title="Lico On Github" href=https://github.com/james2doyle/Lico target=_blank>Lico</a>!<h3 id=what-is-lico>What is Lico?</h3><p>Pico says, <em>"Pico is a stupidly simple, blazing fast, flat file CMS"</em>. Lico aims for the same thing. There is a very close parity with Pico even though this is very early.<p>I used the static server from the Luvit examples as a base and went from there.<h3 id=how-to-create-content>How to create content?</h3><p>You can understand the basics by looking at the included content directory and just running the <code>server.lua</code> file and hitting the index page.<p>If you need more information you can see the <a rel="noopener nofollow noreferrer" href=http://picocms.org/docs.html target=_blank>Pico docs</a> and understand what is happening and how it works.<h3 id=what-features-are-implemented>What features are implemented?</h3><ul><li>Markdown Parsing using <a rel="noopener nofollow noreferrer" href=https://github.com/mneudert/luvit-markdown target=_blank>luvit-markdown</a> -- <em>looking to switch to <a rel="noopener nofollow noreferrer" href=https://github.com/torch/sundown-ffi/tree/hoedown target=_blank>Hoedown</a></em><li>HTML Templating (using my own modified version of <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/sltluv target=_blank>SLT2</a><li>Flexible Meta schema (Uses HTML comments instead of PHP style)</ul><h3 id=whats-missing>Whats missing?</h3><p>Plugins. Although with the native of the <a rel="noopener nofollow noreferrer" href=https://github.com/luvit/luvit/blob/master/examples/event-emitters.lua target=_blank>Event Emitter</a> inside Luvit, this should be rather easy to re-create.<p>You can use SLTLuv to add new functions and features to your templates. You can see the <code>modules/slt-extensions.lua</code> on how to add extensions to the templates. I also added in some examples in the <code>default/themes/index.html</code>, if you want to see how they work.<p>Check out the <a rel="noopener nofollow noreferrer" href=https://github.com/henix/slt2#example target=_blank>slt2 examples</a> to see how to write proper templates.<p>The markdown engine is rather simple. There is no fenced code blocks, and sometimes it will wrap uncommon HTML tags with <code>&LTp></code> tags (I tried using a <code>figure</code> element and it was wrapped in p tags). I want switch to <a rel="noopener nofollow noreferrer" href=https://github.com/torch/sundown-ffi/tree/hoedown target=_blank>Hoedown</a> soon.<h3 id=performance>Performance</h3><p>Well, this is very interesting. Running the default setup for Pico and Lico, reveals Lico is twice as fast in at the browser level.<p>Using the Chrome Devtools Network Panel, I measured the index page of each system. I consistently got around 120ms for each request. For Pico, the results were varied quite a bit. They ranged from 200ms to as high as 500ms, but never going under 200ms.<p>There are a lot of factors here, but the default Pico has 3 pages and my Lico testing suite (same one as this repo) had 6 pages.<p>I did some other testing against my other project, <a rel="noopener nofollow noreferrer" href=https://github.com/PhileCMS/Phile#performance-with-20-pages target=_blank>PhileCMS</a>. You can see that Pico doesn't handle large amounts of pages very well.<h3 id=there-are-issues>There are issues!</h3><p>Yeah I bet. I am not a Lua developer. I made this over a week-long period trying to learn Lua. If you notice some funky stuff or clean n00b issues, please create issues or pull requests.<h3 id=repo>Repo?</h3><p>Here is the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/Lico target=_blank>link to the Github repository</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/minimal-raspberry-pi-os/index.html b/docs/personal-project/minimal-raspberry-pi-os/index.html
index b3ee644..ae74e51 100644
--- a/docs/personal-project/minimal-raspberry-pi-os/index.html
+++ b/docs/personal-project/minimal-raspberry-pi-os/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Minimal Raspberry Pi OS | OhDoyleRules</title><meta content="Minimal Raspberry Pi OS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Minimal Raspberry Pi OS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Minimal Raspberry Pi OS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Setup and improve the Moebius OS for the Raspberry Pi" name=description><meta content="Setup and improve the Moebius OS for the Raspberry Pi" itemprop=description><meta content="Setup and improve the Moebius OS for the Raspberry Pi" property=og:description><meta content="Setup and improve the Moebius OS for the Raspberry Pi" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Minimal Raspberry Pi OS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content=2015-03-20 itemprop=dateModified><meta content="Moebius, debian, linux, raspberry, pi, os, operating system, minimal, small, tiny" itemprop=keywords><meta content="Moebius, debian, linux, raspberry, pi, os, operating system, minimal, small, tiny" property=article:tag><meta content="Moebius, debian, linux, raspberry, pi, os, operating system, minimal, small, tiny" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Minimal Raspberry Pi OS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2015</span></span>  <span class=post-date>🕙  <span>Updated: March 20, 2015</span></span><div itemprop="ArticleBody text" class=main-content><h2 id=introduction>Introduction</h2><p>I have had a <a href=http://www.raspberrypi.org/products/model-b/>Raspberry Pi B+</a> for a while now, and I was looking to setup a very minimal Linux OS. I am sure this would work fine with the Pi 2.<p>Although the other <a href=http://www.raspberrypi.org/downloads/>Raspberry Pi OSs</a> are great, a lot of them are too feature-full (read bloated) and have a packaged GUI that I would never use. Therefore, I wanted to install something much more <em>naked</em> than the ones on the Raspberry Pi website.<p>Enter, <a href=http://sourceforge.net/projects/moebiuslinux/>Moebius</a>. A few words from the Moebius site:<blockquote><p>[Moebius] is a Raspberry Pi armhf Debian based distribution targeted to have a minimal footprint. Size, speed and optimizations are main goals for this distro...</blockquote><p>With that said, the <em>unzipped <code>img</code></em> file is about <strong>110Mb</strong>. That is pretty small!<p>The other thing that Moebius does is remove the default Raspbian sources from <code>apt-get</code>. This means <em>you can't just download all the Rasbian packages</em> you want.<p>Moebius introduces the idea of containers. This isn't the same container technology like Docker. The "containers" are more like groups of packages. When installing a Moebius container, everything is installed in <code>/usr/bin</code> as if it came with the system.<p>I am going to provide a little walkthrough to get started with Moebius as a light-weight development environment, as well as how to install some other tools.<h3 id=initial-setup>Initial Setup</h3><p>First, visit the Moebius Sourceforge page and follow the instructions to <a href=http://sourceforge.net/projects/moebiuslinux/files/raspberry.stable/>download Moebius</a>. The basic instructions tell you how to copy the img to the SD Card. Once everything is setup and the Raspberry Pi has booted, complete the following:<ul><li>Either connect a screen and keyboard to the pi, or SSH to the pi<li>The default user is <code>root</code> and password is <code>moebius</code><li>When logged in, run <code>moebius</code></ul><div class=center><a title="Moebius command line app" href=/images/moebius-tool.png target=_blank><img alt="Moebius command line app" src=/images/moebius-tool.png></a><p>Moebius command line app</div><p>Moebius is the name of the OS, but also the name of a sweet little built-in command line tool to setup the rest of the Pi.<h4 id=ssh-niceness>SSH Niceness</h4><p><strong>Optional:</strong> Add your public key to Moebius in order to ssh without a password. This is not required, but it does make popping in and out of the Pi nice and quick. Plus, no password to remember!<p>Moebius does not come with <code>nano</code>! If you are not familiar with the <code>vi</code> tool, you should <a href=http://www.washington.edu/computing/unix/vi.html>use this site to learn some basics</a>.<p>Just create <code>~/.ssh</code> and then use <code>vi ~/.ssh/authorized_keys</code> to create a new file, then paste in your public key.<h3 id=dev-environment-setup>Dev Environment Setup</h3><ul><li>Run <code>moebius</code> and select <code>Basic/Initial Setup</code><li>Choose <code>Autoresize SD partition</code>, follow the instructions<li>Run <code>apt-get update</code><li>Run <code>apt-get install tzdata</code><li>Run <code>moebius</code> and select <code>Basic/Initial Setup</code>, choose <code>System timezone setup</code> and follow instructions<li>In <code>moebius</code>, select <code>Software Management</code> and select <code>Update containers list from repository</code><li>Do the same as above except choose <code>Install a container</code> from the <code>Software Management</code> menu<li>Select the <code>lang.gcc</code> container</ul><div class=center><a title="Moebius container command line app" href=/images/moebius-container-tool.png target=_blank><img alt="Moebius container command line app" src=/images/moebius-container-tool.png></a><p>Moebius container command line app</div><p><strong>You may get an error</strong> telling you to run <code>dpkg --configure -a</code>. If this happens, press any key to close the container installed and then run that command. When that completes, try to install the <code>lang.gcc</code> container again.<p>You may have to repeat the process above <em>multiple times</em>. I did it twice.<p>Once the container is installed, you should have <code>make</code> and <code>gcc</code>, and a bunch of other tools on your system.<hr><h3 id=install-git>Install git</h3><p><strong>You must install the lang.gcc container first</strong>. That container provides the necessary compilers we need in order to build git.<ul><li>Get the required development files with <code>apt-get install openssl-dev curl-dev libexpat-dev dropbear-dev coreutils coreutils-dev</code><li>Download the latest zip archive <code>wget https://github.com/git/git/archive/v2.3.3.zip</code><li>Run <code>unzip v2.3.3.zip</code> and then <code>cd v2.3.3/</code><li>Allow the scripts to run with <code>chmod +x *.sh && chmod +x check_bindir</code></ul><p>Following the official <a href=https://github.com/git/git/blob/master/INSTALL>INSTALL</a> in the git source code repository, we want to leave out some of the features in order to build without some of the required libraries.<p>To do this, we need to run:<pre style=background:#2b303b;color:#c0c5ce><code><span>make NO_PERL=YesPlease NO_TCLTK=YesPlease NO_GETTEXT=YesPlease prefix=/usr install
-</span></code></pre><p>This will take a while to build, so <em>grab a coffee or a beer</em>.<p><strong>Note:</strong> This command does not build the docs, so if you want those, you will have to consult the <a href=https://github.com/git/git/blob/master/INSTALL>INSTALL</a> file in the git repo.<h3 id=samba-setup>Samba setup</h3><p><a href=http://en.wikipedia.org/wiki/Samba_%28software%29>Samba</a> lets us access the Pi like a hard drive on our local network. Samba <em>works well with Windows and OSX</em>, and of course Linux as well.<p>If you are not familiar with the <code>vi</code> tool, you should <a href=http://www.washington.edu/computing/unix/vi.html>use this site to learn some basics</a>.<p>Complete the following to setup Samba:<ul><li>run <code>apt-get install samba</code><li>open the config with <code>vi /etc/samba/smb.conf</code><li>then complete the following:</ul><pre style=background:#2b303b;color:#c0c5ce><code><span># find in the top part of the file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Minimal Raspberry Pi OS | OhDoyleRules</title><meta content="Minimal Raspberry Pi OS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Minimal Raspberry Pi OS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Minimal Raspberry Pi OS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Setup and improve the Moebius OS for the Raspberry Pi" name=description><meta content="Setup and improve the Moebius OS for the Raspberry Pi" itemprop=description><meta content="Setup and improve the Moebius OS for the Raspberry Pi" property=og:description><meta content="Setup and improve the Moebius OS for the Raspberry Pi" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Minimal Raspberry Pi OS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content=2015-03-20 itemprop=dateModified><meta content="Moebius, debian, linux, raspberry, pi, os, operating system, minimal, small, tiny" itemprop=keywords><meta content="Moebius, debian, linux, raspberry, pi, os, operating system, minimal, small, tiny" property=article:tag><meta content="Moebius, debian, linux, raspberry, pi, os, operating system, minimal, small, tiny" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/minimal-raspberry-pi-os/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Minimal Raspberry Pi OS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2015</span></span>  <span class=post-date>🕙  <span>Updated: March 20, 2015</span></span><div itemprop="ArticleBody text" class=main-content><h2 id=introduction>Introduction</h2><p>I have had a <a rel="noopener nofollow noreferrer" href=http://www.raspberrypi.org/products/model-b/ target=_blank>Raspberry Pi B+</a> for a while now, and I was looking to setup a very minimal Linux OS. I am sure this would work fine with the Pi 2.<p>Although the other <a rel="noopener nofollow noreferrer" href=http://www.raspberrypi.org/downloads/ target=_blank>Raspberry Pi OSs</a> are great, a lot of them are too feature-full (read bloated) and have a packaged GUI that I would never use. Therefore, I wanted to install something much more <em>naked</em> than the ones on the Raspberry Pi website.<p>Enter, <a rel="noopener nofollow noreferrer" href=http://sourceforge.net/projects/moebiuslinux/ target=_blank>Moebius</a>. A few words from the Moebius site:<blockquote><p>[Moebius] is a Raspberry Pi armhf Debian based distribution targeted to have a minimal footprint. Size, speed and optimizations are main goals for this distro...</blockquote><p>With that said, the <em>unzipped <code>img</code></em> file is about <strong>110Mb</strong>. That is pretty small!<p>The other thing that Moebius does is remove the default Raspbian sources from <code>apt-get</code>. This means <em>you can't just download all the Rasbian packages</em> you want.<p>Moebius introduces the idea of containers. This isn't the same container technology like Docker. The "containers" are more like groups of packages. When installing a Moebius container, everything is installed in <code>/usr/bin</code> as if it came with the system.<p>I am going to provide a little walkthrough to get started with Moebius as a light-weight development environment, as well as how to install some other tools.<h3 id=initial-setup>Initial Setup</h3><p>First, visit the Moebius Sourceforge page and follow the instructions to <a rel="noopener nofollow noreferrer" href=http://sourceforge.net/projects/moebiuslinux/files/raspberry.stable/ target=_blank>download Moebius</a>. The basic instructions tell you how to copy the img to the SD Card. Once everything is setup and the Raspberry Pi has booted, complete the following:<ul><li>Either connect a screen and keyboard to the pi, or SSH to the pi<li>The default user is <code>root</code> and password is <code>moebius</code><li>When logged in, run <code>moebius</code></ul><div class=center><a title="Moebius command line app" href=/images/moebius-tool.png target=_blank><img alt="Moebius command line app" src=/images/moebius-tool.png></a><p>Moebius command line app</div><p>Moebius is the name of the OS, but also the name of a sweet little built-in command line tool to setup the rest of the Pi.<h4 id=ssh-niceness>SSH Niceness</h4><p><strong>Optional:</strong> Add your public key to Moebius in order to ssh without a password. This is not required, but it does make popping in and out of the Pi nice and quick. Plus, no password to remember!<p>Moebius does not come with <code>nano</code>! If you are not familiar with the <code>vi</code> tool, you should <a rel="noopener nofollow noreferrer" href=http://www.washington.edu/computing/unix/vi.html target=_blank>use this site to learn some basics</a>.<p>Just create <code>~/.ssh</code> and then use <code>vi ~/.ssh/authorized_keys</code> to create a new file, then paste in your public key.<h3 id=dev-environment-setup>Dev Environment Setup</h3><ul><li>Run <code>moebius</code> and select <code>Basic/Initial Setup</code><li>Choose <code>Autoresize SD partition</code>, follow the instructions<li>Run <code>apt-get update</code><li>Run <code>apt-get install tzdata</code><li>Run <code>moebius</code> and select <code>Basic/Initial Setup</code>, choose <code>System timezone setup</code> and follow instructions<li>In <code>moebius</code>, select <code>Software Management</code> and select <code>Update containers list from repository</code><li>Do the same as above except choose <code>Install a container</code> from the <code>Software Management</code> menu<li>Select the <code>lang.gcc</code> container</ul><div class=center><a title="Moebius container command line app" href=/images/moebius-container-tool.png target=_blank><img alt="Moebius container command line app" src=/images/moebius-container-tool.png></a><p>Moebius container command line app</div><p><strong>You may get an error</strong> telling you to run <code>dpkg --configure -a</code>. If this happens, press any key to close the container installed and then run that command. When that completes, try to install the <code>lang.gcc</code> container again.<p>You may have to repeat the process above <em>multiple times</em>. I did it twice.<p>Once the container is installed, you should have <code>make</code> and <code>gcc</code>, and a bunch of other tools on your system.<hr><h3 id=install-git>Install git</h3><p><strong>You must install the lang.gcc container first</strong>. That container provides the necessary compilers we need in order to build git.<ul><li>Get the required development files with <code>apt-get install openssl-dev curl-dev libexpat-dev dropbear-dev coreutils coreutils-dev</code><li>Download the latest zip archive <code>wget https://github.com/git/git/archive/v2.3.3.zip</code><li>Run <code>unzip v2.3.3.zip</code> and then <code>cd v2.3.3/</code><li>Allow the scripts to run with <code>chmod +x *.sh && chmod +x check_bindir</code></ul><p>Following the official <a rel="noopener nofollow noreferrer" href=https://github.com/git/git/blob/master/INSTALL target=_blank>INSTALL</a> in the git source code repository, we want to leave out some of the features in order to build without some of the required libraries.<p>To do this, we need to run:<pre style=background:#2b303b;color:#c0c5ce><code><span>make NO_PERL=YesPlease NO_TCLTK=YesPlease NO_GETTEXT=YesPlease prefix=/usr install
+</span></code></pre><p>This will take a while to build, so <em>grab a coffee or a beer</em>.<p><strong>Note:</strong> This command does not build the docs, so if you want those, you will have to consult the <a rel="noopener nofollow noreferrer" href=https://github.com/git/git/blob/master/INSTALL target=_blank>INSTALL</a> file in the git repo.<h3 id=samba-setup>Samba setup</h3><p><a rel="noopener nofollow noreferrer" href=http://en.wikipedia.org/wiki/Samba_%28software%29 target=_blank>Samba</a> lets us access the Pi like a hard drive on our local network. Samba <em>works well with Windows and OSX</em>, and of course Linux as well.<p>If you are not familiar with the <code>vi</code> tool, you should <a rel="noopener nofollow noreferrer" href=http://www.washington.edu/computing/unix/vi.html target=_blank>use this site to learn some basics</a>.<p>Complete the following to setup Samba:<ul><li>run <code>apt-get install samba</code><li>open the config with <code>vi /etc/samba/smb.conf</code><li>then complete the following:</ul><pre style=background:#2b303b;color:#c0c5ce><code><span># find in the top part of the file
 </span><span>workgroup = your_workgroup_name
 </span><span># find and uncomment this line
 </span><span>wins support = yes
@@ -13,7 +13,7 @@
 </span><span>  create mask=0777
 </span><span>  directory mask=0777
 </span><span>  public=no
-</span></code></pre><ul><li>set the samba password with <code>smbpasswd -a root</code></ul><h3 id=install-lit-and-luvit>Install lit and luvit</h3><p><em>Again, have lang.gcc installed before continuing</em>.<p>I have been playing with <a href=https://github.com/luvit/lit>Lit</a> and <a href=https://github.com/luvit/luvit>Luvit</a>. They are like lightweight versions of Node.js, but written with Lua. So let's install them with a series of commands:<pre style=background:#2b303b;color:#c0c5ce><code><span>apt-get install curl
+</span></code></pre><ul><li>set the samba password with <code>smbpasswd -a root</code></ul><h3 id=install-lit-and-luvit>Install lit and luvit</h3><p><em>Again, have lang.gcc installed before continuing</em>.<p>I have been playing with <a rel="noopener nofollow noreferrer" href=https://github.com/luvit/lit target=_blank>Lit</a> and <a rel="noopener nofollow noreferrer" href=https://github.com/luvit/luvit target=_blank>Luvit</a>. They are like lightweight versions of Node.js, but written with Lua. So let's install them with a series of commands:<pre style=background:#2b303b;color:#c0c5ce><code><span>apt-get install curl
 </span><span>curl -L https://github.com/luvit/lit/raw/master/get-lit.sh | sh
 </span><span>mkdir -p /usr/local/bin
 </span><span>mv lit /usr/local/bin/lit
diff --git a/docs/personal-project/npm-logo-svg/index.html b/docs/personal-project/npm-logo-svg/index.html
index 524edce..15855dc 100644
--- a/docs/personal-project/npm-logo-svg/index.html
+++ b/docs/personal-project/npm-logo-svg/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>NPM logo SVG | OhDoyleRules</title><meta content="NPM logo SVG | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="NPM logo SVG" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/npm-logo-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/npm-logo-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="NPM logo SVG" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The NPM logo as a SVG" name=description><meta content="The NPM logo as a SVG" itemprop=description><meta content="The NPM logo as a SVG" property=og:description><meta content="The NPM logo as a SVG" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="NPM logo SVG | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="node, npm, logo, vector, svg, icon" itemprop=keywords><meta content="node, npm, logo, vector, svg, icon" property=article:tag><meta content="node, npm, logo, vector, svg, icon" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/npm-logo-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">NPM logo SVG</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 07, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I made a vector version of the logo for <a title="NPM Homepage" href=http://npmjs.org>NPM</a>. Here is the vector version as a SVG.<p><a href=/images/npm-logo.svg><img alt="npm vector svg logo" src=/images/npm-logo.svg></a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>NPM logo SVG | OhDoyleRules</title><meta content="NPM logo SVG | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="NPM logo SVG" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/npm-logo-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/npm-logo-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="NPM logo SVG" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The NPM logo as a SVG" name=description><meta content="The NPM logo as a SVG" itemprop=description><meta content="The NPM logo as a SVG" property=og:description><meta content="The NPM logo as a SVG" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="NPM logo SVG | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="node, npm, logo, vector, svg, icon" itemprop=keywords><meta content="node, npm, logo, vector, svg, icon" property=article:tag><meta content="node, npm, logo, vector, svg, icon" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/npm-logo-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">NPM logo SVG</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 07, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I made a vector version of the logo for <a rel="noopener nofollow noreferrer" title="NPM Homepage" href=http://npmjs.org target=_blank>NPM</a>. Here is the vector version as a SVG.<p><a href=/images/npm-logo.svg><img alt="npm vector svg logo" decoding=async loading=lazy src=/images/npm-logo.svg></a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/nudeproject/index.html b/docs/personal-project/nudeproject/index.html
index 02464d4..50d5830 100644
--- a/docs/personal-project/nudeproject/index.html
+++ b/docs/personal-project/nudeproject/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>NudeProject - a starting point for simple websites | OhDoyleRules</title><meta content="NudeProject - a starting point for simple websites | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="NudeProject - a starting point for simple websites" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/nudeproject/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/nudeproject/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="NudeProject - a starting point for simple websites" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="NudeProject - a starting point for simple websites" name=description><meta content="NudeProject - a starting point for simple websites" itemprop=description><meta content="NudeProject - a starting point for simple websites" property=og:description><meta content="NudeProject - a starting point for simple websites" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="NudeProject - a starting point for simple websites | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="nudeproject, css, js, javascript, template, boilerplater, starter, project" itemprop=keywords><meta content="nudeproject, css, js, javascript, template, boilerplater, starter, project" property=article:tag><meta content="nudeproject, css, js, javascript, template, boilerplater, starter, project" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/nudeproject/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">NudeProject - a starting point for simple websites</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>NudeProject is meant to be a starting point for new landing pages, single-page sites, or even just basic mockups. The point is to get me off the ground quickly. It only provides the most basic things that I need most of the time. These include <a title="gruntjs homepage" href=http://gruntjs.com/>grunt tasks</a>, <a title="normalize css" href=http://necolas.github.io/normalize.css/>normalized CSS</a>, <a href=http://modernizr.com title=modernizr>modernizr</a>, and a <a href=https://gist.github.com/james2doyle/5659710 title=modernizr-svg-replace.js>SVG fallback snippet</a> in javascript. Check out the project <a href=https://github.com/james2doyle/nudeproject title=james2doyle/nudeproject>on github</a>.<h4 id=grunt>grunt</h4><p>included grunt taks<ul><li>clean -- removing files before tasks run<li>cssmin -- minify and concat css files<li>imagemin -- compress images and jpeg<li>svgmin -- compress svg files<li>uglify -- minify and concat js</ul><h4 id=stylesheets>stylesheets</h4><ul><li>normalize.css</ul><h4 id=javascript>javascript</h4><p>modernizr custom build<ul><li>cssanimations<li>csstransforms<li>csstransforms3d<li>csstransitions<li>canvas<li>audio<li>video<li>localstorage<li>svg<li>touch<li>webgl<li>shiv<li>cssclasses<li>teststyles<li>testprop<li>testallprops<li>prefixes<li>domprefixes<li>css_boxsizing<li>script_async<li>script_defer</ul></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>NudeProject - a starting point for simple websites | OhDoyleRules</title><meta content="NudeProject - a starting point for simple websites | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="NudeProject - a starting point for simple websites" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/nudeproject/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/nudeproject/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="NudeProject - a starting point for simple websites" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="NudeProject - a starting point for simple websites" name=description><meta content="NudeProject - a starting point for simple websites" itemprop=description><meta content="NudeProject - a starting point for simple websites" property=og:description><meta content="NudeProject - a starting point for simple websites" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="NudeProject - a starting point for simple websites | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="nudeproject, css, js, javascript, template, boilerplater, starter, project" itemprop=keywords><meta content="nudeproject, css, js, javascript, template, boilerplater, starter, project" property=article:tag><meta content="nudeproject, css, js, javascript, template, boilerplater, starter, project" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/nudeproject/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">NudeProject - a starting point for simple websites</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>NudeProject is meant to be a starting point for new landing pages, single-page sites, or even just basic mockups. The point is to get me off the ground quickly. It only provides the most basic things that I need most of the time. These include <a rel="noopener nofollow noreferrer" title="gruntjs homepage" href=http://gruntjs.com/ target=_blank>grunt tasks</a>, <a rel="noopener nofollow noreferrer" title="normalize css" href=http://necolas.github.io/normalize.css/ target=_blank>normalized CSS</a>, <a rel="noopener nofollow noreferrer" href=http://modernizr.com target=_blank title=modernizr>modernizr</a>, and a <a rel="noopener nofollow noreferrer" href=https://gist.github.com/james2doyle/5659710 target=_blank title=modernizr-svg-replace.js>SVG fallback snippet</a> in javascript. Check out the project <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/nudeproject target=_blank title=james2doyle/nudeproject>on github</a>.<h4 id=grunt>grunt</h4><p>included grunt taks<ul><li>clean -- removing files before tasks run<li>cssmin -- minify and concat css files<li>imagemin -- compress images and jpeg<li>svgmin -- compress svg files<li>uglify -- minify and concat js</ul><h4 id=stylesheets>stylesheets</h4><ul><li>normalize.css</ul><h4 id=javascript>javascript</h4><p>modernizr custom build<ul><li>cssanimations<li>csstransforms<li>csstransforms3d<li>csstransitions<li>canvas<li>audio<li>video<li>localstorage<li>svg<li>touch<li>webgl<li>shiv<li>cssclasses<li>teststyles<li>testprop<li>testallprops<li>prefixes<li>domprefixes<li>css_boxsizing<li>script_async<li>script_defer</ul></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/phalcon-micro-starter/index.html b/docs/personal-project/phalcon-micro-starter/index.html
index 4764906..a0f88d1 100644
--- a/docs/personal-project/phalcon-micro-starter/index.html
+++ b/docs/personal-project/phalcon-micro-starter/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Phalcon Micro App Starter | OhDoyleRules</title><meta content="Phalcon Micro App Starter | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Phalcon Micro App Starter" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/phalcon-micro-starter/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/phalcon-micro-starter/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Phalcon Micro App Starter" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class" name=description><meta content="A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class" itemprop=description><meta content="A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class" property=og:description><meta content="A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Phalcon Micro App Starter | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Phalcon, module, open source, PHP, template, micro, simple, starter" itemprop=keywords><meta content="Phalcon, module, open source, PHP, template, micro, simple, starter" property=article:tag><meta content="Phalcon, module, open source, PHP, template, micro, simple, starter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Phalcon Micro App Starter</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 20, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a <a href=https://github.com/james2doyle/phalcon-micro-start>simple application template</a> that helps people get started with <a title="Phalcon PHP Homepage" href=http://phalconphp.com/>Phalcon PHP</a> using a more practical example of the <a href=http://docs.phalconphp.com/en/latest/reference/micro.html>Micro application</a>.<p>There is already a <a href=https://github.com/phalcon/store>sample application created by the Phalcon team that uses the Micro class</a>, but I found it to be a little more specific than I would like. It uses things like the <a href=http://docs.phalconphp.com/en/latest/reference/volt.html>Volt template engine</a>, models, Database connections, and some other <a href=https://github.com/phalcon/store/blob/master/config/bootstrap.php>glossed over Bootstrapping</a>.<p><a href=https://github.com/james2doyle/phalcon-micro-start>My example application</a> contains very little. It has enough to get you started creating a simple JSON-based application, or just serving a static site with a few cached views.<h2 id=what-s-included>What's Included?</h2><h4 id=basic-page-example>Basic page example</h4><p>Just shows a simple GET route and serves a single view.<h4 id=partial-views-simple-view-engine>Partial views (<code>Simple</code> view engine)</h4><p>The templates use partials for the header and footer of the site.<h4 id=url-with-params>URL with params</h4><p>You can pass parameters into the URL, and they will be rendered on the page.<h4 id=json-return>JSON return</h4><p>An example of how to return JSON via a POST request. There is also a comment that tells you the jQuery test function to try.<h4 id=cached-view>Cached view</h4><p>This shows how you can serve a cached view, with an expiry. Good for those complicated pages that need to be refreshed every other day.<h4 id=redirect-url>Redirect URL</h4><p>This one is really simple. It just shows how you can redirect one URL request to another.<h3 id=other-niceness>Other Niceness</h3><p>I also included a simple grunt task that uses <code>livereload</code>. This will refresh the browser when view files, or the <code>app.php</code> file, changes.<h3 id=link>Link</h3><p>You can find the <a href=https://github.com/james2doyle/phalcon-micro-start>repositry on Github</a>. I will be updating and tweaking this project as I move along. It may become more feature-rich in the next few months. I would like to build a nice solid base for myself when using the Micro app.<p>There may be some need to add in some simple search examples, models, forms, validation, or even Database connections. But we will see if that is where it moved organically.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Phalcon Micro App Starter | OhDoyleRules</title><meta content="Phalcon Micro App Starter | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Phalcon Micro App Starter" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/phalcon-micro-starter/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/phalcon-micro-starter/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Phalcon Micro App Starter" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class" name=description><meta content="A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class" itemprop=description><meta content="A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class" property=og:description><meta content="A showcase of a Phalcon Micro App starter template that makes it easy to get started with the Phalcon micro app class" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Phalcon Micro App Starter | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Phalcon, module, open source, PHP, template, micro, simple, starter" itemprop=keywords><meta content="Phalcon, module, open source, PHP, template, micro, simple, starter" property=article:tag><meta content="Phalcon, module, open source, PHP, template, micro, simple, starter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/phalcon-micro-starter/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Phalcon Micro App Starter</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 20, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/phalcon-micro-start target=_blank>simple application template</a> that helps people get started with <a rel="noopener nofollow noreferrer" title="Phalcon PHP Homepage" href=http://phalconphp.com/ target=_blank>Phalcon PHP</a> using a more practical example of the <a rel="noopener nofollow noreferrer" href=http://docs.phalconphp.com/en/latest/reference/micro.html target=_blank>Micro application</a>.<p>There is already a <a rel="noopener nofollow noreferrer" href=https://github.com/phalcon/store target=_blank>sample application created by the Phalcon team that uses the Micro class</a>, but I found it to be a little more specific than I would like. It uses things like the <a rel="noopener nofollow noreferrer" href=http://docs.phalconphp.com/en/latest/reference/volt.html target=_blank>Volt template engine</a>, models, Database connections, and some other <a rel="noopener nofollow noreferrer" href=https://github.com/phalcon/store/blob/master/config/bootstrap.php target=_blank>glossed over Bootstrapping</a>.<p><a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/phalcon-micro-start target=_blank>My example application</a> contains very little. It has enough to get you started creating a simple JSON-based application, or just serving a static site with a few cached views.<h2 id=what-s-included>What's Included?</h2><h4 id=basic-page-example>Basic page example</h4><p>Just shows a simple GET route and serves a single view.<h4 id=partial-views-simple-view-engine>Partial views (<code>Simple</code> view engine)</h4><p>The templates use partials for the header and footer of the site.<h4 id=url-with-params>URL with params</h4><p>You can pass parameters into the URL, and they will be rendered on the page.<h4 id=json-return>JSON return</h4><p>An example of how to return JSON via a POST request. There is also a comment that tells you the jQuery test function to try.<h4 id=cached-view>Cached view</h4><p>This shows how you can serve a cached view, with an expiry. Good for those complicated pages that need to be refreshed every other day.<h4 id=redirect-url>Redirect URL</h4><p>This one is really simple. It just shows how you can redirect one URL request to another.<h3 id=other-niceness>Other Niceness</h3><p>I also included a simple grunt task that uses <code>livereload</code>. This will refresh the browser when view files, or the <code>app.php</code> file, changes.<h3 id=link>Link</h3><p>You can find the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/phalcon-micro-start target=_blank>repositry on Github</a>. I will be updating and tweaking this project as I move along. It may become more feature-rich in the next few months. I would like to build a nice solid base for myself when using the Micro app.<p>There may be some need to add in some simple search examples, models, forms, validation, or even Database connections. But we will see if that is where it moved organically.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/phile-cms/index.html b/docs/personal-project/phile-cms/index.html
index 1187b3c..9567ad6 100644
--- a/docs/personal-project/phile-cms/index.html
+++ b/docs/personal-project/phile-cms/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Phile CMS | OhDoyleRules</title><meta content="Phile CMS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Phile CMS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/phile-cms/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/phile-cms/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Phile CMS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Phile is flat-file CMS based on Pico" name=description><meta content="Phile is flat-file CMS based on Pico" itemprop=description><meta content="Phile is flat-file CMS based on Pico" property=og:description><meta content="Phile is flat-file CMS based on Pico" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Phile CMS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="phile, pico, cms, markdown, twig, template, PHP" itemprop=keywords><meta content="phile, pico, cms, markdown, twig, template, PHP" property=article:tag><meta content="phile, pico, cms, markdown, twig, template, PHP" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/phile-cms/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Phile CMS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>After being a upset at the progress with Pico, myself and a developer from Germany(<a title="Frank Twitter" href=https://twitter.com/neoblack>Frank</a>) have developed a fork project.<div class=center><a title="PhileCMS Homepage" href=http://philecms.github.io/Phile/> <img alt="PhileCMS Logo" src=/images/phile-logo.png> </a></div><p>The project is <a title="PhileCMS Homepage" href=http://philecms.github.io/Phile/>PhileCMS</a>. It maintains the philosophy of Pico, being fast and small, but it makes a lot of improvements on the core. Most the project is now OOP based with classes and models.<p>Also the parser and the template engine have been pushed into services. Which means they can be overloaded and replaced with different ones. Don't like Markdown? Use a plugin for TextTile instead. Don't like <a href=https://ohdoylerules.com/personal-project/phile-cms/twig.sensiolabs.org>Twig</a>? Replace it with <a href=https://github.com/pyrocms/lex>Lex</a>!<p>The hooks system was completely replaced with an Evented system. The plugins have also changed. They now have a config.php file that is used instead of having to write your own file reader for each plugin.<h3 id=so-why-use-this-over-pico>So why use this over Pico?</h3><p>Here is a small list of differences in design from Pico:<ul><li>OOP based (Classes)<li>Events system<li>Parser Overloading<li>Template Engine Overloading<li>Performance Improvements (<em>33% to 65% speed increase</em>)</ul><p>The main increase in speed is when there are multiple pages. Once you get to 20 pages you see a minumum of a 50% increase in load times.<p>I have actually converted this site to run on Phile. It is probably the first site in production to be using it. I also use the <a href=https://github.com/PhileCMS/Sundown-Parser-Plugin>Sundown Plugin</a> I wrote since I have <a href=https://github.com/chobie/php-sundown>PHP-Sundown</a> installed on my server.<p>Anyway, check out the project. It is pretty cool and I am very happy with the work of Frank.<p><a href=https://github.com/PhileCMS/Phile>Github Repo</a><p><a title="PhileCMS Homepage" href=http://philecms.github.io/Phile/>Homepage</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Phile CMS | OhDoyleRules</title><meta content="Phile CMS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Phile CMS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/phile-cms/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/phile-cms/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Phile CMS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Phile is flat-file CMS based on Pico" name=description><meta content="Phile is flat-file CMS based on Pico" itemprop=description><meta content="Phile is flat-file CMS based on Pico" property=og:description><meta content="Phile is flat-file CMS based on Pico" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Phile CMS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="phile, pico, cms, markdown, twig, template, PHP" itemprop=keywords><meta content="phile, pico, cms, markdown, twig, template, PHP" property=article:tag><meta content="phile, pico, cms, markdown, twig, template, PHP" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/phile-cms/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Phile CMS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 04, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>After being a upset at the progress with Pico, myself and a developer from Germany(<a rel="noopener nofollow noreferrer" title="Frank Twitter" href=https://twitter.com/neoblack target=_blank>Frank</a>) have developed a fork project.<div class=center><a title="PhileCMS Homepage" href=http://philecms.github.io/Phile/> <img alt="PhileCMS Logo" src=/images/phile-logo.png> </a></div><p>The project is <a rel="noopener nofollow noreferrer" title="PhileCMS Homepage" href=http://philecms.github.io/Phile/ target=_blank>PhileCMS</a>. It maintains the philosophy of Pico, being fast and small, but it makes a lot of improvements on the core. Most the project is now OOP based with classes and models.<p>Also the parser and the template engine have been pushed into services. Which means they can be overloaded and replaced with different ones. Don't like Markdown? Use a plugin for TextTile instead. Don't like <a href=https://ohdoylerules.com/personal-project/phile-cms/twig.sensiolabs.org>Twig</a>? Replace it with <a rel="noopener nofollow noreferrer" href=https://github.com/pyrocms/lex target=_blank>Lex</a>!<p>The hooks system was completely replaced with an Evented system. The plugins have also changed. They now have a config.php file that is used instead of having to write your own file reader for each plugin.<h3 id=so-why-use-this-over-pico>So why use this over Pico?</h3><p>Here is a small list of differences in design from Pico:<ul><li>OOP based (Classes)<li>Events system<li>Parser Overloading<li>Template Engine Overloading<li>Performance Improvements (<em>33% to 65% speed increase</em>)</ul><p>The main increase in speed is when there are multiple pages. Once you get to 20 pages you see a minumum of a 50% increase in load times.<p>I have actually converted this site to run on Phile. It is probably the first site in production to be using it. I also use the <a rel="noopener nofollow noreferrer" href=https://github.com/PhileCMS/Sundown-Parser-Plugin target=_blank>Sundown Plugin</a> I wrote since I have <a rel="noopener nofollow noreferrer" href=https://github.com/chobie/php-sundown target=_blank>PHP-Sundown</a> installed on my server.<p>Anyway, check out the project. It is pretty cool and I am very happy with the work of Frank.<p><a rel="noopener nofollow noreferrer" href=https://github.com/PhileCMS/Phile target=_blank>Github Repo</a><p><a rel="noopener nofollow noreferrer" title="PhileCMS Homepage" href=http://philecms.github.io/Phile/ target=_blank>Homepage</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/phile-intro-video/index.html b/docs/personal-project/phile-intro-video/index.html
index a32c914..007b739 100644
--- a/docs/personal-project/phile-intro-video/index.html
+++ b/docs/personal-project/phile-intro-video/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>All About PhileCMS Video | OhDoyleRules</title><meta content="All About PhileCMS Video | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="All About PhileCMS Video" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/phile-intro-video/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/phile-intro-video/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="All About PhileCMS Video" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="All About PhileCMS Video" name=description><meta content="All About PhileCMS Video" itemprop=description><meta content="All About PhileCMS Video" property=og:description><meta content="All About PhileCMS Video" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="All About PhileCMS Video | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="philecms, phile, video, intro, introduction, about, tutorial, instruction, markdown, flat, file" itemprop=keywords><meta content="philecms, phile, video, intro, introduction, about, tutorial, instruction, markdown, flat, file" property=article:tag><meta content="philecms, phile, video, intro, introduction, about, tutorial, instruction, markdown, flat, file" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/phile-intro-video/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">All About PhileCMS Video</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 07, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p><a href=https://github.com/PhileCMS/Phile>PhileCMS</a> now has a <a href="http://www.youtube.com/watch?v=8GLMe371RuI">new instructional video</a>.<p>Here are some of the points I hit on in the video:<ul><li>Installation<li>Differences To Pico<li>About Twig<li>Creating Content<li>Using Meta Data<li>Themes<li>Conditional Navigations<li>Plugins<li>Tricks</ul><p>The video is about 35 minutes. So there is quite a lot of stuff in there. I plan on making a few more videos. One about making themes and using the <a href=https://github.com/PhileCMS/phileGruntThemeing>phileGruntThemeing</a> project, and creating plugins with the events system.<p><a href="http://www.youtube.com/watch?v=8GLMe371RuI">Watch it on YouTube</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>All About PhileCMS Video | OhDoyleRules</title><meta content="All About PhileCMS Video | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="All About PhileCMS Video" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/phile-intro-video/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/phile-intro-video/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="All About PhileCMS Video" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="All About PhileCMS Video" name=description><meta content="All About PhileCMS Video" itemprop=description><meta content="All About PhileCMS Video" property=og:description><meta content="All About PhileCMS Video" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="All About PhileCMS Video | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="philecms, phile, video, intro, introduction, about, tutorial, instruction, markdown, flat, file" itemprop=keywords><meta content="philecms, phile, video, intro, introduction, about, tutorial, instruction, markdown, flat, file" property=article:tag><meta content="philecms, phile, video, intro, introduction, about, tutorial, instruction, markdown, flat, file" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/phile-intro-video/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">All About PhileCMS Video</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 07, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p><a rel="noopener nofollow noreferrer" href=https://github.com/PhileCMS/Phile target=_blank>PhileCMS</a> now has a <a href="http://www.youtube.com/watch?v=8GLMe371RuI" rel="noopener nofollow noreferrer" target=_blank>new instructional video</a>.<p>Here are some of the points I hit on in the video:<ul><li>Installation<li>Differences To Pico<li>About Twig<li>Creating Content<li>Using Meta Data<li>Themes<li>Conditional Navigations<li>Plugins<li>Tricks</ul><p>The video is about 35 minutes. So there is quite a lot of stuff in there. I plan on making a few more videos. One about making themes and using the <a rel="noopener nofollow noreferrer" href=https://github.com/PhileCMS/phileGruntThemeing target=_blank>phileGruntThemeing</a> project, and creating plugins with the events system.<p><a href="http://www.youtube.com/watch?v=8GLMe371RuI" rel="noopener nofollow noreferrer" target=_blank>Watch it on YouTube</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/php-websocket-chat/index.html b/docs/personal-project/php-websocket-chat/index.html
index 1232a24..dbb2f26 100644
--- a/docs/personal-project/php-websocket-chat/index.html
+++ b/docs/personal-project/php-websocket-chat/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PHP WebSocket Chat | OhDoyleRules</title><meta content="PHP WebSocket Chat | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PHP WebSocket Chat" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/php-websocket-chat/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/php-websocket-chat/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PHP WebSocket Chat" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="PHP websocket chat application example" name=description><meta content="PHP websocket chat application example" itemprop=description><meta content="PHP websocket chat application example" property=og:description><meta content="PHP websocket chat application example" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PHP WebSocket Chat | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, websocket, html5, socket, long poll, interval, ajax, post, get" itemprop=keywords><meta content="php, websocket, html5, socket, long poll, interval, ajax, post, get" property=article:tag><meta content="php, websocket, html5, socket, long poll, interval, ajax, post, get" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/php-websocket-chat/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PHP WebSocket Chat</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 08, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>About 6 months ago, I made a little <a href=https://github.com/james2doyle/socket-chat-example>socket.io chat app</a>. At the time, this was really only possible with Node.js because the <a href="http://caniuse.com/#feat=websockets">HTML5 WebSocket support</a> was too low.<p>But now, months later, the support for WebSockets is actually very good.Looking at <a href=http://caniuse.com>caniuse.com</a> right now, there is better support for WebSocket than there is WebGL. I would argue that WebGL support is actually more important than the WebSocket support, but I digress. Here is a non-jargon-laden explanation from <a href=http://www.html5rocks.com/en/tutorials/websockets/basics/#toc-introduction-sockets>HTML5Rocks</a>:<blockquote><p>The WebSocket specification defines an API establishing "socket" connections between a web browser and a server. In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time.</blockquote><p>Here is a little more technical explanation.<blockquote><p>A WebSocket creates a TCP connection to server, and keeps it as long as needed. The Server or client can easily close it. It uses Bidirectional communication - so server and client can exchange data both directions at any time. It is very efficient if the application requires frequent messages. WebSockets have data framing that includes masking for each message sent from client to server so data is simply encrypted.</blockquote><p>If you want a technically in-depth overview, checkout <a href=http://www.websocket.org/quantum.html>websocket.org</a>.<p>Anyway, I made a <a href=https://github.com/james2doyle/php-socket-chat>little chat app</a> with <a href=http://socketo.me/>Ratchet</a>. People knock PHP for all the bad things it does. But getting the WebSocket example running, actually wasn't that bad. Apparently Apache doesn't play nice with Ratchet (not sure about <em>pure</em> WebSockets) so you have to use the <a href=http://www.php.net/manual/en/features.commandline.webserver.php>built-in PHP server</a> which comes with PHP 5.4.<div class=center><a title="php ratchet socket server form example" href=/images/php-socket-animation.gif target=_blank><img alt="php ratchet socket server form example" height=246 src=/images/php-socket-animation.gif width=252></a></div><p>The app I made is pretty much a copy paste from the <a href=http://socketo.me/docs/hello-world>Rachet Hello World Example</a> but tried to make the simplest chat app I could. The server is actually pretty close the Hello World code, just with a bunch of extra client-side javascript.<p>Once you <a href=https://github.com/james2doyle/php-socket-chat>download the app</a>, if you have PHP properly installed and in your path, you can use <code>php bin/chat-server.php</code> in the root folder to start the server. You can then hit the index page and see the green connection message. You will also see some information in your terminal.<p>You can then open a new browser (or incognito/private window) and "create" another user to chat with.<p>You can see your messages going back and forth. Pretty slick. With the way I develop things at <a href=http://warpaintmedia.ca>WARPAINT Media</a>, I really can't wait to create some sites and apps that use the WebSocket server.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PHP WebSocket Chat | OhDoyleRules</title><meta content="PHP WebSocket Chat | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PHP WebSocket Chat" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/php-websocket-chat/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/php-websocket-chat/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PHP WebSocket Chat" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="PHP websocket chat application example" name=description><meta content="PHP websocket chat application example" itemprop=description><meta content="PHP websocket chat application example" property=og:description><meta content="PHP websocket chat application example" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PHP WebSocket Chat | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, websocket, html5, socket, long poll, interval, ajax, post, get" itemprop=keywords><meta content="php, websocket, html5, socket, long poll, interval, ajax, post, get" property=article:tag><meta content="php, websocket, html5, socket, long poll, interval, ajax, post, get" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/php-websocket-chat/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PHP WebSocket Chat</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 08, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>About 6 months ago, I made a little <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/socket-chat-example target=_blank>socket.io chat app</a>. At the time, this was really only possible with Node.js because the <a href="http://caniuse.com/#feat=websockets" rel="noopener nofollow noreferrer" target=_blank>HTML5 WebSocket support</a> was too low.<p>But now, months later, the support for WebSockets is actually very good.Looking at <a rel="noopener nofollow noreferrer" href=http://caniuse.com target=_blank>caniuse.com</a> right now, there is better support for WebSocket than there is WebGL. I would argue that WebGL support is actually more important than the WebSocket support, but I digress. Here is a non-jargon-laden explanation from <a rel="noopener nofollow noreferrer" href=http://www.html5rocks.com/en/tutorials/websockets/basics/#toc-introduction-sockets target=_blank>HTML5Rocks</a>:<blockquote><p>The WebSocket specification defines an API establishing "socket" connections between a web browser and a server. In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time.</blockquote><p>Here is a little more technical explanation.<blockquote><p>A WebSocket creates a TCP connection to server, and keeps it as long as needed. The Server or client can easily close it. It uses Bidirectional communication - so server and client can exchange data both directions at any time. It is very efficient if the application requires frequent messages. WebSockets have data framing that includes masking for each message sent from client to server so data is simply encrypted.</blockquote><p>If you want a technically in-depth overview, checkout <a rel="noopener nofollow noreferrer" href=http://www.websocket.org/quantum.html target=_blank>websocket.org</a>.<p>Anyway, I made a <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/php-socket-chat target=_blank>little chat app</a> with <a rel="noopener nofollow noreferrer" href=http://socketo.me/ target=_blank>Ratchet</a>. People knock PHP for all the bad things it does. But getting the WebSocket example running, actually wasn't that bad. Apparently Apache doesn't play nice with Ratchet (not sure about <em>pure</em> WebSockets) so you have to use the <a rel="noopener nofollow noreferrer" href=http://www.php.net/manual/en/features.commandline.webserver.php target=_blank>built-in PHP server</a> which comes with PHP 5.4.<div class=center><a title="php ratchet socket server form example" href=/images/php-socket-animation.gif target=_blank><img alt="php ratchet socket server form example" height=246 src=/images/php-socket-animation.gif width=252></a></div><p>The app I made is pretty much a copy paste from the <a rel="noopener nofollow noreferrer" href=http://socketo.me/docs/hello-world target=_blank>Rachet Hello World Example</a> but tried to make the simplest chat app I could. The server is actually pretty close the Hello World code, just with a bunch of extra client-side javascript.<p>Once you <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/php-socket-chat target=_blank>download the app</a>, if you have PHP properly installed and in your path, you can use <code>php bin/chat-server.php</code> in the root folder to start the server. You can then hit the index page and see the green connection message. You will also see some information in your terminal.<p>You can then open a new browser (or incognito/private window) and "create" another user to chat with.<p>You can see your messages going back and forth. Pretty slick. With the way I develop things at <a rel="noopener nofollow noreferrer" href=http://warpaintmedia.ca target=_blank>WARPAINT Media</a>, I really can't wait to create some sites and apps that use the WebSocket server.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pico-download-plugin/index.html b/docs/personal-project/pico-download-plugin/index.html
index 4c3dc34..0d6525a 100644
--- a/docs/personal-project/pico-download-plugin/index.html
+++ b/docs/personal-project/pico-download-plugin/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>pico-download plugin | OhDoyleRules</title><meta content="pico-download plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="pico-download plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pico-download-plugin/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pico-download-plugin/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="pico-download plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I created a plugin to force files to download in PicoCMS" name=description><meta content="I created a plugin to force files to download in PicoCMS" itemprop=description><meta content="I created a plugin to force files to download in PicoCMS" property=og:description><meta content="I created a plugin to force files to download in PicoCMS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="pico-download plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pico, cms, markdown, php, plugin, download, force" itemprop=keywords><meta content="pico, cms, markdown, php, plugin, download, force" property=article:tag><meta content="pico, cms, markdown, php, plugin, download, force" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pico-download-plugin/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">pico-download plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a plugin to force files to download in <a href=http://pico.dev7studios.com>PicoCMS</a>.<p>I needed this because I wanted to PDFs to download and not just render in the browser.<h3 id=usage>Usage</h3><p>Place your files in the content folder. Then replace the word <code>content/</code> in the url with the word <code>download/</code>.<p><em>The download folder can be controlled in the plugin file. Default for downloading is <code>content/</code>.</em><h3 id=example>Example</h3><p>If you wanted to render the file in the browser:<p><strong>http://localhost:8888/Pico/content/sub/page.md</strong><p>Now with this plugin installed, you can force a download:<p><strong>http://localhost:8888/Pico/download/sub/page.md</strong><h3 id=more-info>More info</h3><p>I have added quite a few comments in the plugin so just take a look. It's nothing new, just bringing different snippets together.<p>You can find the project <a href=https://github.com/james2doyle/pico_download title=james2doyle/pico_download>here on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>pico-download plugin | OhDoyleRules</title><meta content="pico-download plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="pico-download plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pico-download-plugin/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pico-download-plugin/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="pico-download plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I created a plugin to force files to download in PicoCMS" name=description><meta content="I created a plugin to force files to download in PicoCMS" itemprop=description><meta content="I created a plugin to force files to download in PicoCMS" property=og:description><meta content="I created a plugin to force files to download in PicoCMS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="pico-download plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pico, cms, markdown, php, plugin, download, force" itemprop=keywords><meta content="pico, cms, markdown, php, plugin, download, force" property=article:tag><meta content="pico, cms, markdown, php, plugin, download, force" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pico-download-plugin/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">pico-download plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 18, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a plugin to force files to download in <a rel="noopener nofollow noreferrer" href=http://pico.dev7studios.com target=_blank>PicoCMS</a>.<p>I needed this because I wanted to PDFs to download and not just render in the browser.<h3 id=usage>Usage</h3><p>Place your files in the content folder. Then replace the word <code>content/</code> in the url with the word <code>download/</code>.<p><em>The download folder can be controlled in the plugin file. Default for downloading is <code>content/</code>.</em><h3 id=example>Example</h3><p>If you wanted to render the file in the browser:<p><strong>http://localhost:8888/Pico/content/sub/page.md</strong><p>Now with this plugin installed, you can force a download:<p><strong>http://localhost:8888/Pico/download/sub/page.md</strong><h3 id=more-info>More info</h3><p>I have added quite a few comments in the plugin so just take a look. It's nothing new, just bringing different snippets together.<p>You can find the project <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pico_download target=_blank title=james2doyle/pico_download>here on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pico-get-by-filename-plugin/index.html b/docs/personal-project/pico-get-by-filename-plugin/index.html
index afa744c..d260b09 100644
--- a/docs/personal-project/pico-get-by-filename-plugin/index.html
+++ b/docs/personal-project/pico-get-by-filename-plugin/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pico Get By Filename Plugin | OhDoyleRules</title><meta content="Pico Get By Filename Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pico Get By Filename Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pico Get By Filename Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I wrote another small plugin for PicoCMS that actually lets you load files based on the filename" name=description><meta content="I wrote another small plugin for PicoCMS that actually lets you load files based on the filename" itemprop=description><meta content="I wrote another small plugin for PicoCMS that actually lets you load files based on the filename" property=og:description><meta content="I wrote another small plugin for PicoCMS that actually lets you load files based on the filename" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pico Get By Filename Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, pico, plugin, filename, load, markdown" itemprop=keywords><meta content="php, pico, plugin, filename, load, markdown" property=article:tag><meta content="php, pico, plugin, filename, load, markdown" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pico Get By Filename Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I wrote another small plugin for PicoCMS that actually lets you load files based on the filename. I called it <a href=https://github.com/james2doyle/pico_get_by_filename title=james2doyle/pico_get_by_filename>pico_get_by_filename</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pico Get By Filename Plugin | OhDoyleRules</title><meta content="Pico Get By Filename Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pico Get By Filename Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pico Get By Filename Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I wrote another small plugin for PicoCMS that actually lets you load files based on the filename" name=description><meta content="I wrote another small plugin for PicoCMS that actually lets you load files based on the filename" itemprop=description><meta content="I wrote another small plugin for PicoCMS that actually lets you load files based on the filename" property=og:description><meta content="I wrote another small plugin for PicoCMS that actually lets you load files based on the filename" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pico Get By Filename Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, pico, plugin, filename, load, markdown" itemprop=keywords><meta content="php, pico, plugin, filename, load, markdown" property=article:tag><meta content="php, pico, plugin, filename, load, markdown" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pico-get-by-filename-plugin/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pico Get By Filename Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 27, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I wrote another small plugin for PicoCMS that actually lets you load files based on the filename. I called it <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pico_get_by_filename target=_blank title=james2doyle/pico_get_by_filename>pico_get_by_filename</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pico-slider-plugin/index.html b/docs/personal-project/pico-slider-plugin/index.html
index fa378d2..7408a95 100644
--- a/docs/personal-project/pico-slider-plugin/index.html
+++ b/docs/personal-project/pico-slider-plugin/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pico Slider Plugin | OhDoyleRules</title><meta content="Pico Slider Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pico Slider Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pico-slider-plugin/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pico-slider-plugin/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pico Slider Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="a plugin for Pico that allows you to create a Slider" name=description><meta content="a plugin for Pico that allows you to create a Slider" itemprop=description><meta content="a plugin for Pico that allows you to create a Slider" property=og:description><meta content="a plugin for Pico that allows you to create a Slider" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pico Slider Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Pico, Slider, Plugin, php" itemprop=keywords><meta content="Pico, Slider, Plugin, php" property=article:tag><meta content="Pico, Slider, Plugin, php" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pico-slider-plugin/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pico Slider Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I wrote a small plugin for the Pico CMS. I recently discovered a very cool PHP-based CMS called, <a title="Pico CMS Homepage" href=http://pico.dev7studios.com/>Pico CMS</a>. This CMS is a no-database flat-file CMS. It is really fast and very easy. There was no real way to handle images in the base version. So I developed a plugin that can list images in a folder. I named it pico_slider but it could probably be named pico_image_list because all it really does is expose an image array to the front-end variables. <a href=https://github.com/james2doyle/pico_slider title=james2doyle/pico_slider>Here it is on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pico Slider Plugin | OhDoyleRules</title><meta content="Pico Slider Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pico Slider Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pico-slider-plugin/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pico-slider-plugin/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pico Slider Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="a plugin for Pico that allows you to create a Slider" name=description><meta content="a plugin for Pico that allows you to create a Slider" itemprop=description><meta content="a plugin for Pico that allows you to create a Slider" property=og:description><meta content="a plugin for Pico that allows you to create a Slider" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pico Slider Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Pico, Slider, Plugin, php" itemprop=keywords><meta content="Pico, Slider, Plugin, php" property=article:tag><meta content="Pico, Slider, Plugin, php" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pico-slider-plugin/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pico Slider Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I wrote a small plugin for the Pico CMS. I recently discovered a very cool PHP-based CMS called, <a rel="noopener nofollow noreferrer" title="Pico CMS Homepage" href=http://pico.dev7studios.com/ target=_blank>Pico CMS</a>. This CMS is a no-database flat-file CMS. It is really fast and very easy. There was no real way to handle images in the base version. So I developed a plugin that can list images in a folder. I named it pico_slider but it could probably be named pico_image_list because all it really does is expose an image array to the front-end variables. <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pico_slider target=_blank title=james2doyle/pico_slider>Here it is on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pico-useragent/index.html b/docs/personal-project/pico-useragent/index.html
index 5b16ab2..e9d7119 100644
--- a/docs/personal-project/pico-useragent/index.html
+++ b/docs/personal-project/pico-useragent/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pico-Useragent Plugin | OhDoyleRules</title><meta content="Pico-Useragent Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pico-Useragent Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pico-useragent/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pico-useragent/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pico-Useragent Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A plugin for pico that allows you to list the useragent" name=description><meta content="A plugin for pico that allows you to list the useragent" itemprop=description><meta content="A plugin for pico that allows you to list the useragent" property=og:description><meta content="A plugin for pico that allows you to list the useragent" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pico-Useragent Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pico, cms, useragent, parse, plugin, ua, sniffer, twig, templates, conditional, modernizr" itemprop=keywords><meta content="pico, cms, useragent, parse, plugin, ua, sniffer, twig, templates, conditional, modernizr" property=article:tag><meta content="pico, cms, useragent, parse, plugin, ua, sniffer, twig, templates, conditional, modernizr" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pico-useragent/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pico-Useragent Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another plugin for <a href=http://pico.dev7studios.com/>Pico CMS</a>. It is esentially a clone of my <a href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin>pyro-sniffer-plugin</a> for <a title="Pyro CMS Homepage" href=http://pyrocms.com>PyroCMS</a>.<p>Here is the <a href=https://github.com/james2doyle/pico_useragent>Github project</a>.<p>This plugin allows you to parse the user agent of the current visitor and then expose that information in an easy to use variable in your twig templates.<p>Hopefully that makese sense.<h3 id=output>Output</h3><p>When using the plugin, you get a new variable called <code>browser</code>. The browser variable has the following properties in it when dumped from my computer:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>$browser = array (
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pico-Useragent Plugin | OhDoyleRules</title><meta content="Pico-Useragent Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pico-Useragent Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pico-useragent/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pico-useragent/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pico-Useragent Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A plugin for pico that allows you to list the useragent" name=description><meta content="A plugin for pico that allows you to list the useragent" itemprop=description><meta content="A plugin for pico that allows you to list the useragent" property=og:description><meta content="A plugin for pico that allows you to list the useragent" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pico-Useragent Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pico, cms, useragent, parse, plugin, ua, sniffer, twig, templates, conditional, modernizr" itemprop=keywords><meta content="pico, cms, useragent, parse, plugin, ua, sniffer, twig, templates, conditional, modernizr" property=article:tag><meta content="pico, cms, useragent, parse, plugin, ua, sniffer, twig, templates, conditional, modernizr" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pico-useragent/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pico-Useragent Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another plugin for <a rel="noopener nofollow noreferrer" href=http://pico.dev7studios.com/ target=_blank>Pico CMS</a>. It is esentially a clone of my <a rel="noopener nofollow noreferrer" href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin target=_blank>pyro-sniffer-plugin</a> for <a rel="noopener nofollow noreferrer" title="Pyro CMS Homepage" href=http://pyrocms.com target=_blank>PyroCMS</a>.<p>Here is the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pico_useragent target=_blank>Github project</a>.<p>This plugin allows you to parse the user agent of the current visitor and then expose that information in an easy to use variable in your twig templates.<p>Hopefully that makese sense.<h3 id=output>Output</h3><p>When using the plugin, you get a new variable called <code>browser</code>. The browser variable has the following properties in it when dumped from my computer:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>$browser = array (
 </span><span>  'useragent'   => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.37 Safari/537.36' // full ua string
 </span><span>  'name'        => 'Google Chrome' // name of the browser
 </span><span>  'browser'     => 'google-chrome' // CSS safe browser name
@@ -16,4 +16,4 @@
 </span><span style=color:#8fa1b3>.</span><span style=color:#d08770>firefox </span><span style=color:#8fa1b3>.</span><span style=color:#d08770>button </span><span>{
 </span><span>  padding: </span><span style=color:#d08770>0.28em 1em</span><span>;
 </span><span>}
-</span></code></pre><h3 id=use-cases>Use Cases</h3><ul><li>conditional content<li>conditional styles/scripts<li>layout modifications<li>serving specific images<li>Modernizr-esque CSS classes</ul><p>Here is the <a href=https://github.com/james2doyle/pico_useragent>Github project</a> again.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><h3 id=use-cases>Use Cases</h3><ul><li>conditional content<li>conditional styles/scripts<li>layout modifications<li>serving specific images<li>Modernizr-esque CSS classes</ul><p>Here is the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pico_useragent target=_blank>Github project</a> again.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-blurb-field/index.html b/docs/personal-project/pyro-blurb-field/index.html
index 982f57c..b1c93fd 100644
--- a/docs/personal-project/pyro-blurb-field/index.html
+++ b/docs/personal-project/pyro-blurb-field/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Blurb Field | OhDoyleRules</title><meta content="Pyro Blurb Field | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Blurb Field" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-blurb-field/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-blurb-field/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Blurb Field" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A field for Pyrocms that allows you to create little blurbs in a list" name=description><meta content="A field for Pyrocms that allows you to create little blurbs in a list" itemprop=description><meta content="A field for Pyrocms that allows you to create little blurbs in a list" property=og:description><meta content="A field for Pyrocms that allows you to create little blurbs in a list" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Blurb Field | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, blurb, field, cms, php, sections, title, link, website, body, content, text" itemprop=keywords><meta content="pyrocms, blurb, field, cms, php, sections, title, link, website, body, content, text" property=article:tag><meta content="pyrocms, blurb, field, cms, php, sections, title, link, website, body, content, text" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-blurb-field/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Blurb Field</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another new field type for <a title="PyroCMS Website" href=http://pyrocms.com>PyroCMS</a>.<div class=center><img alt=pyro-blurb-field src=/images/Screen-Shot-2013-03-13-at-3.38.39-PM.png></div><p>This one is for doing little "blurb" sections. Essentially I keep seeing little title+image+body components. Like testimonials, user profiles, portfolio snippets. These all follow a title+image+body format. So I built a little field type to provide an easy way to manage these in your page types.<div class=center><img alt=pyro-blurb-field src=/images/Screen-Shot-2013-03-13-at-3.38.21-PM.png></div><p>I also put the <a title="pyro-blurb field github" href=https://github.com/james2doyle/pyro-blurb-field>project on github</a> so that you can see it. It will also be on the PyroCMS Store.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Blurb Field | OhDoyleRules</title><meta content="Pyro Blurb Field | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Blurb Field" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-blurb-field/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-blurb-field/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Blurb Field" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A field for Pyrocms that allows you to create little blurbs in a list" name=description><meta content="A field for Pyrocms that allows you to create little blurbs in a list" itemprop=description><meta content="A field for Pyrocms that allows you to create little blurbs in a list" property=og:description><meta content="A field for Pyrocms that allows you to create little blurbs in a list" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Blurb Field | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, blurb, field, cms, php, sections, title, link, website, body, content, text" itemprop=keywords><meta content="pyrocms, blurb, field, cms, php, sections, title, link, website, body, content, text" property=article:tag><meta content="pyrocms, blurb, field, cms, php, sections, title, link, website, body, content, text" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-blurb-field/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Blurb Field</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another new field type for <a rel="noopener nofollow noreferrer" title="PyroCMS Website" href=http://pyrocms.com target=_blank>PyroCMS</a>.<div class=center><img alt=pyro-blurb-field src=/images/Screen-Shot-2013-03-13-at-3.38.39-PM.png></div><p>This one is for doing little "blurb" sections. Essentially I keep seeing little title+image+body components. Like testimonials, user profiles, portfolio snippets. These all follow a title+image+body format. So I built a little field type to provide an easy way to manage these in your page types.<div class=center><img alt=pyro-blurb-field src=/images/Screen-Shot-2013-03-13-at-3.38.21-PM.png></div><p>I also put the <a rel="noopener nofollow noreferrer" title="pyro-blurb field github" href=https://github.com/james2doyle/pyro-blurb-field target=_blank>project on github</a> so that you can see it. It will also be on the PyroCMS Store.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-github-markdown/index.html b/docs/personal-project/pyro-github-markdown/index.html
index a682bc6..59239d7 100644
--- a/docs/personal-project/pyro-github-markdown/index.html
+++ b/docs/personal-project/pyro-github-markdown/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Github Markdown Field Type | OhDoyleRules</title><meta content="Pyro Github Markdown Field Type | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Github Markdown Field Type" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-github-markdown/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-github-markdown/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Github Markdown Field Type" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Pyro Github Markdown Field Type" name=description><meta content="Pyro Github Markdown Field Type" itemprop=description><meta content="Pyro Github Markdown Field Type" property=og:description><meta content="Pyro Github Markdown Field Type" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Github Markdown Field Type | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, github, markdownd, field, php, codeigniter" itemprop=keywords><meta content="pyrocms, github, markdownd, field, php, codeigniter" property=article:tag><meta content="pyrocms, github, markdownd, field, php, codeigniter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-github-markdown/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Github Markdown Field Type</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Github flavoured markdown field type for PyroCMS.<p>Here is the link to the <a title="pyro-github-markdown field type" href=https://github.com/james2doyle/pyro-github-markdown>Github Repo</a>.<p>Most of the work for this repo is taken from <a href=https://github.com/evansolomon/wp-github-flavored-markdown-comments>GitHub-Flavored Markdown Comments</a> plugin for Wordpress. That repository is also based on <a href=https://github.com/michelf/php-markdown/>Michel Fortin's PHP markdown library</a> with added features from <a href=https://github.com/github/github-flavored-markdown>GitHub-flavored Markdown</a>.<p><em>All I did was just bring it all together and make it play nice with Pyro.</em><h3 id=usage><a href=https://ohdoylerules.com/personal-project/pyro-github-markdown/#usage></a>Usage</h3><ul><li>Install the field type as normal.<li>Add the field type to a page type or stream<li>Enter in your sexy Github Markdown<li>Just use "the_field_slug" to render the HTML</ul><h3 id=examples><a href=https://ohdoylerules.com/personal-project/pyro-github-markdown/#examples></a>Examples</h3><p>Input:<pre class=language-markdown data-lang=markdown style=background:#2b303b;color:#c0c5ce><code class=language-markdown data-lang=markdown><span>GitHub-Flavored Markdown Comments
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Github Markdown Field Type | OhDoyleRules</title><meta content="Pyro Github Markdown Field Type | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Github Markdown Field Type" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-github-markdown/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-github-markdown/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Github Markdown Field Type" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Pyro Github Markdown Field Type" name=description><meta content="Pyro Github Markdown Field Type" itemprop=description><meta content="Pyro Github Markdown Field Type" property=og:description><meta content="Pyro Github Markdown Field Type" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Github Markdown Field Type | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, github, markdownd, field, php, codeigniter" itemprop=keywords><meta content="pyrocms, github, markdownd, field, php, codeigniter" property=article:tag><meta content="pyrocms, github, markdownd, field, php, codeigniter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-github-markdown/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Github Markdown Field Type</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Github flavoured markdown field type for PyroCMS.<p>Here is the link to the <a rel="noopener nofollow noreferrer" title="pyro-github-markdown field type" href=https://github.com/james2doyle/pyro-github-markdown target=_blank>Github Repo</a>.<p>Most of the work for this repo is taken from <a rel="noopener nofollow noreferrer" href=https://github.com/evansolomon/wp-github-flavored-markdown-comments target=_blank>GitHub-Flavored Markdown Comments</a> plugin for Wordpress. That repository is also based on <a rel="noopener nofollow noreferrer" href=https://github.com/michelf/php-markdown/ target=_blank>Michel Fortin's PHP markdown library</a> with added features from <a rel="noopener nofollow noreferrer" href=https://github.com/github/github-flavored-markdown target=_blank>GitHub-flavored Markdown</a>.<p><em>All I did was just bring it all together and make it play nice with Pyro.</em><h3 id=usage><a href=https://ohdoylerules.com/personal-project/pyro-github-markdown/#usage></a>Usage</h3><ul><li>Install the field type as normal.<li>Add the field type to a page type or stream<li>Enter in your sexy Github Markdown<li>Just use "the_field_slug" to render the HTML</ul><h3 id=examples><a href=https://ohdoylerules.com/personal-project/pyro-github-markdown/#examples></a>Examples</h3><p>Input:<pre class=language-markdown data-lang=markdown style=background:#2b303b;color:#c0c5ce><code class=language-markdown data-lang=markdown><span>GitHub-Flavored Markdown Comments
 </span><span style=color:#8fa1b3>=============================
 </span><span>
 </span><span>Based on </span><span style=color:#d08770>[Michel Fortin's PHP markdown library](https://github.com/michelf/php-markdown/)</span><span> with added features from </span><span style=color:#d08770>[GitHub-flavored Markdown](https://github.com/github/github-flavored-markdown)</span><span>.
@@ -21,4 +21,6 @@
 </span><span><</span><span style=color:#bf616a>h3</span><span>>Heading 3&LT/</span><span style=color:#bf616a>h3</span><span>>
 </span><span>
 </span><span><</span><span style=color:#bf616a>p</span><span>>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&LT/</span><span style=color:#bf616a>p</span><span>>
-</span></code></pre><h3 id=more-info><a href=https://ohdoylerules.com/personal-project/pyro-github-markdown/#more-info></a>More Info!</h3><p>If you need to know more about the caveats of this plugin, please <a href=https://github.com/evansolomon/wp-github-flavored-markdown-comments/blob/master/README.md>see the README</a> for the original lib.<h3 id=update>UPDATE</h3><p>I added the ability to preview your results too!<p><a href=https://github.com/james2doyle/pyro-github-markdown><img alt="pyro github markdown write preview" src=/images/write.png></a> <a href=https://github.com/james2doyle/pyro-github-markdown><img alt="pyro github markdown preview" src=/images/preview.png></a> Go check out this badboy!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><h3 id=more-info><a href=https://ohdoylerules.com/personal-project/pyro-github-markdown/#more-info></a>More Info!</h3><p>If you need to know more about the caveats of this plugin, please <a rel="noopener nofollow noreferrer" href=https://github.com/evansolomon/wp-github-flavored-markdown-comments/blob/master/README.md target=_blank>see the README</a> for the original lib.<h3 id=update>UPDATE</h3><p>I added the ability to preview your results too!<p><a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pyro-github-markdown target=_blank><img alt="pyro github markdown write
+preview" decoding=async loading=lazy src=/images/write.png></a> <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pyro-github-markdown target=_blank><img alt="pyro github markdown
+preview" decoding=async loading=lazy src=/images/preview.png></a> Go check out this badboy!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-image-select-field/index.html b/docs/personal-project/pyro-image-select-field/index.html
index b53641d..135608a 100644
--- a/docs/personal-project/pyro-image-select-field/index.html
+++ b/docs/personal-project/pyro-image-select-field/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Image Select Field | OhDoyleRules</title><meta content="Pyro Image Select Field | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Image Select Field" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-image-select-field/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-image-select-field/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Image Select Field" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A field for Pyro CMS that allows you to select images from your uploads" name=description><meta content="A field for Pyro CMS that allows you to select images from your uploads" itemprop=description><meta content="A field for Pyro CMS that allows you to select images from your uploads" property=og:description><meta content="A field for Pyro CMS that allows you to select images from your uploads" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Image Select Field | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, image, field, select, thumbnail, display, picker, chooser, pyro, php" itemprop=keywords><meta content="pyrocms, image, field, select, thumbnail, display, picker, chooser, pyro, php" property=article:tag><meta content="pyrocms, image, field, select, thumbnail, display, picker, chooser, pyro, php" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-image-select-field/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Image Select Field</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Another <a title="PyroCMS Website" href=http://pyrocms.com>PyroCMS</a> field type. This one is called Image Select. Why? Because it does exactly that. It lets you select images. But wait! There is already an image field type. Yes, but that is for uploading images. Sometimes you just want to choose and image you already have. An image drop down is good for this.<div class=center><img alt="pyro image select screen3" src=/images/screen3.png></div><p>I think a nice grid with thumbnail previews is even better!! I have the project <a title="pyro image select github page" href=https://github.com/james2doyle/pyro-image-select>hosted on github</a>. It will also be submitted to the PyroCMS store.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Image Select Field | OhDoyleRules</title><meta content="Pyro Image Select Field | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Image Select Field" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-image-select-field/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-image-select-field/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Image Select Field" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A field for Pyro CMS that allows you to select images from your uploads" name=description><meta content="A field for Pyro CMS that allows you to select images from your uploads" itemprop=description><meta content="A field for Pyro CMS that allows you to select images from your uploads" property=og:description><meta content="A field for Pyro CMS that allows you to select images from your uploads" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Image Select Field | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, image, field, select, thumbnail, display, picker, chooser, pyro, php" itemprop=keywords><meta content="pyrocms, image, field, select, thumbnail, display, picker, chooser, pyro, php" property=article:tag><meta content="pyrocms, image, field, select, thumbnail, display, picker, chooser, pyro, php" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-image-select-field/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Image Select Field</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Another <a rel="noopener nofollow noreferrer" title="PyroCMS Website" href=http://pyrocms.com target=_blank>PyroCMS</a> field type. This one is called Image Select. Why? Because it does exactly that. It lets you select images. But wait! There is already an image field type. Yes, but that is for uploading images. Sometimes you just want to choose and image you already have. An image drop down is good for this.<div class=center><img alt="pyro image select screen3" src=/images/screen3.png></div><p>I think a nice grid with thumbnail previews is even better!! I have the project <a rel="noopener nofollow noreferrer" title="pyro image select github page" href=https://github.com/james2doyle/pyro-image-select target=_blank>hosted on github</a>. It will also be submitted to the PyroCMS store.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-image-widget/index.html b/docs/personal-project/pyro-image-widget/index.html
index 22ee253..5612962 100644
--- a/docs/personal-project/pyro-image-widget/index.html
+++ b/docs/personal-project/pyro-image-widget/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Image Widget | OhDoyleRules</title><meta content="Pyro Image Widget | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Image Widget" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-image-widget/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-image-widget/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Image Widget" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A widget for Pyro CMS for creating Image sections" name=description><meta content="A widget for Pyro CMS for creating Image sections" itemprop=description><meta content="A widget for Pyro CMS for creating Image sections" property=og:description><meta content="A widget for Pyro CMS for creating Image sections" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Image Widget | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, image, widget, php, codeigniter" itemprop=keywords><meta content="pyrocms, image, widget, php, codeigniter" property=article:tag><meta content="pyrocms, image, widget, php, codeigniter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-image-widget/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Image Widget</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a small image widget for PyroCMS. It allows a user to choose any image in the files as a widget. It also allows you to add a link and a target so it can be opened in a new tab. Here is <a title="Pyro Image Widget Github" href=https://github.com/james2doyle/pyro-image-widget>the github link</a> and the <a title="Pyro Image Widget" href=https://www.pyrocms.com/store/details/pyro_image_widget>PyroCMS store link</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Image Widget | OhDoyleRules</title><meta content="Pyro Image Widget | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Image Widget" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-image-widget/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-image-widget/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Image Widget" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A widget for Pyro CMS for creating Image sections" name=description><meta content="A widget for Pyro CMS for creating Image sections" itemprop=description><meta content="A widget for Pyro CMS for creating Image sections" property=og:description><meta content="A widget for Pyro CMS for creating Image sections" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Image Widget | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, image, widget, php, codeigniter" itemprop=keywords><meta content="pyrocms, image, widget, php, codeigniter" property=article:tag><meta content="pyrocms, image, widget, php, codeigniter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-image-widget/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Image Widget</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a small image widget for PyroCMS. It allows a user to choose any image in the files as a widget. It also allows you to add a link and a target so it can be opened in a new tab. Here is <a rel="noopener nofollow noreferrer" title="Pyro Image Widget Github" href=https://github.com/james2doyle/pyro-image-widget target=_blank>the github link</a> and the <a rel="noopener nofollow noreferrer" title="Pyro Image Widget" href=https://www.pyrocms.com/store/details/pyro_image_widget target=_blank>PyroCMS store link</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-list-field/index.html b/docs/personal-project/pyro-list-field/index.html
index 2fd4ce2..9883890 100644
--- a/docs/personal-project/pyro-list-field/index.html
+++ b/docs/personal-project/pyro-list-field/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro List Field | OhDoyleRules</title><meta content="Pyro List Field | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro List Field" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-list-field/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-list-field/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro List Field" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A field for Pyro CMS that allows the creation of Lists" name=description><meta content="A field for Pyro CMS that allows the creation of Lists" itemprop=description><meta content="A field for Pyro CMS that allows the creation of Lists" property=og:description><meta content="A field for Pyro CMS that allows the creation of Lists" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro List Field | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, list, field, php, code igniter" itemprop=keywords><meta content="pyrocms, list, field, php, code igniter" property=article:tag><meta content="pyrocms, list, field, php, code igniter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-list-field/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro List Field</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a list field type for PyroCMS. It allows users to easily add and manage list content. The source code is up <a title="Pyro List Field" href=https://github.com/james2doyle/pyro-list-field>on github</a> and avaliable on the <a title="PyroCMS Store List Field Type" href=https://www.pyrocms.com/store/details/list_field_type>PyroCMS store</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro List Field | OhDoyleRules</title><meta content="Pyro List Field | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro List Field" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-list-field/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-list-field/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro List Field" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A field for Pyro CMS that allows the creation of Lists" name=description><meta content="A field for Pyro CMS that allows the creation of Lists" itemprop=description><meta content="A field for Pyro CMS that allows the creation of Lists" property=og:description><meta content="A field for Pyro CMS that allows the creation of Lists" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro List Field | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, list, field, php, code igniter" itemprop=keywords><meta content="pyrocms, list, field, php, code igniter" property=article:tag><meta content="pyrocms, list, field, php, code igniter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-list-field/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro List Field</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a list field type for PyroCMS. It allows users to easily add and manage list content. The source code is up <a rel="noopener nofollow noreferrer" title="Pyro List Field" href=https://github.com/james2doyle/pyro-list-field target=_blank>on github</a> and avaliable on the <a rel="noopener nofollow noreferrer" title="PyroCMS Store List Field Type" href=https://www.pyrocms.com/store/details/list_field_type target=_blank>PyroCMS store</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-module-generator-2/index.html b/docs/personal-project/pyro-module-generator-2/index.html
index babc61a..0f3c496 100644
--- a/docs/personal-project/pyro-module-generator-2/index.html
+++ b/docs/personal-project/pyro-module-generator-2/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PyroCMS Module Generator 2.0 | OhDoyleRules</title><meta content="PyroCMS Module Generator 2.0 | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PyroCMS Module Generator 2.0" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-module-generator-2/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-module-generator-2/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PyroCMS Module Generator 2.0" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up" name=description><meta content="The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up" itemprop=description><meta content="The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up" property=og:description><meta content="The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PyroCMS Module Generator 2.0 | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Phalcon, generator, Github, module, open source, PHP, Pyro, tool, build, live, demo" itemprop=keywords><meta content="Phalcon, generator, Github, module, open source, PHP, Pyro, tool, build, live, demo" property=article:tag><meta content="Phalcon, generator, Github, module, open source, PHP, Pyro, tool, build, live, demo" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PyroCMS Module Generator 2.0</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 16, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Finally, I found a good excuse to re-write my old <a href=https://ohdoylerules.com/personal-project/pyro-module-generator>Pyro Module Generator</a>.<p>This tool was originally made when I was freelancing. I built it off the <a href=https://github.com/pyrocms/sample>Sample Module project on Github</a>. I wanted to be able to build modules quickly, since I wasn't using streams. In fact, streams wasn't even a thing when I made the first version of the module generator.<p>Again, I have made a <a title="PyroCMS Module Generator Website" href=http://dev.warpaintmedia.ca/pyro-module-generator/>live hosted version of the generator</a> which you can use without having to have anything setup locally. The generated module is zipped and then ready for download.<p>The <a title="PyroCMS Module Generator On Github" href=https://github.com/james2doyle/pyro-module-generator>source is also on Github</a> for people who want to patch issues or fork.<h3 id=about-version-2-0>About Version 2.0</h3><p>This new version is built with <a href=http://phalconphp.com/en/>PhalconPHP</a> because phalcon is crazy fast and easy to make small apps with. I managed to get the whole thing re-written in a day. Much of the code was a copy paste for the build process. But now the <code>Add Field</code> button is actually an AJAX call to generate a new partial for the new field. This is much nicer than the pervious version.<p>That being said, <strong>YOU MUST HAVE PHALCONPHP INSTALLED TO USE THIS APP!!</strong>.<p>There are a few little things I need to refactor, so that when 3.0 comes out, it will be easy to switch between the different versions of Pyro.<h3 id=usage>Usage</h3><p>Just throw it in your localhost root and point your browser to it. There is no database, since it just writes and renames files for you.<p>If you have <strong>used a custom folder name</strong> (and didn't just clone as <code>pyro-module-generator</code>), then open the <a href=https://github.com/james2doyle/pyro-module-generator/blob/master/config/config.php#L7>config/config.php and change the baseUri</a> to match that folder name.<h5 id=writeable-folders>Writeable Folders</h5><p>We need to run <code>chmod -R 777 cache/volt</code> and <code>chmod -R 777 public/generated</code> if you have write errors.<ul><li>cache/volt/<li>public/generated/</ul><h4 id=genrated-modules>Genrated Modules</h4><p><strong>Included in all generated modules is the following setup:</strong><ul><li><code>ID</code> field by default<li><code>order</code> field by default<li>functionality for drag and drop table order (add <code>ui-sortable-container</code> to <code>tbody</code> in admin index view)<li>basic function for files included but commented out<li><code>_form_data</code> function for passing data to form views<li>settings table included, but commented out</ul><p>The generated module gets put in the <code>public/generated/</code> folder. As well as the Zip file.<div class=center><p>Screenshot of the current version of the app</p><a title="PyroCMS Module Generator Screenshot" href=/images/pmg2.jpeg target=_blank><img alt="PyroCMS Module Generator Screenshot" src=/images/pmg2.jpeg></a></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PyroCMS Module Generator 2.0 | OhDoyleRules</title><meta content="PyroCMS Module Generator 2.0 | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PyroCMS Module Generator 2.0" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-module-generator-2/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-module-generator-2/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PyroCMS Module Generator 2.0" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up" name=description><meta content="The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up" itemprop=description><meta content="The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up" property=og:description><meta content="The Pyro Module Generator allows you to rapidly create modules for Pyro 2.2 and up" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PyroCMS Module Generator 2.0 | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Phalcon, generator, Github, module, open source, PHP, Pyro, tool, build, live, demo" itemprop=keywords><meta content="Phalcon, generator, Github, module, open source, PHP, Pyro, tool, build, live, demo" property=article:tag><meta content="Phalcon, generator, Github, module, open source, PHP, Pyro, tool, build, live, demo" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-module-generator-2/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PyroCMS Module Generator 2.0</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 16, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Finally, I found a good excuse to re-write my old <a rel="noopener nofollow noreferrer" href=https://ohdoylerules.com/personal-project/pyro-module-generator target=_blank>Pyro Module Generator</a>.<p>This tool was originally made when I was freelancing. I built it off the <a rel="noopener nofollow noreferrer" href=https://github.com/pyrocms/sample target=_blank>Sample Module project on Github</a>. I wanted to be able to build modules quickly, since I wasn't using streams. In fact, streams wasn't even a thing when I made the first version of the module generator.<p>Again, I have made a <a rel="noopener nofollow noreferrer" title="PyroCMS Module Generator Website" href=http://dev.warpaintmedia.ca/pyro-module-generator/ target=_blank>live hosted version of the generator</a> which you can use without having to have anything setup locally. The generated module is zipped and then ready for download.<p>The <a rel="noopener nofollow noreferrer" title="PyroCMS Module Generator On Github" href=https://github.com/james2doyle/pyro-module-generator target=_blank>source is also on Github</a> for people who want to patch issues or fork.<h3 id=about-version-2-0>About Version 2.0</h3><p>This new version is built with <a rel="noopener nofollow noreferrer" href=http://phalconphp.com/en/ target=_blank>PhalconPHP</a> because phalcon is crazy fast and easy to make small apps with. I managed to get the whole thing re-written in a day. Much of the code was a copy paste for the build process. But now the <code>Add Field</code> button is actually an AJAX call to generate a new partial for the new field. This is much nicer than the pervious version.<p>That being said, <strong>YOU MUST HAVE PHALCONPHP INSTALLED TO USE THIS APP!!</strong>.<p>There are a few little things I need to refactor, so that when 3.0 comes out, it will be easy to switch between the different versions of Pyro.<h3 id=usage>Usage</h3><p>Just throw it in your localhost root and point your browser to it. There is no database, since it just writes and renames files for you.<p>If you have <strong>used a custom folder name</strong> (and didn't just clone as <code>pyro-module-generator</code>), then open the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pyro-module-generator/blob/master/config/config.php#L7 target=_blank>config/config.php and change the baseUri</a> to match that folder name.<h5 id=writeable-folders>Writeable Folders</h5><p>We need to run <code>chmod -R 777 cache/volt</code> and <code>chmod -R 777 public/generated</code> if you have write errors.<ul><li>cache/volt/<li>public/generated/</ul><h4 id=genrated-modules>Genrated Modules</h4><p><strong>Included in all generated modules is the following setup:</strong><ul><li><code>ID</code> field by default<li><code>order</code> field by default<li>functionality for drag and drop table order (add <code>ui-sortable-container</code> to <code>tbody</code> in admin index view)<li>basic function for files included but commented out<li><code>_form_data</code> function for passing data to form views<li>settings table included, but commented out</ul><p>The generated module gets put in the <code>public/generated/</code> folder. As well as the Zip file.<div class=center><p>Screenshot of the current version of the app</p><a title="PyroCMS Module Generator Screenshot" href=/images/pmg2.jpeg target=_blank><img alt="PyroCMS Module Generator Screenshot" src=/images/pmg2.jpeg></a></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-module-generator/index.html b/docs/personal-project/pyro-module-generator/index.html
index b2c4045..e2e23de 100644
--- a/docs/personal-project/pyro-module-generator/index.html
+++ b/docs/personal-project/pyro-module-generator/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PyroCMS Module Generator | OhDoyleRules</title><meta content="PyroCMS Module Generator | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PyroCMS Module Generator" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-module-generator/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-module-generator/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PyroCMS Module Generator" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="PyroCMS Module Generator that can generate modules for pyrocms" name=description><meta content="PyroCMS Module Generator that can generate modules for pyrocms" itemprop=description><meta content="PyroCMS Module Generator that can generate modules for pyrocms" property=og:description><meta content="PyroCMS Module Generator that can generate modules for pyrocms" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PyroCMS Module Generator | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" itemprop=keywords><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" property=article:tag><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-module-generator/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PyroCMS Module Generator</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="PyroCMS Module generator header image" src=/images/pmgh.png></div><h3 id=update>UPDATE</h3><p>I created a <a title="Hosted Pyro Module Generator" href=http://pyromg.aws.af.cm/>hosted version</a> of the module generator.<p>FINALLY!! I finished my module generator. It lets you create modules by just filling in a simple form. The module it generates can be used with 2.2. There is no support for any other version at this time.<p><a href="http://www.youtube.com/watch?v=g7moZUqIwHU" title="Pyro Module generator video">See the Video</a> or go to the <a href=https://github.com/james2doyle/pyro-module-generator title=james2doyle/pyro-module-generator>github repo</a>.<p>The “app” is just installed to your localhost. It uses no database and relies strictly on writing files and reading files.<p>It is built using <a title="Laravel Homepage" href=http://laravel.com/>Laravel</a> because Pyro is eventually going to move to Laravel. It is kind of funny that a Laravel based app is building a CodeIgniter based CMS! Hehehee.<p>There is a lot of extra junk in there now just because I may create a dedicated site for it. I also want to make it more dynamic for when you are creating dropdown/multiselect and radio/checkbox inputs. But that depends. Right now it can just run locally and be used/customized that way.<p>This is actually my fourth iteration of the generator. I created one with no framework, just straight PHP. That was rough. Then I made one with just CodeIgniter. It was a little better. Next, I went kind of crazy and made a PHP command line tool. It can actually make plugins and widgets quite nicely.<p>In the end I chose Laravel because I might as well start learning it and it was pretty easy to use. Sp please <a href=https://github.com/james2doyle/pyro-module-generator title=james2doyle/pyro-module-generator>check it out</a> and help clean it up if you can.<p>Some little screenshots:<div class=center><img alt="PyroCMS Module generator input form" src=/images/pmg1.png><img alt="PyroCMS Module generator field input" src=/images/pmg2.png></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PyroCMS Module Generator | OhDoyleRules</title><meta content="PyroCMS Module Generator | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PyroCMS Module Generator" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-module-generator/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-module-generator/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PyroCMS Module Generator" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="PyroCMS Module Generator that can generate modules for pyrocms" name=description><meta content="PyroCMS Module Generator that can generate modules for pyrocms" itemprop=description><meta content="PyroCMS Module Generator that can generate modules for pyrocms" property=og:description><meta content="PyroCMS Module Generator that can generate modules for pyrocms" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PyroCMS Module Generator | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" itemprop=keywords><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" property=article:tag><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-module-generator/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PyroCMS Module Generator</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="PyroCMS Module generator header image" src=/images/pmgh.png></div><h3 id=update>UPDATE</h3><p>I created a <a rel="noopener nofollow noreferrer" title="Hosted Pyro Module Generator" href=http://pyromg.aws.af.cm/ target=_blank>hosted version</a> of the module generator.<p>FINALLY!! I finished my module generator. It lets you create modules by just filling in a simple form. The module it generates can be used with 2.2. There is no support for any other version at this time.<p><a href="http://www.youtube.com/watch?v=g7moZUqIwHU" rel="noopener nofollow noreferrer" title="Pyro Module generator video" target=_blank>See the Video</a> or go to the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pyro-module-generator target=_blank title=james2doyle/pyro-module-generator>github repo</a>.<p>The “app” is just installed to your localhost. It uses no database and relies strictly on writing files and reading files.<p>It is built using <a rel="noopener nofollow noreferrer" title="Laravel Homepage" href=http://laravel.com/ target=_blank>Laravel</a> because Pyro is eventually going to move to Laravel. It is kind of funny that a Laravel based app is building a CodeIgniter based CMS! Hehehee.<p>There is a lot of extra junk in there now just because I may create a dedicated site for it. I also want to make it more dynamic for when you are creating dropdown/multiselect and radio/checkbox inputs. But that depends. Right now it can just run locally and be used/customized that way.<p>This is actually my fourth iteration of the generator. I created one with no framework, just straight PHP. That was rough. Then I made one with just CodeIgniter. It was a little better. Next, I went kind of crazy and made a PHP command line tool. It can actually make plugins and widgets quite nicely.<p>In the end I chose Laravel because I might as well start learning it and it was pretty easy to use. Sp please <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pyro-module-generator target=_blank title=james2doyle/pyro-module-generator>check it out</a> and help clean it up if you can.<p>Some little screenshots:<div class=center><img alt="PyroCMS Module generator input form" src=/images/pmg1.png><img alt="PyroCMS Module generator field input" src=/images/pmg2.png></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-swipe-js-module/index.html b/docs/personal-project/pyro-swipe-js-module/index.html
index edeaa73..9e61e5e 100644
--- a/docs/personal-project/pyro-swipe-js-module/index.html
+++ b/docs/personal-project/pyro-swipe-js-module/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Swipe.js Module | OhDoyleRules</title><meta content="Pyro Swipe.js Module | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Swipe.js Module" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Swipe.js Module" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A module for Pyro CMS that wraps up the Swipe.js Module" name=description><meta content="A module for Pyro CMS that wraps up the Swipe.js Module" itemprop=description><meta content="A module for Pyro CMS that wraps up the Swipe.js Module" property=og:description><meta content="A module for Pyro CMS that wraps up the Swipe.js Module" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Swipe.js Module | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="code igniter, CodeIgniter, js, module, PHP, Plugin, PyroCMS, slider, swipe" itemprop=keywords><meta content="code igniter, CodeIgniter, js, module, PHP, Plugin, PyroCMS, slider, swipe" property=article:tag><meta content="code igniter, CodeIgniter, js, module, PHP, Plugin, PyroCMS, slider, swipe" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Swipe.js Module</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Yep, another module. This one is for the awesome <a href=https://github.com/bradbirdsall/Swipe title=bradbirdsall/Swipe>Swipe.js library</a>. Swipe is amazing because it is touch-capable, lightweight and has no dependencies(no jQuery). This module allows users to create multiple slideshows just by choosing a folder they want to pull the images from.<p>Then using the modules plugin, they can call it anywhere on a page.<p>Here is is <a href=https://github.com/james2doyle/pyro-swipe-module title=james2doyle/pyro-swipe-module>on github</a>.<p>It should also make it to the PyroCMS store.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Swipe.js Module | OhDoyleRules</title><meta content="Pyro Swipe.js Module | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Swipe.js Module" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Swipe.js Module" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A module for Pyro CMS that wraps up the Swipe.js Module" name=description><meta content="A module for Pyro CMS that wraps up the Swipe.js Module" itemprop=description><meta content="A module for Pyro CMS that wraps up the Swipe.js Module" property=og:description><meta content="A module for Pyro CMS that wraps up the Swipe.js Module" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Swipe.js Module | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="code igniter, CodeIgniter, js, module, PHP, Plugin, PyroCMS, slider, swipe" itemprop=keywords><meta content="code igniter, CodeIgniter, js, module, PHP, Plugin, PyroCMS, slider, swipe" property=article:tag><meta content="code igniter, CodeIgniter, js, module, PHP, Plugin, PyroCMS, slider, swipe" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-swipe-js-module/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Swipe.js Module</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 13, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Yep, another module. This one is for the awesome <a rel="noopener nofollow noreferrer" href=https://github.com/bradbirdsall/Swipe target=_blank title=bradbirdsall/Swipe>Swipe.js library</a>. Swipe is amazing because it is touch-capable, lightweight and has no dependencies(no jQuery). This module allows users to create multiple slideshows just by choosing a folder they want to pull the images from.<p>Then using the modules plugin, they can call it anywhere on a page.<p>Here is is <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pyro-swipe-module target=_blank title=james2doyle/pyro-swipe-module>on github</a>.<p>It should also make it to the PyroCMS store.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyro-twitter-widget/index.html b/docs/personal-project/pyro-twitter-widget/index.html
index d3229b7..f2452c4 100644
--- a/docs/personal-project/pyro-twitter-widget/index.html
+++ b/docs/personal-project/pyro-twitter-widget/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Twitter Widget | OhDoyleRules</title><meta content="Pyro Twitter Widget | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Twitter Widget" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-twitter-widget/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-twitter-widget/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Twitter Widget" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Pyro Twitter Widget" name=description><meta content="Pyro Twitter Widget" itemprop=description><meta content="Pyro Twitter Widget" property=og:description><meta content="Pyro Twitter Widget" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Twitter Widget | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyro, pyrocms, twitter, widget, oauth, 1.1, api, support" itemprop=keywords><meta content="pyro, pyrocms, twitter, widget, oauth, 1.1, api, support" property=article:tag><meta content="pyro, pyrocms, twitter, widget, oauth, 1.1, api, support" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Twitter Widget</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 08, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another widget for PyroCMS. This one is for Twitter. I didn't find one that I liked or thought was very good, so I created my own. This widget actually uses a 3rd party sub-module, for the Twitter authentication, called <a href=https://github.com/J7mbo/twitter-api-php title=J7mbo/twitter-api-php>twitter-api-php</a>.<p>Here are the current supported (basically just tested) API endpoints:<ul><li>statuses/mentions_timeline<li>statuses/user_timeline<li>statuses/home_timeline<li>statuses/retweetsofme<li>favorites/list</ul><p>Here is the <a href=https://github.com/james2doyle/pyro-twitter-widget title=james2doyle/pyro-twitter-widget>widget on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Pyro Twitter Widget | OhDoyleRules</title><meta content="Pyro Twitter Widget | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Pyro Twitter Widget" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyro-twitter-widget/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyro-twitter-widget/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Pyro Twitter Widget" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Pyro Twitter Widget" name=description><meta content="Pyro Twitter Widget" itemprop=description><meta content="Pyro Twitter Widget" property=og:description><meta content="Pyro Twitter Widget" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Pyro Twitter Widget | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyro, pyrocms, twitter, widget, oauth, 1.1, api, support" itemprop=keywords><meta content="pyro, pyrocms, twitter, widget, oauth, 1.1, api, support" property=article:tag><meta content="pyro, pyrocms, twitter, widget, oauth, 1.1, api, support" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyro-twitter-widget/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Pyro Twitter Widget</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 08, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another widget for PyroCMS. This one is for Twitter. I didn't find one that I liked or thought was very good, so I created my own. This widget actually uses a 3rd party sub-module, for the Twitter authentication, called <a rel="noopener nofollow noreferrer" href=https://github.com/J7mbo/twitter-api-php target=_blank title=J7mbo/twitter-api-php>twitter-api-php</a>.<p>Here are the current supported (basically just tested) API endpoints:<ul><li>statuses/mentions_timeline<li>statuses/user_timeline<li>statuses/home_timeline<li>statuses/retweetsofme<li>favorites/list</ul><p>Here is the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pyro-twitter-widget target=_blank title=james2doyle/pyro-twitter-widget>widget on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyrocms-pagewidgets-field-type/index.html b/docs/personal-project/pyrocms-pagewidgets-field-type/index.html
index 7cec90b..26bed7e 100644
--- a/docs/personal-project/pyrocms-pagewidgets-field-type/index.html
+++ b/docs/personal-project/pyrocms-pagewidgets-field-type/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PyroCMS PageWidgets Field Type | OhDoyleRules</title><meta content="PyroCMS PageWidgets Field Type | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PyroCMS PageWidgets Field Type" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PyroCMS PageWidgets Field Type" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="PyroCMS PageWidgets Field Type" name=description><meta content="PyroCMS PageWidgets Field Type" itemprop=description><meta content="PyroCMS PageWidgets Field Type" property=og:description><meta content="PyroCMS PageWidgets Field Type" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PyroCMS PageWidgets Field Type | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, pyro, php, page, widgets, pagewidgets, field, type" itemprop=keywords><meta content="pyrocms, pyro, php, page, widgets, pagewidgets, field, type" property=article:tag><meta content="pyrocms, pyro, php, page, widgets, pagewidgets, field, type" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PyroCMS PageWidgets Field Type</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 05, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another field type for <a title="PyroCMS Website" href=https://www.pyrocms.com/>PyroCMS</a>. This one is so you can add widgets on a page-by-page basis instead of area-by-area.<p>I kept getting asked by clients for this feature, and with the advent of the new page type and field types this is a lot easier. The source is on <a href=https://github.com/james2doyle/pyro-pagewidgets-field title=pyro-pagewidgets-field>github</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PyroCMS PageWidgets Field Type | OhDoyleRules</title><meta content="PyroCMS PageWidgets Field Type | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PyroCMS PageWidgets Field Type" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PyroCMS PageWidgets Field Type" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="PyroCMS PageWidgets Field Type" name=description><meta content="PyroCMS PageWidgets Field Type" itemprop=description><meta content="PyroCMS PageWidgets Field Type" property=og:description><meta content="PyroCMS PageWidgets Field Type" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PyroCMS PageWidgets Field Type | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, pyro, php, page, widgets, pagewidgets, field, type" itemprop=keywords><meta content="pyrocms, pyro, php, page, widgets, pagewidgets, field, type" property=article:tag><meta content="pyrocms, pyro, php, page, widgets, pagewidgets, field, type" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyrocms-pagewidgets-field-type/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PyroCMS PageWidgets Field Type</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 05, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another field type for <a rel="noopener nofollow noreferrer" title="PyroCMS Website" href=https://www.pyrocms.com/ target=_blank>PyroCMS</a>. This one is so you can add widgets on a page-by-page basis instead of area-by-area.<p>I kept getting asked by clients for this feature, and with the advent of the new page type and field types this is a lot easier. The source is on <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/pyro-pagewidgets-field target=_blank title=pyro-pagewidgets-field>github</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/pyrocms-ua-sniffer-plugin/index.html b/docs/personal-project/pyrocms-ua-sniffer-plugin/index.html
index 392ca4d..b6e2d57 100644
--- a/docs/personal-project/pyrocms-ua-sniffer-plugin/index.html
+++ b/docs/personal-project/pyrocms-ua-sniffer-plugin/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PyroCMS UA Sniffer Plugin | OhDoyleRules</title><meta content="PyroCMS UA Sniffer Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PyroCMS UA Sniffer Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PyroCMS UA Sniffer Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A plugin for PyroCMS that allows UA Sniffing" name=description><meta content="A plugin for PyroCMS that allows UA Sniffing" itemprop=description><meta content="A plugin for PyroCMS that allows UA Sniffing" property=og:description><meta content="A plugin for PyroCMS that allows UA Sniffing" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PyroCMS UA Sniffer Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, plugin, sniff, useragent, php, code igniter" itemprop=keywords><meta content="pyrocms, plugin, sniff, useragent, php, code igniter" property=article:tag><meta content="pyrocms, plugin, sniff, useragent, php, code igniter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PyroCMS UA Sniffer Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>This plugin lets you sniff information from the user agent for use in the frontend. I use it for adding classes or conditional loading of partials and templates.<p>You can see the <a title="pyro-sniffer-plugin github" href=https://github.com/james2doyle/pyro-sniffer-plugin>github repository here</a>.<p>This plugin is <strong>not</strong> built on the <a href=http://ellislab.com/codeigniter/user-guide/libraries/user_agent.html>CodeIgniter User Agent Library</a>.<p>The reason I did not use the built in CodeIgniter lib, was because Pyro is only going to have CodeIgniter for a few more months(right?!?!), and I also want to have the information returned in a different way. This plugin is pretty small and only really gets information that is helpful to be used in CSS and Javascript (CSS custom classes and js feature detection/fallbacks).<p>If you are looking for a plugin that uses the user agent library, check out <a href=https://www.pyrocms.com/store/details/agent_plugin>this plugin called Agent</a>.<h3 id=usage><a href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/#usage></a>Usage</h3><pre style=background:#2b303b;color:#c0c5ce><code><span>&LTbody class="\{\{ sniffer:get key="browser|platform|type" \}\}">
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PyroCMS UA Sniffer Plugin | OhDoyleRules</title><meta content="PyroCMS UA Sniffer Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PyroCMS UA Sniffer Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PyroCMS UA Sniffer Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A plugin for PyroCMS that allows UA Sniffing" name=description><meta content="A plugin for PyroCMS that allows UA Sniffing" itemprop=description><meta content="A plugin for PyroCMS that allows UA Sniffing" property=og:description><meta content="A plugin for PyroCMS that allows UA Sniffing" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PyroCMS UA Sniffer Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="pyrocms, plugin, sniff, useragent, php, code igniter" itemprop=keywords><meta content="pyrocms, plugin, sniff, useragent, php, code igniter" property=article:tag><meta content="pyrocms, plugin, sniff, useragent, php, code igniter" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PyroCMS UA Sniffer Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>This plugin lets you sniff information from the user agent for use in the frontend. I use it for adding classes or conditional loading of partials and templates.<p>You can see the <a rel="noopener nofollow noreferrer" title="pyro-sniffer-plugin github" href=https://github.com/james2doyle/pyro-sniffer-plugin target=_blank>github repository here</a>.<p>This plugin is <strong>not</strong> built on the <a rel="noopener nofollow noreferrer" href=http://ellislab.com/codeigniter/user-guide/libraries/user_agent.html target=_blank>CodeIgniter User Agent Library</a>.<p>The reason I did not use the built in CodeIgniter lib, was because Pyro is only going to have CodeIgniter for a few more months(right?!?!), and I also want to have the information returned in a different way. This plugin is pretty small and only really gets information that is helpful to be used in CSS and Javascript (CSS custom classes and js feature detection/fallbacks).<p>If you are looking for a plugin that uses the user agent library, check out <a rel="noopener nofollow noreferrer" href=https://www.pyrocms.com/store/details/agent_plugin target=_blank>this plugin called Agent</a>.<h3 id=usage><a href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/#usage></a>Usage</h3><pre style=background:#2b303b;color:#c0c5ce><code><span>&LTbody class="\{\{ sniffer:get key="browser|platform|type" \}\}">
 </span></code></pre><p>On my Mac running Google Chrome, this would return:<pre style=background:#2b303b;color:#c0c5ce><code><span>&LTbody class=" google-chrome mac desktop">
 </span></code></pre><p>On my iPhone, this would return:<pre style=background:#2b303b;color:#c0c5ce><code><span>&LTbody class=" apple-mobile-safari ios mobile">
 </span></code></pre><h4 id=conditional-content><a href=https://ohdoylerules.com/personal-project/pyrocms-ua-sniffer-plugin/#conditional-content></a>conditional content</h4><p>This works in 2.2/develop. Not sure about 2.3 or 2.1.<pre style=background:#2b303b;color:#c0c5ce><code><span>\{\{ if \{ sniffer:get key="type" \} == 'desktop' \}\}
diff --git a/docs/personal-project/rework-math/index.html b/docs/personal-project/rework-math/index.html
index 21641da..55d26c2 100644
--- a/docs/personal-project/rework-math/index.html
+++ b/docs/personal-project/rework-math/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>rework-math | OhDoyleRules</title><meta content="rework-math | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=rework-math itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/rework-math/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/rework-math/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=rework-math name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I created a plugin for rework that allows you to do simple math" name=description><meta content="I created a plugin for rework that allows you to do simple math" itemprop=description><meta content="I created a plugin for rework that allows you to do simple math" property=og:description><meta content="I created a plugin for rework that allows you to do simple math" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="rework-math | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="rework, math, css, preprocess, node, javascript" itemprop=keywords><meta content="rework, math, css, preprocess, node, javascript" property=article:tag><meta content="rework, math, css, preprocess, node, javascript" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/rework-math/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">rework-math</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a plugin for <a href=https://github.com/visionmedia/rework title=rework>Rework</a> CSS preprocessor to do math. Here is the <a href=https://github.com/james2doyle/rework-math title=rework-math>github repo</a>. It is also my first ever NPM package and it can be found on the website <a title="rework-math on NPM" href=https://npmjs.org/package/rework-math>here</a>.<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/* input */
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>rework-math | OhDoyleRules</title><meta content="rework-math | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=rework-math itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/rework-math/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/rework-math/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=rework-math name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I created a plugin for rework that allows you to do simple math" name=description><meta content="I created a plugin for rework that allows you to do simple math" itemprop=description><meta content="I created a plugin for rework that allows you to do simple math" property=og:description><meta content="I created a plugin for rework that allows you to do simple math" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="rework-math | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="rework, math, css, preprocess, node, javascript" itemprop=keywords><meta content="rework, math, css, preprocess, node, javascript" property=article:tag><meta content="rework, math, css, preprocess, node, javascript" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/rework-math/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">rework-math</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a plugin for <a rel="noopener nofollow noreferrer" href=https://github.com/visionmedia/rework target=_blank title=rework>Rework</a> CSS preprocessor to do math. Here is the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/rework-math target=_blank title=rework-math>github repo</a>. It is also my first ever NPM package and it can be found on the website <a rel="noopener nofollow noreferrer" title="rework-math on NPM" href=https://npmjs.org/package/rework-math target=_blank>here</a>.<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/* input */
 </span><span style=color:#bf616a>div </span><span>{
 </span><span>  padding: math(</span><span style=color:#d08770>5+5px</span><span>);
 </span><span>}
diff --git a/docs/personal-project/rework-shade/index.html b/docs/personal-project/rework-shade/index.html
index e290654..64976aa 100644
--- a/docs/personal-project/rework-shade/index.html
+++ b/docs/personal-project/rework-shade/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>rework-shade | OhDoyleRules</title><meta content="rework-shade | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=rework-shade itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/rework-shade/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/rework-shade/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=rework-shade name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A package for rework that allows a shade function" name=description><meta content="A package for rework that allows a shade function" itemprop=description><meta content="A package for rework that allows a shade function" property=og:description><meta content="A package for rework that allows a shade function" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="rework-shade | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="javascript, node, rework, shade, css" itemprop=keywords><meta content="javascript, node, rework, shade, css" property=article:tag><meta content="javascript, node, rework, shade, css" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/rework-shade/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">rework-shade</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another plugin for Rework that makes it easy to do lighten and darken functions. I called it <a title="rework-shade github" href=https://github.com/james2doyle/rework-shade>rework-shade</a>. This package is also available <a title="rework-shade on NPM" href=https://npmjs.org/package/rework-shade>on NPM here</a>.<p>Here is the basic usage.<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/* input */
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>rework-shade | OhDoyleRules</title><meta content="rework-shade | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=rework-shade itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/rework-shade/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/rework-shade/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=rework-shade name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A package for rework that allows a shade function" name=description><meta content="A package for rework that allows a shade function" itemprop=description><meta content="A package for rework that allows a shade function" property=og:description><meta content="A package for rework that allows a shade function" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="rework-shade | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="javascript, node, rework, shade, css" itemprop=keywords><meta content="javascript, node, rework, shade, css" property=article:tag><meta content="javascript, node, rework, shade, css" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/rework-shade/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">rework-shade</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created another plugin for Rework that makes it easy to do lighten and darken functions. I called it <a rel="noopener nofollow noreferrer" title="rework-shade github" href=https://github.com/james2doyle/rework-shade target=_blank>rework-shade</a>. This package is also available <a rel="noopener nofollow noreferrer" title="rework-shade on NPM" href=https://npmjs.org/package/rework-shade target=_blank>on NPM here</a>.<p>Here is the basic usage.<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#65737e>/* input */
 </span><span style=color:#bf616a>body </span><span>{
 </span><span>  padding: </span><span style=color:#d08770>10px</span><span>;
 </span><span>  background: </span><span style=color:#96b5b4>shade</span><span>(rgba(0, 0, 0, 0.5), </span><span style=color:#d08770>5</span><span>);
diff --git a/docs/personal-project/simple-binder/index.html b/docs/personal-project/simple-binder/index.html
index 6c35da7..51ef669 100644
--- a/docs/personal-project/simple-binder/index.html
+++ b/docs/personal-project/simple-binder/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Simple Binder | OhDoyleRules</title><meta content="Simple Binder | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Simple Binder" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/simple-binder/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/simple-binder/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Simple Binder" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="simplebinder is a zero dependency one-way databinder for javascript" name=description><meta content="simplebinder is a zero dependency one-way databinder for javascript" itemprop=description><meta content="simplebinder is a zero dependency one-way databinder for javascript" property=og:description><meta content="simplebinder is a zero dependency one-way databinder for javascript" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Simple Binder | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="data, binding, javascript, jquery, input, select, onchange, oninput, dependency" itemprop=keywords><meta content="data, binding, javascript, jquery, input, select, onchange, oninput, dependency" property=article:tag><meta content="data, binding, javascript, jquery, input, select, onchange, oninput, dependency" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/simple-binder/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Simple Binder</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>The other day I was working on a custom form that had a lot of javascript interaction. It got a little too far before I realized I should have been using something like <a href=http://angularjs.org/>Angular.js</a>. I was looking for a simple one-way databinding library, but I couldn't find anything that wasn't overkill.<p>So I created <a href=http://james2doyle.github.io/simplebinder/>Simple Binder</a>. Simple Binder is a zero dependency one-way databinder for javascript. The great thing about it is that, not only is it very simple, but it is super small as well. No dependencies is also nice.<p>Using the lib is pretty straightforward. Here is the markup required for a simplebinder element:<pre style=background:#2b303b;color:#c0c5ce><code><span>&LTp data-model="number">number&LT/p>
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Simple Binder | OhDoyleRules</title><meta content="Simple Binder | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Simple Binder" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/simple-binder/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/simple-binder/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Simple Binder" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="simplebinder is a zero dependency one-way databinder for javascript" name=description><meta content="simplebinder is a zero dependency one-way databinder for javascript" itemprop=description><meta content="simplebinder is a zero dependency one-way databinder for javascript" property=og:description><meta content="simplebinder is a zero dependency one-way databinder for javascript" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Simple Binder | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="data, binding, javascript, jquery, input, select, onchange, oninput, dependency" itemprop=keywords><meta content="data, binding, javascript, jquery, input, select, onchange, oninput, dependency" property=article:tag><meta content="data, binding, javascript, jquery, input, select, onchange, oninput, dependency" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/simple-binder/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Simple Binder</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 14, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>The other day I was working on a custom form that had a lot of javascript interaction. It got a little too far before I realized I should have been using something like <a rel="noopener nofollow noreferrer" href=http://angularjs.org/ target=_blank>Angular.js</a>. I was looking for a simple one-way databinding library, but I couldn't find anything that wasn't overkill.<p>So I created <a rel="noopener nofollow noreferrer" href=http://james2doyle.github.io/simplebinder/ target=_blank>Simple Binder</a>. Simple Binder is a zero dependency one-way databinder for javascript. The great thing about it is that, not only is it very simple, but it is super small as well. No dependencies is also nice.<p>Using the lib is pretty straightforward. Here is the markup required for a simplebinder element:<pre style=background:#2b303b;color:#c0c5ce><code><span>&LTp data-model="number">number&LT/p>
 </span><span>&LTinput type="number" data-controller="number" />
 </span></code></pre><p>As you can see, you must have a <em>data-model</em> and a <em>data-controller</em> set on your items. Models are like the destination for the data-controllers value.<p>This would be the javascript for this element:<pre style=background:#2b303b;color:#c0c5ce><code><span>var sb = SimpleBinder('number', function(input, model) {
 </span><span>  console.log(input.value);
@@ -14,4 +14,4 @@
 </span><span>}, function(input, model) {
 </span><span>  console.log(input.value);
 </span><span>});
-</span></code></pre><p>That's it. I will be adding the ability to remove a Model or Controller in the future. I tested this on a variety of devices. This library uses <code>querySelectorAll</code>, so if you don't have that... well you're fucked.<p>Check out the <a href=https://github.com/james2doyle/simplebinder>source on github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>That's it. I will be adding the ability to remove a Model or Controller in the future. I tested this on a variety of devices. This library uses <code>querySelectorAll</code>, so if you don't have that... well you're fucked.<p>Check out the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/simplebinder target=_blank>source on github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/startup-canada-svg/index.html b/docs/personal-project/startup-canada-svg/index.html
index d1582ef..1c69c95 100644
--- a/docs/personal-project/startup-canada-svg/index.html
+++ b/docs/personal-project/startup-canada-svg/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Startup Canada SVG logos | OhDoyleRules</title><meta content="Startup Canada SVG logos | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Startup Canada SVG logos" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/startup-canada-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/startup-canada-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Startup Canada SVG logos" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="All the Startup Canada SVG logos" name=description><meta content="All the Startup Canada SVG logos" itemprop=description><meta content="All the Startup Canada SVG logos" property=og:description><meta content="All the Startup Canada SVG logos" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Startup Canada SVG logos | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="startup, canada, london, svg, vector, ai, image, logo" itemprop=keywords><meta content="startup, canada, london, svg, vector, ai, image, logo" property=article:tag><meta content="startup, canada, london, svg, vector, ai, image, logo" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/startup-canada-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Startup Canada SVG logos</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I had to create these SVGs for the new <a href=http://spotlander.com title=Spotlander>Spotlander</a> website. They are 2 of them, one for the parent company; Startup Canada. The last one is for the divisions, in this case: Startup London. I figured I would share.<div class=center><a href=/images/startupcanada.svg target=_blank><img alt="startupcanada svg vector" src=/images/startupcanada.svg></a></div><div class=center><a href=/images/startuplondon.svg target=_blank><img alt="startuplondon svg vector" src=/images/startuplondon.svg></a></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Startup Canada SVG logos | OhDoyleRules</title><meta content="Startup Canada SVG logos | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Startup Canada SVG logos" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/startup-canada-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/startup-canada-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Startup Canada SVG logos" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="All the Startup Canada SVG logos" name=description><meta content="All the Startup Canada SVG logos" itemprop=description><meta content="All the Startup Canada SVG logos" property=og:description><meta content="All the Startup Canada SVG logos" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Startup Canada SVG logos | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="startup, canada, london, svg, vector, ai, image, logo" itemprop=keywords><meta content="startup, canada, london, svg, vector, ai, image, logo" property=article:tag><meta content="startup, canada, london, svg, vector, ai, image, logo" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/startup-canada-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Startup Canada SVG logos</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 29, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I had to create these SVGs for the new <a rel="noopener nofollow noreferrer" href=http://spotlander.com target=_blank title=Spotlander>Spotlander</a> website. They are 2 of them, one for the parent company; Startup Canada. The last one is for the divisions, in this case: Startup London. I figured I would share.<div class=center><a href=/images/startupcanada.svg target=_blank><img alt="startupcanada svg vector" src=/images/startupcanada.svg></a></div><div class=center><a href=/images/startuplondon.svg target=_blank><img alt="startuplondon svg vector" src=/images/startuplondon.svg></a></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/sublime-node-snippets/index.html b/docs/personal-project/sublime-node-snippets/index.html
index 0a394a2..a7e8120 100644
--- a/docs/personal-project/sublime-node-snippets/index.html
+++ b/docs/personal-project/sublime-node-snippets/index.html
@@ -1,10 +1,10 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Sublime Node Snippets | OhDoyleRules</title><meta content="Sublime Node Snippets | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Sublime Node Snippets" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/sublime-node-snippets/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/sublime-node-snippets/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Sublime Node Snippets" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Sublime Text snippets for node, async, underscore, and lodash" name=description><meta content="Sublime Text snippets for node, async, underscore, and lodash" itemprop=description><meta content="Sublime Text snippets for node, async, underscore, and lodash" property=og:description><meta content="Sublime Text snippets for node, async, underscore, and lodash" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Sublime Node Snippets | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="sublime text 3, snippets, javascript, node, async, underscore, lodash, completions, package control" itemprop=keywords><meta content="sublime text 3, snippets, javascript, node, async, underscore, lodash, completions, package control" property=article:tag><meta content="sublime text 3, snippets, javascript, node, async, underscore, lodash, completions, package control" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/sublime-node-snippets/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Sublime Node Snippets</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 25, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a <a href=https://sublime.wbond.net/packages/Node%20Completions>huge snippet library</a> based on the docs for node 10.26. There are <strong>783</strong> total right now (<em>2014-03-25</em>).<p>The way that I quickly made this big repository, was I wrote a script that would generate new sublime snippets based on a text file.<p>The <a href=https://github.com/james2doyle/sublime-node-snippets/blob/master/convert.php>converter</a> just reads <a href=https://github.com/james2doyle/sublime-node-snippets/blob/master/sources.txt>the text file</a> line by line and then generates a <code>.sublime-completions</code> file.<p>There is a template that is sort of setup. So you can actually just clone the repo, drop in a new sources file, and then generate a new snippets library with the converter.<p>Here is an excerpt from <a href=https://github.com/james2doyle/sublime-node-snippets>the github repo</a>:<h2 id=installing>Installing</h2><h4 id=package-control>Package Control</h4><p>Just look for <code>sublime-node-snippets</code> on <a href=https://sublime.wbond.net/packages/Node%20Completions>Package Control</a>. It is called "Node Completions" on the site, but comes up as "sublime-node-snippets".<h4 id=manual-install>Manual Install</h4><ul><li>Open the Commands Palette (command+shift+p)<li>Package Control: Add Repository<li>Past in this repos URL<li>Press Enter<li>Open the palette again<li>press enter on "sublime-node-snippets"<li>watch it install</ul><h2 id=using>Using</h2><p>Pressing <code>.</code> (period) will end the snippet lookup.<p>You will have better results if you pretend the period isn't needed. So if you are looking for <code>fs.readdir</code>, you would type <code>fsread</code> and you would see the results coming up.<h2 id=snippet-categories>Snippet Categories</h2><p>Node Populars<ul><li>async<li>underscore<li>lodash</ul><p>Node Core<ul><li>Assert<li>Buffer<li>Child<li>Console<li>Cluster<li>Crypto<li>Decoder<li>Domain<li>Dns<li>Event<li>Http<li>Https<li>Fs<li>Global<li>Module<li>Net<li>Path<li>Punnycode<li>Process<li>Querystring<li>Readline<li>Repl<li>Timers<li>Tls Ssl<li>Tty<li>Udp<li>Util<li>Url<li>Os<li>Vm<li>Zlib</ul><h2 id=adding-new-snippets>Adding New Snippets</h2><p>Here is how I quickly got all these snippets.<p>I will use <a href=http://expressjs.com/3x/api.html>Express</a> as an example since it isn't in here.<p>First I went to the docs for the framework, and I looked to see what the code examples were wrapped in.<p>For the <a href=http://expressjs.com/3x/api.html>express</a> docs site, the codes are shown in <code>section h3</code> tags. So to quickly get the list, I ran the following code:<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#ebcb8b>Array</span><span>.prototype.</span><span style=color:#bf616a>slice</span><span>.</span><span style=color:#96b5b4>call</span><span>(document.</span><span style=color:#96b5b4>querySelectorAll</span><span>("</span><span style=color:#a3be8c>section h3</span><span>"), </span><span style=color:#d08770>0</span><span>).</span><span style=color:#8fa1b3>map</span><span>(</span><span style=color:#b48ead>function</span><span>(</span><span style=color:#bf616a>item</span><span>){
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Sublime Node Snippets | OhDoyleRules</title><meta content="Sublime Node Snippets | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Sublime Node Snippets" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/sublime-node-snippets/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/sublime-node-snippets/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Sublime Node Snippets" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Sublime Text snippets for node, async, underscore, and lodash" name=description><meta content="Sublime Text snippets for node, async, underscore, and lodash" itemprop=description><meta content="Sublime Text snippets for node, async, underscore, and lodash" property=og:description><meta content="Sublime Text snippets for node, async, underscore, and lodash" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Sublime Node Snippets | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="sublime text 3, snippets, javascript, node, async, underscore, lodash, completions, package control" itemprop=keywords><meta content="sublime text 3, snippets, javascript, node, async, underscore, lodash, completions, package control" property=article:tag><meta content="sublime text 3, snippets, javascript, node, async, underscore, lodash, completions, package control" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/sublime-node-snippets/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Sublime Node Snippets</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 25, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a <a rel="noopener nofollow noreferrer" href=https://sublime.wbond.net/packages/Node%20Completions target=_blank>huge snippet library</a> based on the docs for node 10.26. There are <strong>783</strong> total right now (<em>2014-03-25</em>).<p>The way that I quickly made this big repository, was I wrote a script that would generate new sublime snippets based on a text file.<p>The <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/sublime-node-snippets/blob/master/convert.php target=_blank>converter</a> just reads <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/sublime-node-snippets/blob/master/sources.txt target=_blank>the text file</a> line by line and then generates a <code>.sublime-completions</code> file.<p>There is a template that is sort of setup. So you can actually just clone the repo, drop in a new sources file, and then generate a new snippets library with the converter.<p>Here is an excerpt from <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/sublime-node-snippets target=_blank>the github repo</a>:<h2 id=installing>Installing</h2><h4 id=package-control>Package Control</h4><p>Just look for <code>sublime-node-snippets</code> on <a rel="noopener nofollow noreferrer" href=https://sublime.wbond.net/packages/Node%20Completions target=_blank>Package Control</a>. It is called "Node Completions" on the site, but comes up as "sublime-node-snippets".<h4 id=manual-install>Manual Install</h4><ul><li>Open the Commands Palette (command+shift+p)<li>Package Control: Add Repository<li>Past in this repos URL<li>Press Enter<li>Open the palette again<li>press enter on "sublime-node-snippets"<li>watch it install</ul><h2 id=using>Using</h2><p>Pressing <code>.</code> (period) will end the snippet lookup.<p>You will have better results if you pretend the period isn't needed. So if you are looking for <code>fs.readdir</code>, you would type <code>fsread</code> and you would see the results coming up.<h2 id=snippet-categories>Snippet Categories</h2><p>Node Populars<ul><li>async<li>underscore<li>lodash</ul><p>Node Core<ul><li>Assert<li>Buffer<li>Child<li>Console<li>Cluster<li>Crypto<li>Decoder<li>Domain<li>Dns<li>Event<li>Http<li>Https<li>Fs<li>Global<li>Module<li>Net<li>Path<li>Punnycode<li>Process<li>Querystring<li>Readline<li>Repl<li>Timers<li>Tls Ssl<li>Tty<li>Udp<li>Util<li>Url<li>Os<li>Vm<li>Zlib</ul><h2 id=adding-new-snippets>Adding New Snippets</h2><p>Here is how I quickly got all these snippets.<p>I will use <a rel="noopener nofollow noreferrer" href=http://expressjs.com/3x/api.html target=_blank>Express</a> as an example since it isn't in here.<p>First I went to the docs for the framework, and I looked to see what the code examples were wrapped in.<p>For the <a rel="noopener nofollow noreferrer" href=http://expressjs.com/3x/api.html target=_blank>express</a> docs site, the codes are shown in <code>section h3</code> tags. So to quickly get the list, I ran the following code:<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#ebcb8b>Array</span><span>.prototype.</span><span style=color:#bf616a>slice</span><span>.</span><span style=color:#96b5b4>call</span><span>(document.</span><span style=color:#96b5b4>querySelectorAll</span><span>("</span><span style=color:#a3be8c>section h3</span><span>"), </span><span style=color:#d08770>0</span><span>).</span><span style=color:#8fa1b3>map</span><span>(</span><span style=color:#b48ead>function</span><span>(</span><span style=color:#bf616a>item</span><span>){
 </span><span>  </span><span style=color:#b48ead>return </span><span style=color:#bf616a>item</span><span>.</span><span style=color:#bf616a>textContent</span><span>.</span><span style=color:#8fa1b3>trim</span><span>();
 </span><span>}).</span><span style=color:#96b5b4>join</span><span>("</span><span style=color:#96b5b4>\n</span><span>");
-</span></code></pre><p>Then copied the output and pasted it in the <code>sources.txt</code> file. Done!<h5 id=cool-feature>Cool Feature</h5><p><strong>The word <code>callback</code> will automagically be converted into a function.</strong><h2 id=building>Building</h2><p>I went to each page of the <a href=http://nodejs.org/api/>node docs</a>, and copied the functions. Then I wrote a <a href=https://github.com/james2doyle/sublime-node-snippets/blob/master/convert.php>converter</a> to take each function and convert it to a snippet.<p>For Example, this line:<pre style=background:#2b303b;color:#c0c5ce><code><span>setTimeout(fun, delay)
+</span></code></pre><p>Then copied the output and pasted it in the <code>sources.txt</code> file. Done!<h5 id=cool-feature>Cool Feature</h5><p><strong>The word <code>callback</code> will automagically be converted into a function.</strong><h2 id=building>Building</h2><p>I went to each page of the <a rel="noopener nofollow noreferrer" href=http://nodejs.org/api/ target=_blank>node docs</a>, and copied the functions. Then I wrote a <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/sublime-node-snippets/blob/master/convert.php target=_blank>converter</a> to take each function and convert it to a snippet.<p>For Example, this line:<pre style=background:#2b303b;color:#c0c5ce><code><span>setTimeout(fun, delay)
 </span></code></pre><p>Is going to get converted to:<pre style=background:#2b303b;color:#c0c5ce><code><span>setTimeout(${1:fun}, ${2:delay})${0}
 </span></code></pre><p>When the word <code>callback</code> appears, it will convert it to the standard <code>fun</code> snippet.<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#bf616a>fs</span><span>.</span><span style=color:#8fa1b3>readdir</span><span>(</span><span style=color:#bf616a>path</span><span>, </span><span style=color:#bf616a>callback</span><span>)
 </span></code></pre><p>will become<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#bf616a>fs</span><span>.</span><span style=color:#8fa1b3>readdir</span><span>(</span><span style=color:#bf616a>$</span><span>{</span><span style=color:#d08770>1</span><span>:</span><span style=color:#bf616a>path</span><span>}, </span><span style=color:#b48ead>function</span><span>(</span><span style=color:#bf616a>$</span><span>{</span><span style=color:#d08770>2</span><span>:</span><span style=color:#bf616a>args</span><span>}){
 </span><span>  </span><span style=color:#bf616a>$</span><span>{</span><span style=color:#d08770>3</span><span>:</span><span style=color:#65737e>// body}
 </span><span>})</span><span style=color:#bf616a>$</span><span>{</span><span style=color:#d08770>0</span><span>}
-</span></code></pre><h2 id=sources-txt>sources.txt</h2><p>This file is cool.<p>It is just a line-by-line output of the node docs functions. This is the file that is raked over to generate the snippets.<h2 id=running-the-build>Running The Build</h2><p>Just run <code>php convert.php</code> and it will rake the sources.txt file and then write the new snippet in the snippets folder.<p>Everything before the first <code>(</code> will be used as the filename and tab snippet.<h2 id=contributing>Contributing</h2><p>Just add (or edit) a line in the source file. Then run <code>php convert.php</code> to generate the new snippets.<h2 id=why-php>Why PHP?!</h2><p>Well, PHP is actually pretty good at manipulating strings and writing files. Maybe at some point I will convert the converter and release it as a separate tool.<h2 id=source>Source</h2><p>You can find the <a href=https://github.com/james2doyle/sublime-node-snippets>source code on github</a>. You can also install via package control by looking for <code>sublime-node-snippets</code>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><h2 id=sources-txt>sources.txt</h2><p>This file is cool.<p>It is just a line-by-line output of the node docs functions. This is the file that is raked over to generate the snippets.<h2 id=running-the-build>Running The Build</h2><p>Just run <code>php convert.php</code> and it will rake the sources.txt file and then write the new snippet in the snippets folder.<p>Everything before the first <code>(</code> will be used as the filename and tab snippet.<h2 id=contributing>Contributing</h2><p>Just add (or edit) a line in the source file. Then run <code>php convert.php</code> to generate the new snippets.<h2 id=why-php>Why PHP?!</h2><p>Well, PHP is actually pretty good at manipulating strings and writing files. Maybe at some point I will convert the converter and release it as a separate tool.<h2 id=source>Source</h2><p>You can find the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/sublime-node-snippets target=_blank>source code on github</a>. You can also install via package control by looking for <code>sublime-node-snippets</code>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/switching-to-svg-on-grey-nimbus/index.html b/docs/personal-project/switching-to-svg-on-grey-nimbus/index.html
index 6396c51..869d986 100644
--- a/docs/personal-project/switching-to-svg-on-grey-nimbus/index.html
+++ b/docs/personal-project/switching-to-svg-on-grey-nimbus/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Switching to SVG on Grey Nimbus | OhDoyleRules</title><meta content="Switching to SVG on Grey Nimbus | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Switching to SVG on Grey Nimbus" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Switching to SVG on Grey Nimbus" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Switching to SVG for all images on my website" name=description><meta content="Switching to SVG for all images on my website" itemprop=description><meta content="Switching to SVG for all images on my website" property=og:description><meta content="Switching to SVG for all images on my website" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Switching to SVG on Grey Nimbus | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="svg, grey, nimbus, fuelphp, static, user agent sniffing, vector, retina, minify, minifier, fuel, extension" itemprop=keywords><meta content="svg, grey, nimbus, fuelphp, static, user agent sniffing, vector, retina, minify, minifier, fuel, extension" property=article:tag><meta content="svg, grey, nimbus, fuelphp, static, user agent sniffing, vector, retina, minify, minifier, fuel, extension" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Switching to SVG on Grey Nimbus</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 14, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>So I recently bought the <a title="Sketch Website" href=http://www.bohemiancoding.com/sketch/>Sketch app</a> for Mac. I am using it because I don't have illustrator. But to be honest, it is much better at doing small things. It's been about 2 hours switching the whole thing over and I have to say it is worth it.<p>I also found a <a href=https://github.com/svg/svgo title=svg/svgo>SVG minifier</a> that I will definitely be using in the future. It managed to save about 50-60% on each image. Which, for compression, is very good. After all is said and done, I saved about 10kb. Now this is not a lot but I also eliminated the use of retina.js. Which cause a second request for each image that has an @2x version. So on mobile I have made the site much faster.<p>Also, because of the way that FuelPHP does it's caching, I was not able to cache the images. Because it would append a query at the end for the cache and retina.js would not be able to find the retina version. That means that any retina device would take double(approximately) requests to get the full page.<p>I did something I think is rather clever. What I did was, since SVG support is high, I sniffed the user agent to see if it is one of the browsers that doesn't support SVG. Then I set a global and used that to define the extension I was going to use.<pre style=background:#2b303b;color:#c0c5ce><code><span>&LTa href="#welcome">
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Switching to SVG on Grey Nimbus | OhDoyleRules</title><meta content="Switching to SVG on Grey Nimbus | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Switching to SVG on Grey Nimbus" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Switching to SVG on Grey Nimbus" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Switching to SVG for all images on my website" name=description><meta content="Switching to SVG for all images on my website" itemprop=description><meta content="Switching to SVG for all images on my website" property=og:description><meta content="Switching to SVG for all images on my website" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Switching to SVG on Grey Nimbus | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="svg, grey, nimbus, fuelphp, static, user agent sniffing, vector, retina, minify, minifier, fuel, extension" itemprop=keywords><meta content="svg, grey, nimbus, fuelphp, static, user agent sniffing, vector, retina, minify, minifier, fuel, extension" property=article:tag><meta content="svg, grey, nimbus, fuelphp, static, user agent sniffing, vector, retina, minify, minifier, fuel, extension" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/switching-to-svg-on-grey-nimbus/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Switching to SVG on Grey Nimbus</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 14, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>So I recently bought the <a rel="noopener nofollow noreferrer" title="Sketch Website" href=http://www.bohemiancoding.com/sketch/ target=_blank>Sketch app</a> for Mac. I am using it because I don't have illustrator. But to be honest, it is much better at doing small things. It's been about 2 hours switching the whole thing over and I have to say it is worth it.<p>I also found a <a rel="noopener nofollow noreferrer" href=https://github.com/svg/svgo target=_blank title=svg/svgo>SVG minifier</a> that I will definitely be using in the future. It managed to save about 50-60% on each image. Which, for compression, is very good. After all is said and done, I saved about 10kb. Now this is not a lot but I also eliminated the use of retina.js. Which cause a second request for each image that has an @2x version. So on mobile I have made the site much faster.<p>Also, because of the way that FuelPHP does it's caching, I was not able to cache the images. Because it would append a query at the end for the cache and retina.js would not be able to find the retina version. That means that any retina device would take double(approximately) requests to get the full page.<p>I did something I think is rather clever. What I did was, since SVG support is high, I sniffed the user agent to see if it is one of the browsers that doesn't support SVG. Then I set a global and used that to define the extension I was going to use.<pre style=background:#2b303b;color:#c0c5ce><code><span>&LTa href="#welcome">
 </span><span>  &LT?php echo Asset::img('nimbus'.$ext, array("width"=>"275", "height"=>"57", "alt"=>"Grey Nimbus Logo")); ?>
 </span><span>&LT/a>
-</span></code></pre><p>Now $ext would be equal to ".png" or ".svg" depending on the browser you were in. Now the changes are live so you can see that everything is all SVG! It should also look quite pretty on retina screens. <a title="Grey Nimbus Website" href=http://greynimbus.com>Have a look</a>. The site still loads in under 1 second. Which, according to Google, is a good thing.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Now $ext would be equal to ".png" or ".svg" depending on the browser you were in. Now the changes are live so you can see that everything is all SVG! It should also look quite pretty on retina screens. <a rel="noopener nofollow noreferrer" title="Grey Nimbus Website" href=http://greynimbus.com target=_blank>Have a look</a>. The site still loads in under 1 second. Which, according to Google, is a good thing.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/vim-svg/index.html b/docs/personal-project/vim-svg/index.html
index 3ede13d..7fb027a 100644
--- a/docs/personal-project/vim-svg/index.html
+++ b/docs/personal-project/vim-svg/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vim Vector Logo | OhDoyleRules</title><meta content="Vim Vector Logo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vim Vector Logo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/vim-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/vim-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vim Vector Logo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The Vim logo in a vector SVG format. Also includes a ICNS file for OSX." name=description><meta content="The Vim logo in a vector SVG format. Also includes a ICNS file for OSX." itemprop=description><meta content="The Vim logo in a vector SVG format. Also includes a ICNS file for OSX." property=og:description><meta content="The Vim logo in a vector SVG format. Also includes a ICNS file for OSX." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vim Vector Logo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content=2014-06-17 itemprop=dateModified><meta content="Vim, logo, vector, svg, ai, image, macvim, icon, icns" itemprop=keywords><meta content="Vim, logo, vector, svg, ai, image, macvim, icon, icns" property=article:tag><meta content="Vim, logo, vector, svg, ai, image, macvim, icon, icns" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/vim-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vim Vector Logo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 04, 2014</span></span>  <span class=post-date>🕙  <span>Updated: June 17, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Here is a beauty. People have been looking for this Vim logo in a vector format for quite some time. There is of course the <a href=http://commons.wikimedia.org/wiki/File:Vimlogo.svg>old logo</a>, but it looks pretty strange. It reminds me of Tron for some reason.<p>Anyway this was a pain to make because of all the layers and custom shaping of the V. Also I had to make a bunch of changes to everything once I tested it in the browser because it was all busted.<p>I usually test my SVGs in the browser as a final OK point. I know if it renders there, then everything should be fine. Also people want it for using as a retina icon now, since the advent of responsive design and development.<div class=center><a href=/images/vim.svg target=_blank><img alt="vim svg vector" src=/images/vim.svg></a></div><p>If you happen to use this for anything, it would be nice to recieve some credit for it. I actually couldn't find who made the original Vim logo. It might just be lost in time.<h4 id=update>Update</h4><p>I made a icns version for OSX. You can <a href=/images/vim.icns>download it here</a>.<p>You can change the MacVim icon if you want. I happen to think this one is a little nicer.<h4 id=update-2>Update 2</h4><p>I have found another person who wanted a new vim icon. They added it to the fork of <a href=https://code.google.com/p/macvim/>MacVim</a>. Here is the <a href=https://github.com/kaishin/macvim/commit/fedcb4579b68439dba85b9d7fa4b076faac7ebad>commit from his repo</a> with the new icon.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vim Vector Logo | OhDoyleRules</title><meta content="Vim Vector Logo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vim Vector Logo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/vim-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/vim-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vim Vector Logo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The Vim logo in a vector SVG format. Also includes a ICNS file for OSX." name=description><meta content="The Vim logo in a vector SVG format. Also includes a ICNS file for OSX." itemprop=description><meta content="The Vim logo in a vector SVG format. Also includes a ICNS file for OSX." property=og:description><meta content="The Vim logo in a vector SVG format. Also includes a ICNS file for OSX." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vim Vector Logo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content=2014-06-17 itemprop=dateModified><meta content="Vim, logo, vector, svg, ai, image, macvim, icon, icns" itemprop=keywords><meta content="Vim, logo, vector, svg, ai, image, macvim, icon, icns" property=article:tag><meta content="Vim, logo, vector, svg, ai, image, macvim, icon, icns" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/vim-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vim Vector Logo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 04, 2014</span></span>  <span class=post-date>🕙  <span>Updated: June 17, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Here is a beauty. People have been looking for this Vim logo in a vector format for quite some time. There is of course the <a rel="noopener nofollow noreferrer" href=http://commons.wikimedia.org/wiki/File:Vimlogo.svg target=_blank>old logo</a>, but it looks pretty strange. It reminds me of Tron for some reason.<p>Anyway this was a pain to make because of all the layers and custom shaping of the V. Also I had to make a bunch of changes to everything once I tested it in the browser because it was all busted.<p>I usually test my SVGs in the browser as a final OK point. I know if it renders there, then everything should be fine. Also people want it for using as a retina icon now, since the advent of responsive design and development.<div class=center><a href=/images/vim.svg target=_blank><img alt="vim svg vector" src=/images/vim.svg></a></div><p>If you happen to use this for anything, it would be nice to recieve some credit for it. I actually couldn't find who made the original Vim logo. It might just be lost in time.<h4 id=update>Update</h4><p>I made a icns version for OSX. You can <a href=/images/vim.icns>download it here</a>.<p>You can change the MacVim icon if you want. I happen to think this one is a little nicer.<h4 id=update-2>Update 2</h4><p>I have found another person who wanted a new vim icon. They added it to the fork of <a rel="noopener nofollow noreferrer" href=https://code.google.com/p/macvim/ target=_blank>MacVim</a>. Here is the <a rel="noopener nofollow noreferrer" href=https://github.com/kaishin/macvim/commit/fedcb4579b68439dba85b9d7fa4b076faac7ebad target=_blank>commit from his repo</a> with the new icon.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/personal-project/zepto-drag-swap/index.html b/docs/personal-project/zepto-drag-swap/index.html
index 4125571..e8a0991 100644
--- a/docs/personal-project/zepto-drag-swap/index.html
+++ b/docs/personal-project/zepto-drag-swap/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Zepto Drag & Swap | OhDoyleRules</title><meta content="Zepto Drag & Swap | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Zepto Drag & Swap" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/zepto-drag-swap/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/zepto-drag-swap/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Zepto Drag & Swap" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a drag and drop list with Zepto" name=description><meta content="Create a drag and drop list with Zepto" itemprop=description><meta content="Create a drag and drop list with Zepto" property=og:description><meta content="Create a drag and drop list with Zepto" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Zepto Drag & Swap | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="zepto, drag, swap, html5, drop" itemprop=keywords><meta content="zepto, drag, swap, html5, drop" property=article:tag><meta content="zepto, drag, swap, html5, drop" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/zepto-drag-swap/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Zepto Drag & Swap</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a little plugin for zepto.js called Drag & Swap. Here is the <a title="Zepto Dragswap" href=http://james2doyle.github.com/zepto-dragswap/>github link</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Zepto Drag & Swap | OhDoyleRules</title><meta content="Zepto Drag & Swap | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Zepto Drag & Swap" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/personal-project/zepto-drag-swap/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/personal-project/zepto-drag-swap/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Zepto Drag & Swap" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a drag and drop list with Zepto" name=description><meta content="Create a drag and drop list with Zepto" itemprop=description><meta content="Create a drag and drop list with Zepto" property=og:description><meta content="Create a drag and drop list with Zepto" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Zepto Drag & Swap | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="zepto, drag, swap, html5, drop" itemprop=keywords><meta content="zepto, drag, swap, html5, drop" property=article:tag><meta content="zepto, drag, swap, html5, drop" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/personal-project/zepto-drag-swap/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Zepto Drag & Swap</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 21, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a little plugin for zepto.js called Drag & Swap. Here is the <a rel="noopener nofollow noreferrer" title="Zepto Dragswap" href=http://james2doyle.github.com/zepto-dragswap/ target=_blank>github link</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/portfolio/grey-nimbus-website/index.html b/docs/portfolio/grey-nimbus-website/index.html
index 7ed71a8..500637c 100644
--- a/docs/portfolio/grey-nimbus-website/index.html
+++ b/docs/portfolio/grey-nimbus-website/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Grey Nimbus website | OhDoyleRules</title><meta content="Grey Nimbus website | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Grey Nimbus website" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/portfolio/grey-nimbus-website/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/portfolio/grey-nimbus-website/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Grey Nimbus website" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="My old Grey Nimbus website" name=description><meta content="My old Grey Nimbus website" itemprop=description><meta content="My old Grey Nimbus website" property=og:description><meta content="My old Grey Nimbus website" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Grey Nimbus website | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grey, nimbus, design, updates, retina, js, no jquery, fuelphp, php, static, single page, parallax" itemprop=keywords><meta content="grey, nimbus, design, updates, retina, js, no jquery, fuelphp, php, static, single page, parallax" property=article:tag><meta content="grey, nimbus, design, updates, retina, js, no jquery, fuelphp, php, static, single page, parallax" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/portfolio/grey-nimbus-website/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Grey Nimbus website</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 11, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Finally took the time and initiative to launch <a title="Grey Nimbus Website" href=http://greynimbus.com>Grey Nimbus</a>, my business. The website itself is built using <a href=http://fuelphp.com title=FuelPHP>FuelPHP</a>. The reason I chose it was because I was curious and it was pretty light weight.<p>The website has no database so that was pretty much ignored. But I wanted easy validation for forms and a good email library. This is handled nicely by Fuel. The docs are mostly good. I had to do a little google searching when I was trying to tie things in together.<p>I knew I wanted parallax and responsive. I found <a title="spencerbaynton/cool kitten" href=https://github.com/spencerbaynton/cool-kitten>a fork</a> of the <a title="cool-kitten homepage" href=http://www.jalxob.com/cool-kitten/>cool-kitten</a> framework that I liked and created <a title="james2doyle/cool kitten" href=https://github.com/james2doyle/cool-kitten>my own fork</a>.<p>In my fork, the first thing I did was add <a title="Retina.js Homepage" href=http://retinajs.com/>retina.js</a>. I know some people knock retina.js because it uses <a title="Thomas Fuchs - Don’t use JavaScript for Retinafying" href=http://mir.aculo.us/2012/09/22/dont-use-javascript-for-retinafying/>javascript</a> to replace images with an @2x version.<blockquote><p>Maybe in the next update I will switch to SVG images, but I digress.</blockquote><p>The second thing I did was create a <a title="james2doyle/cool-kitten build script" href=https://github.com/james2doyle/cool-kitten/blob/master/compile.sh>build script</a> to concatenate and minify the javascript and css. It uses <a href=https://github.com/GoalSmashers/clean-css title=GoalSmashers/clean-css>clean-css</a> and <a href=https://github.com/mishoo/UglifyJS title=mishoo/UglifyJS>uglifyjs</a>.<p>The reason I didn't use something like grunt.js is because I only had 2 tasks to run and it was only when I was ready to push to the server. I added a condition in the head and footer to check to see if the site was in production and load the minified versions or the normal big list of separate files. The rest was just testing and building. Creating content is always tough for me. I want to sound casual which some people don't like. But it reflects me better so, whatever.<p>I ended up adding <a href=http://daneden.me/animate/ title=daneden.me/animate/>animate.css</a> too. I didn't create any fallbacks for no css animation support because they just won't show if you don't have support. I've used the library before and it is pretty great. I created a custom build because I am trying to keep my footprint small. In the end, even with all the images and javascript libs, I managed to get the page to load in <a href="http://blog.kissmetrics.com/loading-time/?wide=1" title="How Loading Time Affects Your Bottom Line">under 1 second</a> (at least on desktop...).<p>In conclusion, I am very happy with it. I have gotten a lot of positive feedback and suggestions. Everyday I make a few minor tweaks. Please <a title="Grey Nimbus Website" href=http://greynimbus.com/>check it out</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Grey Nimbus website | OhDoyleRules</title><meta content="Grey Nimbus website | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Grey Nimbus website" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/portfolio/grey-nimbus-website/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/portfolio/grey-nimbus-website/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Grey Nimbus website" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="My old Grey Nimbus website" name=description><meta content="My old Grey Nimbus website" itemprop=description><meta content="My old Grey Nimbus website" property=og:description><meta content="My old Grey Nimbus website" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Grey Nimbus website | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grey, nimbus, design, updates, retina, js, no jquery, fuelphp, php, static, single page, parallax" itemprop=keywords><meta content="grey, nimbus, design, updates, retina, js, no jquery, fuelphp, php, static, single page, parallax" property=article:tag><meta content="grey, nimbus, design, updates, retina, js, no jquery, fuelphp, php, static, single page, parallax" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/portfolio/grey-nimbus-website/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Grey Nimbus website</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 11, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Finally took the time and initiative to launch <a rel="noopener nofollow noreferrer" title="Grey Nimbus Website" href=http://greynimbus.com target=_blank>Grey Nimbus</a>, my business. The website itself is built using <a rel="noopener nofollow noreferrer" href=http://fuelphp.com target=_blank title=FuelPHP>FuelPHP</a>. The reason I chose it was because I was curious and it was pretty light weight.<p>The website has no database so that was pretty much ignored. But I wanted easy validation for forms and a good email library. This is handled nicely by Fuel. The docs are mostly good. I had to do a little google searching when I was trying to tie things in together.<p>I knew I wanted parallax and responsive. I found <a rel="noopener nofollow noreferrer" title="spencerbaynton/cool kitten" href=https://github.com/spencerbaynton/cool-kitten target=_blank>a fork</a> of the <a rel="noopener nofollow noreferrer" title="cool-kitten homepage" href=http://www.jalxob.com/cool-kitten/ target=_blank>cool-kitten</a> framework that I liked and created <a rel="noopener nofollow noreferrer" title="james2doyle/cool kitten" href=https://github.com/james2doyle/cool-kitten target=_blank>my own fork</a>.<p>In my fork, the first thing I did was add <a rel="noopener nofollow noreferrer" title="Retina.js Homepage" href=http://retinajs.com/ target=_blank>retina.js</a>. I know some people knock retina.js because it uses <a rel="noopener nofollow noreferrer" title="Thomas Fuchs - Don’t use JavaScript for Retinafying" href=http://mir.aculo.us/2012/09/22/dont-use-javascript-for-retinafying/ target=_blank>javascript</a> to replace images with an @2x version.<blockquote><p>Maybe in the next update I will switch to SVG images, but I digress.</blockquote><p>The second thing I did was create a <a rel="noopener nofollow noreferrer" title="james2doyle/cool-kitten build script" href=https://github.com/james2doyle/cool-kitten/blob/master/compile.sh target=_blank>build script</a> to concatenate and minify the javascript and css. It uses <a rel="noopener nofollow noreferrer" href=https://github.com/GoalSmashers/clean-css target=_blank title=GoalSmashers/clean-css>clean-css</a> and <a rel="noopener nofollow noreferrer" href=https://github.com/mishoo/UglifyJS target=_blank title=mishoo/UglifyJS>uglifyjs</a>.<p>The reason I didn't use something like grunt.js is because I only had 2 tasks to run and it was only when I was ready to push to the server. I added a condition in the head and footer to check to see if the site was in production and load the minified versions or the normal big list of separate files. The rest was just testing and building. Creating content is always tough for me. I want to sound casual which some people don't like. But it reflects me better so, whatever.<p>I ended up adding <a rel="noopener nofollow noreferrer" href=http://daneden.me/animate/ target=_blank title=daneden.me/animate/>animate.css</a> too. I didn't create any fallbacks for no css animation support because they just won't show if you don't have support. I've used the library before and it is pretty great. I created a custom build because I am trying to keep my footprint small. In the end, even with all the images and javascript libs, I managed to get the page to load in <a href="http://blog.kissmetrics.com/loading-time/?wide=1" rel="noopener nofollow noreferrer" title="How Loading Time Affects Your Bottom Line" target=_blank>under 1 second</a> (at least on desktop...).<p>In conclusion, I am very happy with it. I have gotten a lot of positive feedback and suggestions. Everyday I make a few minor tweaks. Please <a rel="noopener nofollow noreferrer" title="Grey Nimbus Website" href=http://greynimbus.com/ target=_blank>check it out</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/portfolio/index.html b/docs/portfolio/index.html
index af9452b..6b7ab98 100644
--- a/docs/portfolio/index.html
+++ b/docs/portfolio/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Portfolio | OhDoyleRules</title><meta content="Portfolio | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Portfolio itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/portfolio/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/portfolio/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Portfolio name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The portfolio category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The portfolio category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The portfolio category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The portfolio category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/portfolio/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Grey Nimbus website" href=https://ohdoylerules.com/portfolio/grey-nimbus-website/>Grey Nimbus website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 11, 2013</span></span><div class=post-intro><p>My old Grey Nimbus website<p><a title="Read Grey Nimbus website" class=read-more href=https://ohdoylerules.com/portfolio/grey-nimbus-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="New business cards" href=https://ohdoylerules.com/portfolio/new-business-cards/>New business cards</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 15, 2012</span></span><div class=post-intro><p>Check out my new business cards<p><a title="Read New business cards" class=read-more href=https://ohdoylerules.com/portfolio/new-business-cards/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="My Old Website" href=https://ohdoylerules.com/portfolio/my-old-website/>My Old Website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2012</span></span><div class=post-intro><p>See my old website<p><a title="Read My Old Website" class=read-more href=https://ohdoylerules.com/portfolio/my-old-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Portfolio | OhDoyleRules</title><meta content="Portfolio | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Portfolio itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/portfolio/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/portfolio/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Portfolio name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The portfolio category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The portfolio category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The portfolio category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The portfolio category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/portfolio/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="My Old Website" href=https://ohdoylerules.com/portfolio/my-old-website/>My Old Website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2012</span></span><div class=post-intro><p>See my old website<p><a title="Read My Old Website" class=read-more href=https://ohdoylerules.com/portfolio/my-old-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="New business cards" href=https://ohdoylerules.com/portfolio/new-business-cards/>New business cards</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 15, 2012</span></span><div class=post-intro><p>Check out my new business cards<p><a title="Read New business cards" class=read-more href=https://ohdoylerules.com/portfolio/new-business-cards/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Grey Nimbus website" href=https://ohdoylerules.com/portfolio/grey-nimbus-website/>Grey Nimbus website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 11, 2013</span></span><div class=post-intro><p>My old Grey Nimbus website<p><a title="Read Grey Nimbus website" class=read-more href=https://ohdoylerules.com/portfolio/grey-nimbus-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/portfolio/my-old-website/index.html b/docs/portfolio/my-old-website/index.html
index 84d8319..5a42e5c 100644
--- a/docs/portfolio/my-old-website/index.html
+++ b/docs/portfolio/my-old-website/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>My Old Website | OhDoyleRules</title><meta content="My Old Website | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="My Old Website" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/portfolio/my-old-website/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/portfolio/my-old-website/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="My Old Website" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="See my old website" name=description><meta content="See my old website" itemprop=description><meta content="See my old website" property=og:description><meta content="See my old website" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="My Old Website | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="chrome 18, firefox 10, web, site, archive" itemprop=keywords><meta content="chrome 18, firefox 10, web, site, archive" property=article:tag><meta content="chrome 18, firefox 10, web, site, archive" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/portfolio/my-old-website/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">My Old Website</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I decided to host my old website because I wanted to show some work with Modernizr.<p>Looking back it is actually pretty cool! I kind of miss it haha. It seems to run much better than I remember. I think that is because it was the days of chrome 18 and Firefox 10 which had spotty 3d transform support.<p><a href=https://ohdoylerules.com/test/old/><img alt="My Old Site" title="My Old Site" src=/images/Screen-Shot-2012-10-04-at-11.26.23-AM-e134936451049011.png></a><p>Maybe someday I can make a sub-site or a project site based off of that design. This was also one of my first sites to use AJAX. It was pretty frustrating and hard at the time. It is funny looking at my code and the way I handled things back then. I read it and feel like I am looking at a strangers code.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>My Old Website | OhDoyleRules</title><meta content="My Old Website | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="My Old Website" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/portfolio/my-old-website/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/portfolio/my-old-website/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="My Old Website" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="See my old website" name=description><meta content="See my old website" itemprop=description><meta content="See my old website" property=og:description><meta content="See my old website" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="My Old Website | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="chrome 18, firefox 10, web, site, archive" itemprop=keywords><meta content="chrome 18, firefox 10, web, site, archive" property=article:tag><meta content="chrome 18, firefox 10, web, site, archive" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/portfolio/my-old-website/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">My Old Website</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I decided to host my old website because I wanted to show some work with Modernizr.<p>Looking back it is actually pretty cool! I kind of miss it haha. It seems to run much better than I remember. I think that is because it was the days of chrome 18 and Firefox 10 which had spotty 3d transform support.<p><a rel="noopener nofollow noreferrer" href=https://ohdoylerules.com/test/old/ target=_blank><img alt="My Old Site" decoding=async loading=lazy src=/images/Screen-Shot-2012-10-04-at-11.26.23-AM-e134936451049011.png title=My%20Old%20Site></a><p>Maybe someday I can make a sub-site or a project site based off of that design. This was also one of my first sites to use AJAX. It was pretty frustrating and hard at the time. It is funny looking at my code and the way I handled things back then. I read it and feel like I am looking at a strangers code.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/portfolio/new-business-cards/index.html b/docs/portfolio/new-business-cards/index.html
index 7ade696..3990ea7 100644
--- a/docs/portfolio/new-business-cards/index.html
+++ b/docs/portfolio/new-business-cards/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>New business cards | OhDoyleRules</title><meta content="New business cards | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="New business cards" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/portfolio/new-business-cards/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/portfolio/new-business-cards/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="New business cards" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Check out my new business cards" name=description><meta content="Check out my new business cards" itemprop=description><meta content="Check out my new business cards" property=og:description><meta content="Check out my new business cards" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="New business cards | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="portfolio, business, cards" itemprop=keywords><meta content="portfolio, business, cards" property=article:tag><meta content="portfolio, business, cards" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/portfolio/new-business-cards/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">New business cards</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 15, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>Picked up my new cards right before <a href=http://www.diglondon.ca/>Dig London</a>. They have my new favourite emoticon on the back too.<p><a href=/images/20121114-14232711.jpg><img alt=20121114-142327.jpg src=/images/20121114-14232711.jpg></a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>New business cards | OhDoyleRules</title><meta content="New business cards | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="New business cards" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/portfolio/new-business-cards/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/portfolio/new-business-cards/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="New business cards" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Check out my new business cards" name=description><meta content="Check out my new business cards" itemprop=description><meta content="Check out my new business cards" property=og:description><meta content="Check out my new business cards" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="New business cards | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="portfolio, business, cards" itemprop=keywords><meta content="portfolio, business, cards" property=article:tag><meta content="portfolio, business, cards" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/portfolio/new-business-cards/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">New business cards</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 15, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>Picked up my new cards right before <a rel="noopener nofollow noreferrer" href=http://www.diglondon.ca/ target=_blank>Dig London</a>. They have my new favourite emoticon on the back too.<p><a href=/images/20121114-14232711.jpg><img alt=20121114-142327.jpg decoding=async loading=lazy src=/images/20121114-14232711.jpg></a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index 6a0e9eb..d0f2953 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -10,6 +10,10 @@
         <loc>https://ohdoylerules.com/android/jellybean-nexuss/</loc>
         <lastmod>2012-07-20</lastmod>
     </url>
+    <url>
+        <loc>https://ohdoylerules.com/apps/light-weight/privacy-policy/</loc>
+        <lastmod>2024-12-01</lastmod>
+    </url>
     <url>
         <loc>https://ohdoylerules.com/demo/</loc>
     </url>
diff --git a/docs/snippets/animation-events-in-javascript/index.html b/docs/snippets/animation-events-in-javascript/index.html
index b6b9923..4d0a2f7 100644
--- a/docs/snippets/animation-events-in-javascript/index.html
+++ b/docs/snippets/animation-events-in-javascript/index.html
@@ -9,7 +9,7 @@
 </span><span>    opacity: </span><span style=color:#d08770>1</span><span>;
 </span><span>  }
 </span><span>}
-</span></code></pre><p>So now in javascript I might have a button click that adds 'on' to my modal. In my javascript I would have a function to detect different animation events(start, iterate and end). Here is the code that I modified from a <a href=http://www.sitepoint.com/css3-animation-javascript-event-handlers/ title=Sitepoint>SitePoint Article</a> that was posting about the same topic.<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#b48ead>var </span><span style=color:#bf616a>pfx </span><span>= ["</span><span style=color:#a3be8c>webkit</span><span>", "</span><span style=color:#a3be8c>moz</span><span>", "</span><span style=color:#a3be8c>MS</span><span>", "</span><span style=color:#a3be8c>o</span><span>", ""];
+</span></code></pre><p>So now in javascript I might have a button click that adds 'on' to my modal. In my javascript I would have a function to detect different animation events(start, iterate and end). Here is the code that I modified from a <a rel="noopener nofollow noreferrer" href=http://www.sitepoint.com/css3-animation-javascript-event-handlers/ target=_blank title=Sitepoint>SitePoint Article</a> that was posting about the same topic.<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#b48ead>var </span><span style=color:#bf616a>pfx </span><span>= ["</span><span style=color:#a3be8c>webkit</span><span>", "</span><span style=color:#a3be8c>moz</span><span>", "</span><span style=color:#a3be8c>MS</span><span>", "</span><span style=color:#a3be8c>o</span><span>", ""];
 </span><span style=color:#b48ead>function </span><span style=color:#8fa1b3>doAnim</span><span>(</span><span style=color:#bf616a>element</span><span>, </span><span style=color:#bf616a>animClass</span><span>, </span><span style=color:#bf616a>type</span><span>, </span><span style=color:#bf616a>callback</span><span>) {
 </span><span>  </span><span style=color:#b48ead>var </span><span style=color:#bf616a>p </span><span>= </span><span style=color:#d08770>0</span><span>, </span><span style=color:#bf616a>l </span><span>= </span><span style=color:#bf616a>pfx</span><span>.length;
 </span><span>  </span><span style=color:#b48ead>function </span><span style=color:#8fa1b3>removeAndCall</span><span>(){
diff --git a/docs/snippets/apax-in-htdocs/index.html b/docs/snippets/apax-in-htdocs/index.html
index fa5b10b..8650371 100644
--- a/docs/snippets/apax-in-htdocs/index.html
+++ b/docs/snippets/apax-in-htdocs/index.html
@@ -1,3 +1,3 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Apax apache theme in htdocs | OhDoyleRules</title><meta content="Apax apache theme in htdocs | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Apax apache theme in htdocs" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/apax-in-htdocs/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/apax-in-htdocs/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Apax apache theme in htdocs" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Apax apache theme in htdocs" name=description><meta content="Apax apache theme in htdocs" itemprop=description><meta content="Apax apache theme in htdocs" property=og:description><meta content="Apax apache theme in htdocs" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Apax apache theme in htdocs | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Apax, apache, theme, htdocs" itemprop=keywords><meta content="Apax, apache, theme, htdocs" property=article:tag><meta content="Apax, apache, theme, htdocs" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/apax-in-htdocs/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Apax apache theme in htdocs</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 02, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I was tired of looking at the ugly default no-style of the htdocs file listing. I had seen <a title="Apaxy Homepage" href=http://adamwhitcroft.com/apaxy/>Apaxy theme</a> before and thought it was really nice. But I couldn't figure out how to get it to work with the default htdocs MAMP folder. I tried again tonight, and I got it working without much hassle.<ol><li><a title="Apaxy Download Link" href=https://github.com/AdamWhitcroft/Apaxy/archive/master.zip>Download Apaxy</a> and move everything from the apaxy folder into your MAMP htdocs folder.<li>open "htaccess.txt" and replace "/{FOLDERNAME}/theme" with "/.theme/"<li>rename the "htaccess.txt" file to ".htaccess" which will hide the file<li>rename the "theme" folder to ".theme" which will hide the directory<li>go to your localhost url and refresh<li>enjoy a not-ugly page</ol><p>Now you can edit the files in the ".theme" folder and style your page. I changed the ".wrapper" to have no max-width or margin, this way it was full screen.<p><a href=/images/Screen-Shot-2013-07-02-at-12.38.08-AM.png><img alt="apaxy theme applied to htdocs" src=/images/Screen-Shot-2013-07-02-at-12.38.08-AM.png></a><p>Above is a screenshot of what my htdocs/localhost:8888 now looks like.<h4 id=optional>OPTIONAL</h4><p>You can also hide the ".theme" folder. You will see a section that looks like this, in your .htaccess file:<pre style=background:#2b303b;color:#c0c5ce><code><span># HIDE /theme DIRECTORY
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Apax apache theme in htdocs | OhDoyleRules</title><meta content="Apax apache theme in htdocs | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Apax apache theme in htdocs" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/apax-in-htdocs/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/apax-in-htdocs/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Apax apache theme in htdocs" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Apax apache theme in htdocs" name=description><meta content="Apax apache theme in htdocs" itemprop=description><meta content="Apax apache theme in htdocs" property=og:description><meta content="Apax apache theme in htdocs" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Apax apache theme in htdocs | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Apax, apache, theme, htdocs" itemprop=keywords><meta content="Apax, apache, theme, htdocs" property=article:tag><meta content="Apax, apache, theme, htdocs" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/apax-in-htdocs/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Apax apache theme in htdocs</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 02, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I was tired of looking at the ugly default no-style of the htdocs file listing. I had seen <a rel="noopener nofollow noreferrer" title="Apaxy Homepage" href=http://adamwhitcroft.com/apaxy/ target=_blank>Apaxy theme</a> before and thought it was really nice. But I couldn't figure out how to get it to work with the default htdocs MAMP folder. I tried again tonight, and I got it working without much hassle.<ol><li><a rel="noopener nofollow noreferrer" title="Apaxy Download Link" href=https://github.com/AdamWhitcroft/Apaxy/archive/master.zip target=_blank>Download Apaxy</a> and move everything from the apaxy folder into your MAMP htdocs folder.<li>open "htaccess.txt" and replace "/{FOLDERNAME}/theme" with "/.theme/"<li>rename the "htaccess.txt" file to ".htaccess" which will hide the file<li>rename the "theme" folder to ".theme" which will hide the directory<li>go to your localhost url and refresh<li>enjoy a not-ugly page</ol><p>Now you can edit the files in the ".theme" folder and style your page. I changed the ".wrapper" to have no max-width or margin, this way it was full screen.<p><a href=/images/Screen-Shot-2013-07-02-at-12.38.08-AM.png><img alt="apaxy theme applied to htdocs" decoding=async loading=lazy src=/images/Screen-Shot-2013-07-02-at-12.38.08-AM.png></a><p>Above is a screenshot of what my htdocs/localhost:8888 now looks like.<h4 id=optional>OPTIONAL</h4><p>You can also hide the ".theme" folder. You will see a section that looks like this, in your .htaccess file:<pre style=background:#2b303b;color:#c0c5ce><code><span># HIDE /theme DIRECTORY
 </span><span>IndexIgnore .htaccess /.theme
 </span></code></pre><p>The old version should read "/theme" and not "/.theme". If change this line, it will NOT show the .theme folder in the localhost listing.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/autocomplete-tailwind-classes/index.html b/docs/snippets/autocomplete-tailwind-classes/index.html
index 4998bc1..79a6f18 100644
--- a/docs/snippets/autocomplete-tailwind-classes/index.html
+++ b/docs/snippets/autocomplete-tailwind-classes/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Autocomplete TailwindCSS In Custom Attributes/Strings | OhDoyleRules</title><meta content="Autocomplete TailwindCSS In Custom Attributes/Strings | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Autocomplete TailwindCSS In Custom Attributes/Strings" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Autocomplete TailwindCSS In Custom Attributes/Strings" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use tailwindcss autocomplete classes and logic inside non-default attributes or strings" name=description><meta content="Use tailwindcss autocomplete classes and logic inside non-default attributes or strings" itemprop=description><meta content="Use tailwindcss autocomplete classes and logic inside non-default attributes or strings" property=og:description><meta content="Use tailwindcss autocomplete classes and logic inside non-default attributes or strings" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Autocomplete TailwindCSS In Custom Attributes/Strings | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="tailwind, css, class, classname, tw, twin.macro, twinmacro, template, literal, react, vue, attributes, props" itemprop=keywords><meta content="tailwind, css, class, classname, tw, twin.macro, twinmacro, template, literal, react, vue, attributes, props" property=article:tag><meta content="tailwind, css, class, classname, tw, twin.macro, twinmacro, template, literal, react, vue, attributes, props" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Autocomplete TailwindCSS In Custom Attributes/Strings</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 06, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>If you are using <a href=https://tailwindcss.com/>TailwindCSS</a> along with <a href=https://github.com/tailwindlabs/tailwindcss-intellisense>their extension for completing tailwind classes</a> but you are using styled components, custom attributes/props for class names, or packages like <a href=https://github.com/ben-rogerson/twin.macro>twin.macro</a>, then autocomplete for class names might not work properly for you.<p>There is a setting inside the language server for tailwind that let's you provide a custom regex for when/where you want the tailwind autocomplete to work. By default it works inside <code>class</code> and <code>className</code>. But what if we want to change that? For, say, a tagged template literal?<p>You can use the following config for various types/styles of solutions for writing tailwind classes:<pre class=language-json data-lang=json style=background:#2b303b;color:#c0c5ce><code class=language-json data-lang=json><span>"</span><span style=color:#a3be8c>tailwindCSS.experimental.classRegex</span><span>": [
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Autocomplete TailwindCSS In Custom Attributes/Strings | OhDoyleRules</title><meta content="Autocomplete TailwindCSS In Custom Attributes/Strings | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Autocomplete TailwindCSS In Custom Attributes/Strings" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Autocomplete TailwindCSS In Custom Attributes/Strings" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use tailwindcss autocomplete classes and logic inside non-default attributes or strings" name=description><meta content="Use tailwindcss autocomplete classes and logic inside non-default attributes or strings" itemprop=description><meta content="Use tailwindcss autocomplete classes and logic inside non-default attributes or strings" property=og:description><meta content="Use tailwindcss autocomplete classes and logic inside non-default attributes or strings" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Autocomplete TailwindCSS In Custom Attributes/Strings | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="tailwind, css, class, classname, tw, twin.macro, twinmacro, template, literal, react, vue, attributes, props" itemprop=keywords><meta content="tailwind, css, class, classname, tw, twin.macro, twinmacro, template, literal, react, vue, attributes, props" property=article:tag><meta content="tailwind, css, class, classname, tw, twin.macro, twinmacro, template, literal, react, vue, attributes, props" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Autocomplete TailwindCSS In Custom Attributes/Strings</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 06, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>If you are using <a rel="noopener nofollow noreferrer" href=https://tailwindcss.com/ target=_blank>TailwindCSS</a> along with <a rel="noopener nofollow noreferrer" href=https://github.com/tailwindlabs/tailwindcss-intellisense target=_blank>their extension for completing tailwind classes</a> but you are using styled components, custom attributes/props for class names, or packages like <a rel="noopener nofollow noreferrer" href=https://github.com/ben-rogerson/twin.macro target=_blank>twin.macro</a>, then autocomplete for class names might not work properly for you.<p>There is a setting inside the language server for tailwind that let's you provide a custom regex for when/where you want the tailwind autocomplete to work. By default it works inside <code>class</code> and <code>className</code>. But what if we want to change that? For, say, a tagged template literal?<p>You can use the following config for various types/styles of solutions for writing tailwind classes:<pre class=language-json data-lang=json style=background:#2b303b;color:#c0c5ce><code class=language-json data-lang=json><span>"</span><span style=color:#a3be8c>tailwindCSS.experimental.classRegex</span><span>": [
 </span><span>  ["</span><span style=color:#a3be8c>classnames</span><span style=color:#96b5b4>\\</span><span style=color:#a3be8c>(([^)]*)</span><span style=color:#96b5b4>\\</span><span style=color:#a3be8c>)</span><span>", "</span><span style=color:#a3be8c>'([^']*)'</span><span>"],
 </span><span>  "</span><span style=color:#a3be8c>class=</span><span style=color:#96b5b4>\"</span><span style=color:#a3be8c>([^</span><span style=color:#96b5b4>\"</span><span style=color:#a3be8c>]*)</span><span>", </span><span style=color:#65737e>// &LTdiv class="..." />
 </span><span>  "</span><span style=color:#a3be8c>tw`([^`]*)</span><span>", </span><span style=color:#65737e>// tw`...`
@@ -7,4 +7,4 @@
 </span><span>  "</span><span style=color:#a3be8c>tw</span><span style=color:#96b5b4>\\</span><span style=color:#a3be8c>.</span><span style=color:#96b5b4>\\</span><span style=color:#a3be8c>w+`([^`]*)</span><span>", </span><span style=color:#65737e>// tw.xxx`...`
 </span><span>  "</span><span style=color:#a3be8c>tw</span><span style=color:#96b5b4>\\</span><span style=color:#a3be8c>(.*?</span><span style=color:#96b5b4>\\</span><span style=color:#a3be8c>)`([^`]*)</span><span>" </span><span style=color:#65737e>// tw(Component)`...`
 </span><span>],
-</span></code></pre><p>The above rules are what I am using with React and the twin.macro package. I can complete under various <code>tw</code> props or tagged templates which is exactly what I need for the project I'm on.<p>If you would like to see some of the other use cases for this setting, <a href="https://github.com/tailwindlabs/tailwindcss-intellisense/search?q=classRegex&type=issues">you can browse the issues on Github</a>. As you can see, it is a common feature that is reached for when you need to customize the location of the autocomplete trigger.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>The above rules are what I am using with React and the twin.macro package. I can complete under various <code>tw</code> props or tagged templates which is exactly what I need for the project I'm on.<p>If you would like to see some of the other use cases for this setting, <a href="https://github.com/tailwindlabs/tailwindcss-intellisense/search?q=classRegex&type=issues" rel="noopener nofollow noreferrer" target=_blank>you can browse the issues on Github</a>. As you can see, it is a common feature that is reached for when you need to customize the location of the autocomplete trigger.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/backup-mysql-and-email-it/index.html b/docs/snippets/backup-mysql-and-email-it/index.html
index a48a639..ba87cd6 100644
--- a/docs/snippets/backup-mysql-and-email-it/index.html
+++ b/docs/snippets/backup-mysql-and-email-it/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Backup MySQL And Email It | OhDoyleRules</title><meta content="Backup MySQL And Email It | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Backup MySQL And Email It" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Backup MySQL And Email It" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script" name=description><meta content="Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script" itemprop=description><meta content="Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script" property=og:description><meta content="Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Backup MySQL And Email It | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="mysql, backup, email, mailgun, curl, mysqldump, shell, script, cron, sendmail, mail" itemprop=keywords><meta content="mysql, backup, email, mailgun, curl, mysqldump, shell, script, cron, sendmail, mail" property=article:tag><meta content="mysql, backup, email, mailgun, curl, mysqldump, shell, script, cron, sendmail, mail" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Backup MySQL And Email It</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 24, 2016</span></span><div itemprop="ArticleBody text" class=main-content><p>Recently, a friend of mine asked me what we use for managing the backups for our clients. I mentioned that we use <code>mysqldump</code> running on a <code>CRON</code> schedule. He said that he used a paid service for managing all the servers and their backups. He mentioned it sends to an Amazon S3 bucket, and also sends a notification.<p>With my setup, he noted that I could be in trouble if the hard drive failed, or the site gets wiped because my backups are stored locally right beside the site itself.<p>I thought to myself, "Hmmm. What would help me back these files up, let me know that it is done, access them quickly, and also cost no money?". Email + <code>CRON</code>. Email is a pretty reasonable solution for this.<p>With Email, you get the following:<ul><li>A notification of when the backup is done<li>An "offsite" backup of the file<li>A searchable history of the files/backups<li>Forwarding of the backup to someone else<li>CC multiple accounts and have the backup available to multiple people<li>Send a copy to the client, so they can have one too</ul><p>So I whipped up a script with <code>mysqldump</code>, <code>curl</code>, and <code>CRON</code>.<p>Although you can send email <code>sendmail</code> or <code>mail</code>, I opted for <a href=http://www.mailgun.com/>Mailgun</a>. It is something we are already using, so hooking it up took no time at all. They also have an excellent API, which is faster than <em>SMTP</em>.<p>On top of the regular email features I listed above, with Mailgun, I also get:<ul><li>read receipts<li>delivery reports<li>logging<li>web hooks (you can catch emails with individual subjects or recipients)</ul><p>So, without spending any money, I can get a SaaS experience using some built-in tools.<p>You can see the script here:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/6e471dee73124eddda8c.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/6e471dee73124eddda8c.js src=about:blank></iframe><p>I included some rules for the <code>crontab</code> settings. I used <code>0 0 * * 1 *</code> which is once a week on Monday at midnight.<p>You can still run the script above <em>without using <code>CRON</code></em>. Just put it somewhere on your server and run it like you normally would: <code>./backup-mysql-db.sh</code>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Backup MySQL And Email It | OhDoyleRules</title><meta content="Backup MySQL And Email It | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Backup MySQL And Email It" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Backup MySQL And Email It" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script" name=description><meta content="Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script" itemprop=description><meta content="Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script" property=og:description><meta content="Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Backup MySQL And Email It | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="mysql, backup, email, mailgun, curl, mysqldump, shell, script, cron, sendmail, mail" itemprop=keywords><meta content="mysql, backup, email, mailgun, curl, mysqldump, shell, script, cron, sendmail, mail" property=article:tag><meta content="mysql, backup, email, mailgun, curl, mysqldump, shell, script, cron, sendmail, mail" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Backup MySQL And Email It</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 24, 2016</span></span><div itemprop="ArticleBody text" class=main-content><p>Recently, a friend of mine asked me what we use for managing the backups for our clients. I mentioned that we use <code>mysqldump</code> running on a <code>CRON</code> schedule. He said that he used a paid service for managing all the servers and their backups. He mentioned it sends to an Amazon S3 bucket, and also sends a notification.<p>With my setup, he noted that I could be in trouble if the hard drive failed, or the site gets wiped because my backups are stored locally right beside the site itself.<p>I thought to myself, "Hmmm. What would help me back these files up, let me know that it is done, access them quickly, and also cost no money?". Email + <code>CRON</code>. Email is a pretty reasonable solution for this.<p>With Email, you get the following:<ul><li>A notification of when the backup is done<li>An "offsite" backup of the file<li>A searchable history of the files/backups<li>Forwarding of the backup to someone else<li>CC multiple accounts and have the backup available to multiple people<li>Send a copy to the client, so they can have one too</ul><p>So I whipped up a script with <code>mysqldump</code>, <code>curl</code>, and <code>CRON</code>.<p>Although you can send email <code>sendmail</code> or <code>mail</code>, I opted for <a rel="noopener nofollow noreferrer" href=http://www.mailgun.com/ target=_blank>Mailgun</a>. It is something we are already using, so hooking it up took no time at all. They also have an excellent API, which is faster than <em>SMTP</em>.<p>On top of the regular email features I listed above, with Mailgun, I also get:<ul><li>read receipts<li>delivery reports<li>logging<li>web hooks (you can catch emails with individual subjects or recipients)</ul><p>So, without spending any money, I can get a SaaS experience using some built-in tools.<p>You can see the script here:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/6e471dee73124eddda8c.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/6e471dee73124eddda8c.js src=about:blank></iframe><p>I included some rules for the <code>crontab</code> settings. I used <code>0 0 * * 1 *</code> which is once a week on Monday at midnight.<p>You can still run the script above <em>without using <code>CRON</code></em>. Just put it somewhere on your server and run it like you normally would: <code>./backup-mysql-db.sh</code>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/bash-random-password-generation/index.html b/docs/snippets/bash-random-password-generation/index.html
index 5cfb56e..4147f71 100644
--- a/docs/snippets/bash-random-password-generation/index.html
+++ b/docs/snippets/bash-random-password-generation/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Randomly Generate A Password In Bash | OhDoyleRules</title><meta content="Randomly Generate A Password In Bash | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Randomly Generate A Password In Bash" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/bash-random-password-generation/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/bash-random-password-generation/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Randomly Generate A Password In Bash" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Randomly generate a password of specified length and then copy it to the clipboard" name=description><meta content="Randomly generate a password of specified length and then copy it to the clipboard" itemprop=description><meta content="Randomly generate a password of specified length and then copy it to the clipboard" property=og:description><meta content="Randomly generate a password of specified length and then copy it to the clipboard" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Randomly Generate A Password In Bash | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="password, random, generate, base64, bash, openssl, cli, terminal, shell, command line, pbcopy, clipboard, osx, mac" itemprop=keywords><meta content="password, random, generate, base64, bash, openssl, cli, terminal, shell, command line, pbcopy, clipboard, osx, mac" property=article:tag><meta content="password, random, generate, base64, bash, openssl, cli, terminal, shell, command line, pbcopy, clipboard, osx, mac" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/bash-random-password-generation/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Randomly Generate A Password In Bash</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 16, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>When installing or setting up frameworks, in this case I was playing around with <a href=http://laravel.com/>Laravel</a>, you usually need to set a session/secret/encryption key.<p>I know why this is, but I always end up looking around for some random password generator so I can get a random string that is exactly 32 characters. Isn't there an easier way?!?!<p>Yes there is. If you have the magical <a title="OpenSSL Website" href=https://www.openssl.org/>OpenSSL</a> installed, which most do, you can use it to generate a random string.<p>I found a <a title="Generate Random Passwords from the Command Line" href=http://osxdaily.com/2011/05/10/generate-random-passwords-command-line/>article online</a> that uses base64 to generate a string of a certain length. The only thing is that base64 is padded with 8 bits. Which means that if you want 32 then you need to use 24. This goes up exponentially as the number gets bigger. So there is a trim part of the function that clips off the extra characters.<p>Here is the function broken down into steps:<ul><li>pass a number to the function<li>cut the resulting string<li>generate a base64 string using that number<li>echo out the result<li>copy the output to the clipboard with a newline<li>echo out a success</ul><p>I put a check in there if the argument is not a number. This is just for the dummies out there.<h4 id=pbcopy-is-not-defined>pbcopy is not defined</h4><p>You are probably on Linux. I found <a title="pbcopy and pbpaste for Linux" href=http://whereswalden.com/2009/10/23/pbcopy-and-pbpaste-for-linux/>this little snippet</a> for the lazy. This way you can forget about translating it each time.<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#96b5b4>alias </span><span style=color:#8fa1b3>pbcopy</span><span>="</span><span style=color:#a3be8c>xsel --clipboard --input</span><span>"
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Randomly Generate A Password In Bash | OhDoyleRules</title><meta content="Randomly Generate A Password In Bash | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Randomly Generate A Password In Bash" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/bash-random-password-generation/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/bash-random-password-generation/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Randomly Generate A Password In Bash" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Randomly generate a password of specified length and then copy it to the clipboard" name=description><meta content="Randomly generate a password of specified length and then copy it to the clipboard" itemprop=description><meta content="Randomly generate a password of specified length and then copy it to the clipboard" property=og:description><meta content="Randomly generate a password of specified length and then copy it to the clipboard" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Randomly Generate A Password In Bash | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="password, random, generate, base64, bash, openssl, cli, terminal, shell, command line, pbcopy, clipboard, osx, mac" itemprop=keywords><meta content="password, random, generate, base64, bash, openssl, cli, terminal, shell, command line, pbcopy, clipboard, osx, mac" property=article:tag><meta content="password, random, generate, base64, bash, openssl, cli, terminal, shell, command line, pbcopy, clipboard, osx, mac" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/bash-random-password-generation/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Randomly Generate A Password In Bash</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 16, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>When installing or setting up frameworks, in this case I was playing around with <a rel="noopener nofollow noreferrer" href=http://laravel.com/ target=_blank>Laravel</a>, you usually need to set a session/secret/encryption key.<p>I know why this is, but I always end up looking around for some random password generator so I can get a random string that is exactly 32 characters. Isn't there an easier way?!?!<p>Yes there is. If you have the magical <a rel="noopener nofollow noreferrer" title="OpenSSL Website" href=https://www.openssl.org/ target=_blank>OpenSSL</a> installed, which most do, you can use it to generate a random string.<p>I found a <a rel="noopener nofollow noreferrer" title="Generate Random Passwords from the Command Line" href=http://osxdaily.com/2011/05/10/generate-random-passwords-command-line/ target=_blank>article online</a> that uses base64 to generate a string of a certain length. The only thing is that base64 is padded with 8 bits. Which means that if you want 32 then you need to use 24. This goes up exponentially as the number gets bigger. So there is a trim part of the function that clips off the extra characters.<p>Here is the function broken down into steps:<ul><li>pass a number to the function<li>cut the resulting string<li>generate a base64 string using that number<li>echo out the result<li>copy the output to the clipboard with a newline<li>echo out a success</ul><p>I put a check in there if the argument is not a number. This is just for the dummies out there.<h4 id=pbcopy-is-not-defined>pbcopy is not defined</h4><p>You are probably on Linux. I found <a rel="noopener nofollow noreferrer" title="pbcopy and pbpaste for Linux" href=http://whereswalden.com/2009/10/23/pbcopy-and-pbpaste-for-linux/ target=_blank>this little snippet</a> for the lazy. This way you can forget about translating it each time.<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#96b5b4>alias </span><span style=color:#8fa1b3>pbcopy</span><span>="</span><span style=color:#a3be8c>xsel --clipboard --input</span><span>"
 </span><span style=color:#96b5b4>alias </span><span style=color:#8fa1b3>pbpaste</span><span>="</span><span style=color:#a3be8c>xsel --clipboard --output</span><span>"
 </span></code></pre><p>Now for the actual shell function:<h3 id=code>Code</h3><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e># if the argument is a number
 </span><span style=color:#65737e># cut the string so that there is no base64 padding
diff --git a/docs/snippets/bash-select-example/index.html b/docs/snippets/bash-select-example/index.html
index 016a702..59c67f6 100644
--- a/docs/snippets/bash-select-example/index.html
+++ b/docs/snippets/bash-select-example/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Bash select example | OhDoyleRules</title><meta content="Bash select example | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Bash select example" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/bash-select-example/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/bash-select-example/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Bash select example" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An example of how to use the select command in bash to pass arguments to functions" name=description><meta content="An example of how to use the select command in bash to pass arguments to functions" itemprop=description><meta content="An example of how to use the select command in bash to pass arguments to functions" property=og:description><meta content="An example of how to use the select command in bash to pass arguments to functions" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Bash select example | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="select, bash, command, line, cli, terminal, function, arguments" itemprop=keywords><meta content="select, bash, command, line, cli, terminal, function, arguments" property=article:tag><meta content="select, bash, command, line, cli, terminal, function, arguments" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/bash-select-example/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Bash select example</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 07, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I recently bought 2 <a href=http://raspberrypi.org>raspberry pi computers</a>. One is for home, and one is for the office.<p>Since we have dynamic IPs setup in the office, and I have the same at my house, I needed to be able to connect using the MAC address of the pi. I ended up writing a little script to get the IP based on the MAC Address, and then ssh into the computer. Pretty slick.<p>To make my life easier I used the <code>select</code> command in bash. The <a href=http://www.gnu.org/software/bash/manual/bashref.html#Conditional-Constructs>documentation for select</a> leaves a lot to be desired. So I had to fiddle with it until I got it right. Here is a simple boilerplate for a bash script using select:<h4 id=function>Function</h4><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e>#!/usr/bin/env bash
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Bash select example | OhDoyleRules</title><meta content="Bash select example | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Bash select example" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/bash-select-example/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/bash-select-example/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Bash select example" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An example of how to use the select command in bash to pass arguments to functions" name=description><meta content="An example of how to use the select command in bash to pass arguments to functions" itemprop=description><meta content="An example of how to use the select command in bash to pass arguments to functions" property=og:description><meta content="An example of how to use the select command in bash to pass arguments to functions" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Bash select example | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="select, bash, command, line, cli, terminal, function, arguments" itemprop=keywords><meta content="select, bash, command, line, cli, terminal, function, arguments" property=article:tag><meta content="select, bash, command, line, cli, terminal, function, arguments" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/bash-select-example/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Bash select example</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 07, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I recently bought 2 <a rel="noopener nofollow noreferrer" href=http://raspberrypi.org target=_blank>raspberry pi computers</a>. One is for home, and one is for the office.<p>Since we have dynamic IPs setup in the office, and I have the same at my house, I needed to be able to connect using the MAC address of the pi. I ended up writing a little script to get the IP based on the MAC Address, and then ssh into the computer. Pretty slick.<p>To make my life easier I used the <code>select</code> command in bash. The <a rel="noopener nofollow noreferrer" href=http://www.gnu.org/software/bash/manual/bashref.html#Conditional-Constructs target=_blank>documentation for select</a> leaves a lot to be desired. So I had to fiddle with it until I got it right. Here is a simple boilerplate for a bash script using select:<h4 id=function>Function</h4><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e>#!/usr/bin/env bash
 </span><span>
 </span><span style=color:#8fa1b3>speak</span><span>() {
 </span><span>  </span><span style=color:#96b5b4>echo </span><span>"$</span><span style=color:#bf616a>1 </span><span>$</span><span style=color:#bf616a>2</span><span>"
diff --git a/docs/snippets/bitbucket-weekly-reports-using-integromat-make/index.html b/docs/snippets/bitbucket-weekly-reports-using-integromat-make/index.html
index b82718b..af61a1e 100644
--- a/docs/snippets/bitbucket-weekly-reports-using-integromat-make/index.html
+++ b/docs/snippets/bitbucket-weekly-reports-using-integromat-make/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Bitbucket Weekly Reports Using Make (Integromat) | OhDoyleRules</title><meta content="Bitbucket Weekly Reports Using Make (Integromat) | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Bitbucket Weekly Reports Using Make (Integromat)" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Bitbucket Weekly Reports Using Make (Integromat)" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository" name=description><meta content="Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository" itemprop=description><meta content="Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository" property=og:description><meta content="Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Bitbucket Weekly Reports Using Make (Integromat) | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="make, Integromat, Bitbucket, report, git, slack, pagination" itemprop=keywords><meta content="make, Integromat, Bitbucket, report, git, slack, pagination" property=article:tag><meta content="make, Integromat, Bitbucket, report, git, slack, pagination" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Bitbucket Weekly Reports Using Make (Integromat)</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 06, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>At my job, we like to keep our team updated with all the dev work we do each week. This means we have meetings every Monday to review the work that has happened since the previous week.<p>I often like to review the work done over that time frame by looking at the projects git log for all the pull-requests merged during that previous week.<p>Now, I could open up the <code>develop</code> branch and run a <code>git shortlog --since "1 week ago"</code> every Monday, but I would much rather automate this task so I don't have to remember to do anything and it stays consistent. I can just wake up on Monday and see a pretty little report printed in the project Slack channel.<p>The way I accomplished this is using <a href="https://www.make.com/en?pc=jamesdoyle&fromImt=1">Make.com (formerly Integromat)</a>. This is a "no-code" tool that allows you to use visual programming to build tools and apps.<p>Let's break down the solution I came up with:<div class=center><a title="Bitbucket integromat make 01" href=/images/bb-integromat-make-01.png target=_blank> <img alt="Bitbucket integromat make 01" src=/images/bb-integromat-make-01.png> </a></div><p>With a final output something like this:<pre>
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Bitbucket Weekly Reports Using Make (Integromat) | OhDoyleRules</title><meta content="Bitbucket Weekly Reports Using Make (Integromat) | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Bitbucket Weekly Reports Using Make (Integromat)" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Bitbucket Weekly Reports Using Make (Integromat)" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository" name=description><meta content="Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository" itemprop=description><meta content="Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository" property=og:description><meta content="Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Bitbucket Weekly Reports Using Make (Integromat) | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="make, Integromat, Bitbucket, report, git, slack, pagination" itemprop=keywords><meta content="make, Integromat, Bitbucket, report, git, slack, pagination" property=article:tag><meta content="make, Integromat, Bitbucket, report, git, slack, pagination" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Bitbucket Weekly Reports Using Make (Integromat)</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 06, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>At my job, we like to keep our team updated with all the dev work we do each week. This means we have meetings every Monday to review the work that has happened since the previous week.<p>I often like to review the work done over that time frame by looking at the projects git log for all the pull-requests merged during that previous week.<p>Now, I could open up the <code>develop</code> branch and run a <code>git shortlog --since "1 week ago"</code> every Monday, but I would much rather automate this task so I don't have to remember to do anything and it stays consistent. I can just wake up on Monday and see a pretty little report printed in the project Slack channel.<p>The way I accomplished this is using <a href="https://www.make.com/en?pc=jamesdoyle&fromImt=1" rel="noopener nofollow noreferrer" target=_blank>Make.com (formerly Integromat)</a>. This is a "no-code" tool that allows you to use visual programming to build tools and apps.<p>Let's break down the solution I came up with:<div class=center><a title="Bitbucket integromat make 01" href=/images/bb-integromat-make-01.png target=_blank> <img alt="Bitbucket integromat make 01" src=/images/bb-integromat-make-01.png> </a></div><p>With a final output something like this:<pre>
 <h5><strong>BitBucket Reporter  [APP]  9:01 AM</strong></h5>
 <strong>List of BitBucket PRs since 2022-07-25 [1 of 2]</strong>
 #824 - Feature/events [MERGED] by James Doyle
@@ -18,4 +18,4 @@ <h5><strong>BitBucket Reporter  [APP]  9:01 AM</strong></h5>
 #837 - Bugfix/user tickets [OPEN] by Jr. Developer
 </pre><p>Here is the overall solution laid out. As you can see, it wasn't as simple as it might seem.<p>I will go through the solution step-by-step and explain each node. I will assume you already have Slack and BitBucket connected.<h3 id=step-1>Step 1</h3><div class=center><a title="Bitbucket integromat make 02" href=/images/bb-integromat-make-02.png target=_blank> <img alt="Bitbucket integromat make 02" src=/images/bb-integromat-make-02.png> </a></div><p>First we need set the schedule to run each Monday. Nothing fancy here. I set it to 9:01 just because I am usually on the computer by then so I will see the channel notification.<h3 id=step-2>Step 2</h3><div class=center><a title="Bitbucket integromat make 03" href=/images/bb-integromat-make-03.png target=_blank> <img alt="Bitbucket integromat make 03" src=/images/bb-integromat-make-03.png> </a></div><p>Here is the reason this is so complicated: the BitBucket API is paginated and there is no way to easily page through the results. So we need to loop through each page from the results and append them to a variable we eventually send to Slack.<p>In this request, we ask BitBucket for the "merged" and "open" pull-requests that happened last week. There was no nice way to calculate the previous weeks date, so we have this fun code to get the date of the previous Monday.<p>You can copy the text below for the query:<pre style=background:#2b303b;color:#c0c5ce><code><span>(state="merged" OR state="open") AND created_on>="{{formatDate(setDay(parseDate(timestamp - 604800; "X"); "monday"); "YYYY-MM-DD")}}"
 </span></code></pre><p>The only reason we run this first request just so we can get the page count that we will then use to create a loop to make the real requests.<h3 id=step-3>Step 3</h3><div class=center><a title="Bitbucket integromat make 04" href=/images/bb-integromat-make-04.png target=_blank> <img alt="Bitbucket integromat make 04" src=/images/bb-integromat-make-04.png> </a></div><p>Here is the loop that we use to iterate over the pages in the results. We check the page size and make sure we repeat the right amount of times.<div class=center><a title="Bitbucket integromat make 04 A" href=/images/bb-integromat-make-04a.png target=_blank> <img alt="Bitbucket integromat make 04 A" src=/images/bb-integromat-make-04a.png> </a></div><p>Our first route (the top one) is the condition that the loop continues to run in. You can see the condition is a basic for loop that repeats for each page in the loop.<h3 id=step-4>Step 4</h3><div class=center><a title="Bitbucket integromat make 05" href=/images/bb-integromat-make-05.png target=_blank> <img alt="Bitbucket integromat make 05" src=/images/bb-integromat-make-05.png> </a></div><p>Here is the request that happens within the loop. It is identical to the first one but we have a page parameter so that we can get each page of the results.<h3 id=step-5>Step 5</h3><div class=center><a title="Bitbucket integromat make 06" href=/images/bb-integromat-make-06.png target=_blank> <img alt="Bitbucket integromat make 06" src=/images/bb-integromat-make-06.png> </a></div><p>All we are doing in this node is sorting the pull requests by their title. We do this because the PR number is in the title and not sorting it would look off.<h3 id=step-6>Step 6</h3><div class=center><a title="Bitbucket integromat make 07" href=/images/bb-integromat-make-07.png target=_blank> <img alt="Bitbucket integromat make 07" src=/images/bb-integromat-make-07.png> </a></div><p>Here we are defining the string template for the PR titles that will go into our bulleted list. The output of this will be a single variable that contains all the row strings.<h3 id=step-7>Step 7</h3><div class=center><a title="Bitbucket integromat make 08" href=/images/bb-integromat-make-08.png target=_blank> <img alt="Bitbucket integromat make 08" src=/images/bb-integromat-make-08.png> </a></div><p>Nothing fancy here. Just getting the variable the we will be pushing the results of our text aggregation to.<h3 id=step-8>Step 8</h3><div class=center><a title="Bitbucket integromat make 09" href=/images/bb-integromat-make-09.png target=_blank> <img alt="Bitbucket integromat make 09" src=/images/bb-integromat-make-09.png> </a></div><p>Here we are updating our actual results that will be sent to Slack. We break up the list with a nice header that is chunked by page.<p>Here is the code in the box for setting the variable:<pre style=background:#2b303b;color:#c0c5ce><code><span>{{21.results}}{{newline}}*List of Project PRs since {{formatDate(setDay(parseDate(timestamp - 604800; "X"); "monday"); "YYYY-MM-DD")}} [{{13.i}} of {{ceil(1.body.size / 1.body.pagelen)}}]*{{newline}}{{11.text}}
-</span></code></pre><h3 id=step-9>Step 9</h3><div class=center><a title="Bitbucket integromat make 10" href=/images/bb-integromat-make-10.png target=_blank> <img alt="Bitbucket integromat make 10" src=/images/bb-integromat-make-10.png> </a></div><p>Here is the other condition in the router that will run at the end of the loop. It checks that the loop variable is larger that the page count.<div class=center><a title="Bitbucket integromat make 10 A" href=/images/bb-integromat-make-10a.png target=_blank> <img alt="Bitbucket integromat make 10 A" src=/images/bb-integromat-make-10a.png> </a></div><p>Our first step in the end case is to get the variable. We are passing this to the Slack body.<h3 id=step-10>Step 10</h3><div class=center><a title="bb integromat make 11" href=/images/bb-integromat-make-11.png target=_blank> <img alt="bb integromat make 11" src=/images/bb-integromat-make-11.png> </a></div><p>Our last step is to just shoot off that text to Slack. We have already formatted the text we are sending so we just slap it in.<h3 id=all-done>All Done!</h3><p>That is it! Hopefully this helps anyone that is trying to use the BitBucket in <a href="https://www.make.com/en?pc=jamesdoyle&fromImt=1">Make.com (Integromat)</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><h3 id=step-9>Step 9</h3><div class=center><a title="Bitbucket integromat make 10" href=/images/bb-integromat-make-10.png target=_blank> <img alt="Bitbucket integromat make 10" src=/images/bb-integromat-make-10.png> </a></div><p>Here is the other condition in the router that will run at the end of the loop. It checks that the loop variable is larger that the page count.<div class=center><a title="Bitbucket integromat make 10 A" href=/images/bb-integromat-make-10a.png target=_blank> <img alt="Bitbucket integromat make 10 A" src=/images/bb-integromat-make-10a.png> </a></div><p>Our first step in the end case is to get the variable. We are passing this to the Slack body.<h3 id=step-10>Step 10</h3><div class=center><a title="bb integromat make 11" href=/images/bb-integromat-make-11.png target=_blank> <img alt="bb integromat make 11" src=/images/bb-integromat-make-11.png> </a></div><p>Our last step is to just shoot off that text to Slack. We have already formatted the text we are sending so we just slap it in.<h3 id=all-done>All Done!</h3><p>That is it! Hopefully this helps anyone that is trying to use the BitBucket in <a href="https://www.make.com/en?pc=jamesdoyle&fromImt=1" rel="noopener nofollow noreferrer" target=_blank>Make.com (Integromat)</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/copy-file-path-clipboard-osx/index.html b/docs/snippets/copy-file-path-clipboard-osx/index.html
index e9fab1a..620b084 100644
--- a/docs/snippets/copy-file-path-clipboard-osx/index.html
+++ b/docs/snippets/copy-file-path-clipboard-osx/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Copy filepath to clipboard in OSX | OhDoyleRules</title><meta content="Copy filepath to clipboard in OSX | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Copy filepath to clipboard in OSX" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Copy filepath to clipboard in OSX" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to copy a filepath to the clipboard in OSX" name=description><meta content="How to copy a filepath to the clipboard in OSX" itemprop=description><meta content="How to copy a filepath to the clipboard in OSX" property=og:description><meta content="How to copy a filepath to the clipboard in OSX" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Copy filepath to clipboard in OSX | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="osx, apple, mavericks, 10.9.3, applescript, automator, finder, clipboard, copy, paste, shortcut" itemprop=keywords><meta content="osx, apple, mavericks, 10.9.3, applescript, automator, finder, clipboard, copy, paste, shortcut" property=article:tag><meta content="osx, apple, mavericks, 10.9.3, applescript, automator, finder, clipboard, copy, paste, shortcut" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Copy filepath to clipboard in OSX</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 10, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>At <a title="WARPAINT Media" href=http://warpaintmedia.ca>WARPAINT</a>, we use <a title="Dropbox Homepage" href=https://www.dropbox.com>Dropbox</a> for collaborating on our files. This is awesome, but a lot of the times you get some pretty nasty file paths. Especially when you are trying to guide someone to a place where you saved a file.<p>I wanted to solve this problem by creating an AppleScript service that would allow everyone to <strong>Copy the selected file's path to the clipboard</strong>. Here is how I did it.<p>+++<p>We are going to be using <a href=http://en.wikipedia.org/wiki/Automator_(software)>Automator</a> to create a new service. Here is the description of Automator in case you don't know what it is:<blockquote><p>Automator is an application developed by Apple Inc. for OS X that implements point-and-click (or drag and drop) creation of workflows for automating repetitive tasks into batches for quicker alteration, thus saving time and effort over human intervention to manually change each file separately.</blockquote><p>So the first thing is to open Automator and create a new service. Like so:<div class=center><a href=/images/clipboard-1.png target=_blank> <img src=/images/clipboard-1.png width=720> </a></div><p>Then you need to select <code>files or folders</code> for "Service receives selected" and choose <code>Finder.app</code> for the second option. The do a search for <code>applescript</code> and drag the <code>Run AppleScript</code> choice into the window on the right.<p>You will need to paste the following code into the AppleScript window:<pre class=language-applescript data-lang=applescript style=background:#2b303b;color:#c0c5ce><code class=language-applescript data-lang=applescript><span style=color:#b48ead>tell </span><span style=color:#ebcb8b>application </span><span>"</span><span style=color:#a3be8c>Finder</span><span>"
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Copy filepath to clipboard in OSX | OhDoyleRules</title><meta content="Copy filepath to clipboard in OSX | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Copy filepath to clipboard in OSX" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Copy filepath to clipboard in OSX" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to copy a filepath to the clipboard in OSX" name=description><meta content="How to copy a filepath to the clipboard in OSX" itemprop=description><meta content="How to copy a filepath to the clipboard in OSX" property=og:description><meta content="How to copy a filepath to the clipboard in OSX" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Copy filepath to clipboard in OSX | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="osx, apple, mavericks, 10.9.3, applescript, automator, finder, clipboard, copy, paste, shortcut" itemprop=keywords><meta content="osx, apple, mavericks, 10.9.3, applescript, automator, finder, clipboard, copy, paste, shortcut" property=article:tag><meta content="osx, apple, mavericks, 10.9.3, applescript, automator, finder, clipboard, copy, paste, shortcut" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Copy filepath to clipboard in OSX</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 10, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>At <a rel="noopener nofollow noreferrer" title="WARPAINT Media" href=http://warpaintmedia.ca target=_blank>WARPAINT</a>, we use <a rel="noopener nofollow noreferrer" title="Dropbox Homepage" href=https://www.dropbox.com target=_blank>Dropbox</a> for collaborating on our files. This is awesome, but a lot of the times you get some pretty nasty file paths. Especially when you are trying to guide someone to a place where you saved a file.<p>I wanted to solve this problem by creating an AppleScript service that would allow everyone to <strong>Copy the selected file's path to the clipboard</strong>. Here is how I did it.<p>+++<p>We are going to be using <a rel="noopener nofollow noreferrer" href=http://en.wikipedia.org/wiki/Automator_(software) target=_blank>Automator</a> to create a new service. Here is the description of Automator in case you don't know what it is:<blockquote><p>Automator is an application developed by Apple Inc. for OS X that implements point-and-click (or drag and drop) creation of workflows for automating repetitive tasks into batches for quicker alteration, thus saving time and effort over human intervention to manually change each file separately.</blockquote><p>So the first thing is to open Automator and create a new service. Like so:<div class=center><a href=/images/clipboard-1.png target=_blank> <img src=/images/clipboard-1.png width=720> </a></div><p>Then you need to select <code>files or folders</code> for "Service receives selected" and choose <code>Finder.app</code> for the second option. The do a search for <code>applescript</code> and drag the <code>Run AppleScript</code> choice into the window on the right.<p>You will need to paste the following code into the AppleScript window:<pre class=language-applescript data-lang=applescript style=background:#2b303b;color:#c0c5ce><code class=language-applescript data-lang=applescript><span style=color:#b48ead>tell </span><span style=color:#ebcb8b>application </span><span>"</span><span style=color:#a3be8c>Finder</span><span>"
 </span><span>  </span><span style=color:#b48ead>set </span><span style=color:#bf616a>sel </span><span style=color:#b48ead>to the</span><span> selection as </span><span style=color:#ebcb8b>text
 </span><span>  </span><span style=color:#b48ead>set the</span><span> clipboard to </span><span style=color:#96b5b4>POSIX path </span><span style=color:#b48ead>of</span><span> sel
 </span><span style=color:#b48ead>end tell
-</span></code></pre><p>When that is all done, it should look something like this.<div class=center><a href=/images/clipboard-2.png target=_blank> <img src=/images/clipboard-2.png width=720> </a></div><p>Go to <code>File > Save</code> or press <code>⌘S</code>. <strong>Do not Save-As</strong>. Enter in <code>Copy Path To Clipboard</code> as the name. <em>It shouldn't ask for a location</em>, it will just show an input field. This is perfectly fine.<p>Now open a new finder window and go to <code>Finder > Services > Services Preferences...</code> or <code>System Preferences > Keyboard > Shortcuts</code>. Select services on the left menu if it isn't already and scroll down to find <code>Copy Path To Clipboard</code>. This will open a window like this:<div class=center><a href=/images/clipboard-3.png target=_blank> <img src=/images/clipboard-3.png width=720> </a></div><p>Click on that item and make sure it is checked off, it should be by default. Then add a shortcut by clicking on the right side where it says "add shortcut". I made mine <code>⌃⌘\</code>. But if you have <a href=http://www.alfredapp.com/>Alfred.app</a> that might conflict with it's copy feature. So you choose.<div class=center><a href=/images/clipboard-4.png target=_blank> <img src=/images/clipboard-4.png width=720> </a></div><p>You can use these steps to run any AppleScript on a file you choose. Pretty slick!<p>Now when you have a file of folder selected in the Finder, you can right-click, go to Services, and select <code>Copy Path To Clipboard</code>!<div class=center><a href=/images/clipboard-5.png target=_blank> <img src=/images/clipboard-5.png width=646> </a></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>When that is all done, it should look something like this.<div class=center><a href=/images/clipboard-2.png target=_blank> <img src=/images/clipboard-2.png width=720> </a></div><p>Go to <code>File > Save</code> or press <code>⌘S</code>. <strong>Do not Save-As</strong>. Enter in <code>Copy Path To Clipboard</code> as the name. <em>It shouldn't ask for a location</em>, it will just show an input field. This is perfectly fine.<p>Now open a new finder window and go to <code>Finder > Services > Services Preferences...</code> or <code>System Preferences > Keyboard > Shortcuts</code>. Select services on the left menu if it isn't already and scroll down to find <code>Copy Path To Clipboard</code>. This will open a window like this:<div class=center><a href=/images/clipboard-3.png target=_blank> <img src=/images/clipboard-3.png width=720> </a></div><p>Click on that item and make sure it is checked off, it should be by default. Then add a shortcut by clicking on the right side where it says "add shortcut". I made mine <code>⌃⌘\</code>. But if you have <a rel="noopener nofollow noreferrer" href=http://www.alfredapp.com/ target=_blank>Alfred.app</a> that might conflict with it's copy feature. So you choose.<div class=center><a href=/images/clipboard-4.png target=_blank> <img src=/images/clipboard-4.png width=720> </a></div><p>You can use these steps to run any AppleScript on a file you choose. Pretty slick!<p>Now when you have a file of folder selected in the Finder, you can right-click, go to Services, and select <code>Copy Path To Clipboard</code>!<div class=center><a href=/images/clipboard-5.png target=_blank> <img src=/images/clipboard-5.png width=646> </a></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/easy-command-line-reverse-geocoding/index.html b/docs/snippets/easy-command-line-reverse-geocoding/index.html
index 447553f..1c30165 100644
--- a/docs/snippets/easy-command-line-reverse-geocoding/index.html
+++ b/docs/snippets/easy-command-line-reverse-geocoding/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Easy Command Line Reverse Geocoding | OhDoyleRules</title><meta content="Easy Command Line Reverse Geocoding | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Easy Command Line Reverse Geocoding" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Easy Command Line Reverse Geocoding" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Easily reverse geocode an address using the command line and the google maps API" name=description><meta content="Easily reverse geocode an address using the command line and the google maps API" itemprop=description><meta content="Easily reverse geocode an address using the command line and the google maps API" property=og:description><meta content="Easily reverse geocode an address using the command line and the google maps API" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Easy Command Line Reverse Geocoding | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="reverse, geocode, command, line, cli, terminal, json, google, maps" itemprop=keywords><meta content="reverse, geocode, command, line, cli, terminal, json, google, maps" property=article:tag><meta content="reverse, geocode, command, line, cli, terminal, json, google, maps" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Easy Command Line Reverse Geocoding</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 27, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Using this function you can easily reverse geocode an address into a <em>lat and lang</em> position. This uses the <a href=http://stedolan.github.io/jq/>jq executable</a> and the <a href=https://developers.google.com/maps/documentation/geocoding/#GeocodingRequests>Google Maps API</a>.<h4 id=requirements>Requirements</h4><p>This little snippet <a href=http://stedolan.github.io/jq/>requires jq to be installed</a>. It is very easy to install.<p>From the site:<blockquote><p>jq is a lightweight and flexible command-line JSON processor</blockquote><p>It is multi-platform, so no worries for Windows users.<p>Here is the meat:<h4 id=function>Function</h4><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#b48ead>function </span><span style=color:#8fa1b3>reverse-geocode</span><span>() {
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Easy Command Line Reverse Geocoding | OhDoyleRules</title><meta content="Easy Command Line Reverse Geocoding | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Easy Command Line Reverse Geocoding" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Easy Command Line Reverse Geocoding" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Easily reverse geocode an address using the command line and the google maps API" name=description><meta content="Easily reverse geocode an address using the command line and the google maps API" itemprop=description><meta content="Easily reverse geocode an address using the command line and the google maps API" property=og:description><meta content="Easily reverse geocode an address using the command line and the google maps API" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Easy Command Line Reverse Geocoding | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="reverse, geocode, command, line, cli, terminal, json, google, maps" itemprop=keywords><meta content="reverse, geocode, command, line, cli, terminal, json, google, maps" property=article:tag><meta content="reverse, geocode, command, line, cli, terminal, json, google, maps" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Easy Command Line Reverse Geocoding</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 27, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>Using this function you can easily reverse geocode an address into a <em>lat and lang</em> position. This uses the <a rel="noopener nofollow noreferrer" href=http://stedolan.github.io/jq/ target=_blank>jq executable</a> and the <a rel="noopener nofollow noreferrer" href=https://developers.google.com/maps/documentation/geocoding/#GeocodingRequests target=_blank>Google Maps API</a>.<h4 id=requirements>Requirements</h4><p>This little snippet <a rel="noopener nofollow noreferrer" href=http://stedolan.github.io/jq/ target=_blank>requires jq to be installed</a>. It is very easy to install.<p>From the site:<blockquote><p>jq is a lightweight and flexible command-line JSON processor</blockquote><p>It is multi-platform, so no worries for Windows users.<p>Here is the meat:<h4 id=function>Function</h4><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#b48ead>function </span><span style=color:#8fa1b3>reverse-geocode</span><span>() {
 </span><span>  </span><span style=color:#65737e># replace spaces with + signs
 </span><span>  </span><span style=color:#bf616a>STRING</span><span>=$</span><span style=color:#a3be8c>(</span><span style=color:#96b5b4>echo </span><span>$</span><span style=color:#bf616a>1 </span><span>| </span><span style=color:#bf616a>tr </span><span>' ' '</span><span style=color:#a3be8c>+</span><span>'</span><span style=color:#a3be8c>)
 </span><span>  </span><span style=color:#65737e># save results
diff --git a/docs/snippets/easy-ffmpeg-video-posters/index.html b/docs/snippets/easy-ffmpeg-video-posters/index.html
index 7c9fd83..3c9fd44 100644
--- a/docs/snippets/easy-ffmpeg-video-posters/index.html
+++ b/docs/snippets/easy-ffmpeg-video-posters/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Easy FFmpeg Video Posters | OhDoyleRules</title><meta content="Easy FFmpeg Video Posters | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Easy FFmpeg Video Posters" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Easy FFmpeg Video Posters" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Take in a list of video files and generate a poster image for each one" name=description><meta content="Take in a list of video files and generate a poster image for each one" itemprop=description><meta content="Take in a list of video files and generate a poster image for each one" property=og:description><meta content="Take in a list of video files and generate a poster image for each one" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Easy FFmpeg Video Posters | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="ffmpeg, video, poster, screenshot, image, thumbnail, command line" itemprop=keywords><meta content="ffmpeg, video, poster, screenshot, image, thumbnail, command line" property=article:tag><meta content="ffmpeg, video, poster, screenshot, image, thumbnail, command line" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Easy FFmpeg Video Posters</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>A week ago I was tasked with uploading about 20 different videos to a CMS. Normally for the HTML5 Video element to look nice, you should upload a <a href=http://www.w3.org/TR/2012/WD-html5-20121025/the-video-element.html#attr-video-poster>poster image</a> so that there can be something showing before the video starts to play.<p>In my case, I had to generate a poster for each of these 20 videos. This would have taken a long time, so I scripted it using FFmpeg!<p>Here is the script:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e>#!/usr/bin/env bash
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Easy FFmpeg Video Posters | OhDoyleRules</title><meta content="Easy FFmpeg Video Posters | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Easy FFmpeg Video Posters" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Easy FFmpeg Video Posters" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Take in a list of video files and generate a poster image for each one" name=description><meta content="Take in a list of video files and generate a poster image for each one" itemprop=description><meta content="Take in a list of video files and generate a poster image for each one" property=og:description><meta content="Take in a list of video files and generate a poster image for each one" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Easy FFmpeg Video Posters | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="ffmpeg, video, poster, screenshot, image, thumbnail, command line" itemprop=keywords><meta content="ffmpeg, video, poster, screenshot, image, thumbnail, command line" property=article:tag><meta content="ffmpeg, video, poster, screenshot, image, thumbnail, command line" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Easy FFmpeg Video Posters</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>A week ago I was tasked with uploading about 20 different videos to a CMS. Normally for the HTML5 Video element to look nice, you should upload a <a rel="noopener nofollow noreferrer" href=http://www.w3.org/TR/2012/WD-html5-20121025/the-video-element.html#attr-video-poster target=_blank>poster image</a> so that there can be something showing before the video starts to play.<p>In my case, I had to generate a poster for each of these 20 videos. This would have taken a long time, so I scripted it using FFmpeg!<p>Here is the script:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e>#!/usr/bin/env bash
 </span><span>
 </span><span style=color:#65737e># take in mp4, take screenshot at 5 seconds
 </span><span style=color:#65737e># output same filename, but with jpg extension
diff --git a/docs/snippets/grunt-terminal-notifier-setup/index.html b/docs/snippets/grunt-terminal-notifier-setup/index.html
index 1fe3da9..1db03d5 100644
--- a/docs/snippets/grunt-terminal-notifier-setup/index.html
+++ b/docs/snippets/grunt-terminal-notifier-setup/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>grunt terminal-notifier setup | OhDoyleRules</title><meta content="grunt terminal-notifier setup | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="grunt terminal-notifier setup" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="grunt terminal-notifier setup" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="grunt terminal-notifier setup" name=description><meta content="grunt terminal-notifier setup" itemprop=description><meta content="grunt terminal-notifier setup" property=og:description><meta content="grunt terminal-notifier setup" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="grunt terminal-notifier setup | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grunt, terminal-notifier, setup, git, shell, notification, osx, mac, desktop" itemprop=keywords><meta content="grunt, terminal-notifier, setup, git, shell, notification, osx, mac, desktop" property=article:tag><meta content="grunt, terminal-notifier, setup, git, shell, notification, osx, mac, desktop" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">grunt terminal-notifier setup</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 07, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I just downloaded the new Mountain Lion, finally. One of the biggest new things is the cool little native notifications akin to growl. I thought it would be cool to get a nice notification when my "grunt watch" task finished. First things first. You need to install <a title="alloy/terminal notifier" href=https://github.com/alloy/terminal-notifier>terminal-notifier</a>. This allows you to interact with the native OSX notifications system.<p>There is a ruby gem and a standalone ".app". Once this is installed, you will need to grab the <a href=https://github.com/alextucker/grunt-growl title=alextucker/grunt-growl>grunt-growl</a> plugin. There are more instructions there for the terminal-notifier app. Now you will need to setup a new task in your gruntfile:<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span>growl: {
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>grunt terminal-notifier setup | OhDoyleRules</title><meta content="grunt terminal-notifier setup | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="grunt terminal-notifier setup" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="grunt terminal-notifier setup" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="grunt terminal-notifier setup" name=description><meta content="grunt terminal-notifier setup" itemprop=description><meta content="grunt terminal-notifier setup" property=og:description><meta content="grunt terminal-notifier setup" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="grunt terminal-notifier setup | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="grunt, terminal-notifier, setup, git, shell, notification, osx, mac, desktop" itemprop=keywords><meta content="grunt, terminal-notifier, setup, git, shell, notification, osx, mac, desktop" property=article:tag><meta content="grunt, terminal-notifier, setup, git, shell, notification, osx, mac, desktop" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">grunt terminal-notifier setup</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 07, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I just downloaded the new Mountain Lion, finally. One of the biggest new things is the cool little native notifications akin to growl. I thought it would be cool to get a nice notification when my "grunt watch" task finished. First things first. You need to install <a rel="noopener nofollow noreferrer" title="alloy/terminal notifier" href=https://github.com/alloy/terminal-notifier target=_blank>terminal-notifier</a>. This allows you to interact with the native OSX notifications system.<p>There is a ruby gem and a standalone ".app". Once this is installed, you will need to grab the <a rel="noopener nofollow noreferrer" href=https://github.com/alextucker/grunt-growl target=_blank title=alextucker/grunt-growl>grunt-growl</a> plugin. There are more instructions there for the terminal-notifier app. Now you will need to setup a new task in your gruntfile:<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span>growl: {
 </span><span>  css: {
 </span><span>    title: '</span><span style=color:#a3be8c>STYLUS BUILT</span><span>',
 </span><span>    message: '</span><span style=color:#a3be8c>css/style.css has been created</span><span>'
diff --git a/docs/snippets/hostmonster-phpmailer/index.html b/docs/snippets/hostmonster-phpmailer/index.html
index b532f59..9ad93d4 100644
--- a/docs/snippets/hostmonster-phpmailer/index.html
+++ b/docs/snippets/hostmonster-phpmailer/index.html
@@ -4,4 +4,4 @@
 </span><span>$mail->SMTPAuth = true; // yes to auth please
 </span><span>$mail->Port = 26; // nope not port 25, 26!!
 </span><span>$mail->Host = 'host286.hostmonster.com';
-</span></code></pre><p>Now your host may differ. I used <a href=http://mxtoolbox.com/>this tool</a> to check the MX records for the domain. After the check is complete, you will see a small table showing the hostname, IP address, TTL, and some links. <strong>Click "SMTP Test"</strong>.<p>Once that text completes, you will see another table. The first result is the "SMTP Reverse Banner Check". Copy the hostname, which is the domain in that value field.<p>Hopefully this works for you. I had a hell of a time getting the correct settings. <em>My pain is your gain</em>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Now your host may differ. I used <a rel="noopener nofollow noreferrer" href=http://mxtoolbox.com/ target=_blank>this tool</a> to check the MX records for the domain. After the check is complete, you will see a small table showing the hostname, IP address, TTL, and some links. <strong>Click "SMTP Test"</strong>.<p>Once that text completes, you will see another table. The first result is the "SMTP Reverse Banner Check". Copy the hostname, which is the domain in that value field.<p>Hopefully this works for you. I had a hell of a time getting the correct settings. <em>My pain is your gain</em>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/index.html b/docs/snippets/index.html
index b64efaf..af5929c 100644
--- a/docs/snippets/index.html
+++ b/docs/snippets/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Snippets | OhDoyleRules</title><meta content="Snippets | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Snippets itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Snippets name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The snippets category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The snippets category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The snippets category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The snippets category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Bash select example" href=https://ohdoylerules.com/snippets/bash-select-example/>Bash select example</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 07, 2014</span></span><div class=post-intro><p>An example of how to use the select command in bash to pass arguments to functions<p><a title="Read Bash select example" class=read-more href=https://ohdoylerules.com/snippets/bash-select-example/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Easy FFmpeg Video Posters" href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/>Easy FFmpeg Video Posters</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2015</span></span><div class=post-intro><p>Take in a list of video files and generate a poster image for each one<p><a title="Read Easy FFmpeg Video Posters" class=read-more href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/snippets/nodelist-each/ title=nodelist.each>nodelist.each</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2012</span></span><div class=post-intro><p>nodelist.prototype.each in javascript<p><a title="Read nodelist.each" class=read-more href=https://ohdoylerules.com/snippets/nodelist-each/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple HTML5 Notifications" href=https://ohdoylerules.com/snippets/simple-html5-notification/>Simple HTML5 Notifications</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div class=post-intro><p>Simple HTML5 Notifications<p><a title="Read Simple HTML5 Notifications" class=read-more href=https://ohdoylerules.com/snippets/simple-html5-notification/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PhalconPHP Crop Image To Fit" href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/>PhalconPHP Crop Image To Fit</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 24, 2014</span></span><div class=post-intro><p>How to crop and scale an image to fit specific dimensions in Phalcon PHP<p><a title="Read PhalconPHP Crop Image To Fit" class=read-more href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Validate Email With Lua" href=https://ohdoylerules.com/snippets/validate-email-with-lua/>Validate Email With Lua</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2015</span></span><div class=post-intro><p>A verbose email validation function for Lua<p><a title="Read Validate Email With Lua" class=read-more href=https://ohdoylerules.com/snippets/validate-email-with-lua/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Bitbucket Weekly Reports Using Make (Integromat)" href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/>Bitbucket Weekly Reports Using Make (Integromat)</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 06, 2022</span></span><div class=post-intro><p>Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository<p><a title="Read Bitbucket Weekly Reports Using Make (Integromat)" class=read-more href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vuex Crosstab Plugin" href=https://ohdoylerules.com/snippets/vuex-crosstab/>Vuex Crosstab Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div class=post-intro><p>CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab<p><a title="Read Vuex Crosstab Plugin" class=read-more href=https://ohdoylerules.com/snippets/vuex-crosstab/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Laravel `when` Method To Support Multiple Queries" href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/>Using Laravel `when` Method To Support Multiple Queries</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2022</span></span><div class=post-intro><p>How to use the `when` method on database collections in Laravel to create more flexible and readable code<p><a title="Read Using Laravel `when` Method To Support Multiple Queries" class=read-more href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Randomly Generate A Password In Bash" href=https://ohdoylerules.com/snippets/bash-random-password-generation/>Randomly Generate A Password In Bash</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 16, 2014</span></span><div class=post-intro><p>Randomly generate a password of specified length and then copy it to the clipboard<p><a title="Read Randomly Generate A Password In Bash" class=read-more href=https://ohdoylerules.com/snippets/bash-random-password-generation/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WYSIWYG in PyroCMS Widgets" href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/>WYSIWYG in PyroCMS Widgets</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 10, 2012</span></span><div class=post-intro><p>WYSIWYG in PyroCMS Widgets<p><a title="Read WYSIWYG in PyroCMS Widgets" class=read-more href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Copy filepath to clipboard in OSX" href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/>Copy filepath to clipboard in OSX</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 10, 2014</span></span><div class=post-intro><p>How to copy a filepath to the clipboard in OSX<p><a title="Read Copy filepath to clipboard in OSX" class=read-more href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Easy Command Line Reverse Geocoding" href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/>Easy Command Line Reverse Geocoding</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 27, 2013</span></span><div class=post-intro><p>Easily reverse geocode an address using the command line and the google maps API<p><a title="Read Easy Command Line Reverse Geocoding" class=read-more href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vuex Stateful URL Plugin" href=https://ohdoylerules.com/snippets/vuex-stateful-url/>Vuex Stateful URL Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div class=post-intro><p>StatefulURL is a Vuex plugin that can read and write the state from a query string<p><a title="Read Vuex Stateful URL Plugin" class=read-more href=https://ohdoylerules.com/snippets/vuex-stateful-url/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Render PHP File With Data" href=https://ohdoylerules.com/snippets/render-php-with-data/>Render PHP File With Data</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div class=post-intro><p>Render PHP File With Data<p><a title="Read Render PHP File With Data" class=read-more href=https://ohdoylerules.com/snippets/render-php-with-data/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Tailwind Screens In JS" href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/>Tailwind Screens In JS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 05, 2020</span></span><div class=post-intro><p>Detect if a tailwind screen value matches the current window<p><a title="Read Tailwind Screens In JS" class=read-more href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Running Go (golang) in Docker" href=https://ohdoylerules.com/snippets/running-go-in-docker/>Running Go (golang) in Docker</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 28, 2017</span></span><div class=post-intro><p>How to run and deploy golang applications inside a Docker container.<p><a title="Read Running Go (golang) in Docker" class=read-more href=https://ohdoylerules.com/snippets/running-go-in-docker/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="compare multiple md5 hashes" href=https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/>compare multiple md5 hashes</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div class=post-intro><p>compare multiple md5 hashes<p><a title="Read compare multiple md5 hashes" class=read-more href=https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Autocomplete TailwindCSS In Custom Attributes/Strings" href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/>Autocomplete TailwindCSS In Custom Attributes/Strings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 06, 2022</span></span><div class=post-intro><p>Use tailwindcss autocomplete classes and logic inside non-default attributes or strings<p><a title="Read Autocomplete TailwindCSS In Custom Attributes/Strings" class=read-more href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Modernizr SVG Fallback to PNG" href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/>Modernizr SVG Fallback to PNG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2013</span></span><div class=post-intro><p>Modernizr SVG Fallback to PNG<p><a title="Read Modernizr SVG Fallback to PNG" class=read-more href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue stateful form component" href=https://ohdoylerules.com/snippets/vue-stateful-form-component/>Vue stateful form component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 24, 2021</span></span><div class=post-intro><p>Create a Vue form that escalates all events to the top level and supports v-model<p><a title="Read Vue stateful form component" class=read-more href=https://ohdoylerules.com/snippets/vue-stateful-form-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Purge A File From A Github Repo" href=https://ohdoylerules.com/snippets/purge-file-from-github/>Purge A File From A Github Repo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2014</span></span><div class=post-intro><p>How to permanently remove a file from a repo and it's history<p><a title="Read Purge A File From A Github Repo" class=read-more href=https://ohdoylerules.com/snippets/purge-file-from-github/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="grunt terminal-notifier setup" href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/>grunt terminal-notifier setup</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 07, 2013</span></span><div class=post-intro><p>grunt terminal-notifier setup<p><a title="Read grunt terminal-notifier setup" class=read-more href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Backup MySQL And Email It" href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/>Backup MySQL And Email It</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 24, 2016</span></span><div class=post-intro><p>Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script<p><a title="Read Backup MySQL And Email It" class=read-more href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="jQuery Plugin Snippets for Sublime Text 2" href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/>jQuery Plugin Snippets for Sublime Text 2</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div class=post-intro><p>jQuery Plugin Snippets for Sublime Text 2<p><a title="Read jQuery Plugin Snippets for Sublime Text 2" class=read-more href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Target Mozilla-only in CSS" href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/>Target Mozilla-only in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2012</span></span><div class=post-intro><p>Target Mozilla-only in CSS<p><a title="Read Target Mozilla-only in CSS" class=read-more href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Get Wordpress via Command Line" href=https://ohdoylerules.com/snippets/wordpress-via-command-line/>Get Wordpress via Command Line</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 21, 2013</span></span><div class=post-intro><p>Download and unzip the latest Wordpress version, all via command line<p><a title="Read Get Wordpress via Command Line" class=read-more href=https://ohdoylerules.com/snippets/wordpress-via-command-line/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Detect Animation Events in Javascript" href=https://ohdoylerules.com/snippets/animation-events-in-javascript/>Detect Animation Events in Javascript</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 31, 2013</span></span><div class=post-intro><p>Detect Animation Events in Javascript<p><a title="Read Detect Animation Events in Javascript" class=read-more href=https://ohdoylerules.com/snippets/animation-events-in-javascript/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Versioning Service Workers In Hugo" href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/>Versioning Service Workers In Hugo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 21, 2022</span></span><div class=post-intro><p>How to use Hugo pipes and resources to version your service worker scripts<p><a title="Read Versioning Service Workers In Hugo" class=read-more href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Setup A Raspberry Pi with PHP And Lighttpd" href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/>Setup A Raspberry Pi with PHP And Lighttpd</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 05, 2022</span></span><div class=post-intro><p>Setup a raspberry pi with php 8.1 and the latest lighttpd web server<p><a title="Read Setup A Raspberry Pi with PHP And Lighttpd" class=read-more href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="zsh new file && open file function" href=https://ohdoylerules.com/snippets/zsh-new-open-function/>zsh new file && open file function</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 13, 2012</span></span><div class=post-intro><p>zsh new file && open file function<p><a title="Read zsh new file && open file function" class=read-more href=https://ohdoylerules.com/snippets/zsh-new-open-function/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Node.js in an AppleScript" href=https://ohdoylerules.com/snippets/using-node-in-applescript/>Using Node.js in an AppleScript</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 12, 2014</span></span><div class=post-intro><p>How to use Node.js in an AppleScript<p><a title="Read Using Node.js in an AppleScript" class=read-more href=https://ohdoylerules.com/snippets/using-node-in-applescript/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple PHP JSON Response" href=https://ohdoylerules.com/snippets/simple-php-json-response/>Simple PHP JSON Response</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2015</span></span><div class=post-intro><p>Create a simple JSON response using PHP<p><a title="Read Simple PHP JSON Response" class=read-more href=https://ohdoylerules.com/snippets/simple-php-json-response/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Install the latest Node.js on Amazon Linux" href=https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/>Install the latest Node.js on Amazon Linux</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2017</span></span><div class=post-intro><p>How to install the latest version of node.js on the Amazon Linux AMI<p><a title="Read Install the latest Node.js on Amazon Linux" class=read-more href=https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="List File Permission Numbers" href=https://ohdoylerules.com/snippets/list-file-permission-numbers/>List File Permission Numbers</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 08, 2013</span></span><div class=post-intro><p>Easily list the chmod numbers for all the files in a folder<p><a title="Read List File Permission Numbers" class=read-more href=https://ohdoylerules.com/snippets/list-file-permission-numbers/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Decrypt-Encrypt Functions From Command Line" href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/>Decrypt-Encrypt Functions From Command Line</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2013</span></span><div class=post-intro><p>Functions to encrypt and then decrypt files from the command line with OpenSSL<p><a title="Read Decrypt-Encrypt Functions From Command Line" class=read-more href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Salt.js micro selector library" href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/>Salt.js micro selector library</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2013</span></span><div class=post-intro><p>salt.js is micro DOM selector library. Minified, it comes in at 255 bytes<p><a title="Read Salt.js micro selector library" class=read-more href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Lodash i18n (translation) function" href=https://ohdoylerules.com/snippets/lodash-translation-function/>Lodash i18n (translation) function</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 22, 2021</span></span><div class=post-intro><p>An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions<p><a title="Read Lodash i18n (translation) function" class=read-more href=https://ohdoylerules.com/snippets/lodash-translation-function/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Color Helpers In Fish Shell" href=https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/>Color Helpers In Fish Shell</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 03, 2017</span></span><div class=post-intro><p>How to easily create a color function for printing colorized output<p><a title="Read Color Helpers In Fish Shell" class=read-more href=https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Apax apache theme in htdocs" href=https://ohdoylerules.com/snippets/apax-in-htdocs/>Apax apache theme in htdocs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 02, 2013</span></span><div class=post-intro><p>Apax apache theme in htdocs<p><a title="Read Apax apache theme in htdocs" class=read-more href=https://ohdoylerules.com/snippets/apax-in-htdocs/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="HostMonster PHPMailer Settings" href=https://ohdoylerules.com/snippets/hostmonster-phpmailer/>HostMonster PHPMailer Settings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2013</span></span><div class=post-intro><p>How to setup PHPMailer on a HostMonster hosting server<p><a title="Read HostMonster PHPMailer Settings" class=read-more href=https://ohdoylerules.com/snippets/hostmonster-phpmailer/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Lodash memoize with a timeout" href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/>Lodash memoize with a timeout</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 20, 2021</span></span><div class=post-intro><p>Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values<p><a title="Read Lodash memoize with a timeout" class=read-more href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Snippets | OhDoyleRules</title><meta content="Snippets | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Snippets itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Snippets name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The snippets category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The snippets category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The snippets category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The snippets category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Vue stateful form component" href=https://ohdoylerules.com/snippets/vue-stateful-form-component/>Vue stateful form component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 24, 2021</span></span><div class=post-intro><p>Create a Vue form that escalates all events to the top level and supports v-model<p><a title="Read Vue stateful form component" class=read-more href=https://ohdoylerules.com/snippets/vue-stateful-form-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WYSIWYG in PyroCMS Widgets" href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/>WYSIWYG in PyroCMS Widgets</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 10, 2012</span></span><div class=post-intro><p>WYSIWYG in PyroCMS Widgets<p><a title="Read WYSIWYG in PyroCMS Widgets" class=read-more href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Lodash i18n (translation) function" href=https://ohdoylerules.com/snippets/lodash-translation-function/>Lodash i18n (translation) function</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 22, 2021</span></span><div class=post-intro><p>An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions<p><a title="Read Lodash i18n (translation) function" class=read-more href=https://ohdoylerules.com/snippets/lodash-translation-function/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Easy Command Line Reverse Geocoding" href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/>Easy Command Line Reverse Geocoding</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 27, 2013</span></span><div class=post-intro><p>Easily reverse geocode an address using the command line and the google maps API<p><a title="Read Easy Command Line Reverse Geocoding" class=read-more href=https://ohdoylerules.com/snippets/easy-command-line-reverse-geocoding/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="compare multiple md5 hashes" href=https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/>compare multiple md5 hashes</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 15, 2013</span></span><div class=post-intro><p>compare multiple md5 hashes<p><a title="Read compare multiple md5 hashes" class=read-more href=https://ohdoylerules.com/snippets/compare-multiple-md5-hashes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Purge A File From A Github Repo" href=https://ohdoylerules.com/snippets/purge-file-from-github/>Purge A File From A Github Repo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2014</span></span><div class=post-intro><p>How to permanently remove a file from a repo and it's history<p><a title="Read Purge A File From A Github Repo" class=read-more href=https://ohdoylerules.com/snippets/purge-file-from-github/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a href=https://ohdoylerules.com/snippets/nodelist-each/ title=nodelist.each>nodelist.each</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2012</span></span><div class=post-intro><p>nodelist.prototype.each in javascript<p><a title="Read nodelist.each" class=read-more href=https://ohdoylerules.com/snippets/nodelist-each/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Copy filepath to clipboard in OSX" href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/>Copy filepath to clipboard in OSX</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 10, 2014</span></span><div class=post-intro><p>How to copy a filepath to the clipboard in OSX<p><a title="Read Copy filepath to clipboard in OSX" class=read-more href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="HostMonster PHPMailer Settings" href=https://ohdoylerules.com/snippets/hostmonster-phpmailer/>HostMonster PHPMailer Settings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2013</span></span><div class=post-intro><p>How to setup PHPMailer on a HostMonster hosting server<p><a title="Read HostMonster PHPMailer Settings" class=read-more href=https://ohdoylerules.com/snippets/hostmonster-phpmailer/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Validate Email With Lua" href=https://ohdoylerules.com/snippets/validate-email-with-lua/>Validate Email With Lua</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2015</span></span><div class=post-intro><p>A verbose email validation function for Lua<p><a title="Read Validate Email With Lua" class=read-more href=https://ohdoylerules.com/snippets/validate-email-with-lua/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Decrypt-Encrypt Functions From Command Line" href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/>Decrypt-Encrypt Functions From Command Line</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2013</span></span><div class=post-intro><p>Functions to encrypt and then decrypt files from the command line with OpenSSL<p><a title="Read Decrypt-Encrypt Functions From Command Line" class=read-more href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Setup A Raspberry Pi with PHP And Lighttpd" href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/>Setup A Raspberry Pi with PHP And Lighttpd</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 05, 2022</span></span><div class=post-intro><p>Setup a raspberry pi with php 8.1 and the latest lighttpd web server<p><a title="Read Setup A Raspberry Pi with PHP And Lighttpd" class=read-more href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Laravel `when` Method To Support Multiple Queries" href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/>Using Laravel `when` Method To Support Multiple Queries</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2022</span></span><div class=post-intro><p>How to use the `when` method on database collections in Laravel to create more flexible and readable code<p><a title="Read Using Laravel `when` Method To Support Multiple Queries" class=read-more href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Running Go (golang) in Docker" href=https://ohdoylerules.com/snippets/running-go-in-docker/>Running Go (golang) in Docker</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 28, 2017</span></span><div class=post-intro><p>How to run and deploy golang applications inside a Docker container.<p><a title="Read Running Go (golang) in Docker" class=read-more href=https://ohdoylerules.com/snippets/running-go-in-docker/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vuex Crosstab Plugin" href=https://ohdoylerules.com/snippets/vuex-crosstab/>Vuex Crosstab Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div class=post-intro><p>CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab<p><a title="Read Vuex Crosstab Plugin" class=read-more href=https://ohdoylerules.com/snippets/vuex-crosstab/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vuex Stateful URL Plugin" href=https://ohdoylerules.com/snippets/vuex-stateful-url/>Vuex Stateful URL Plugin</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div class=post-intro><p>StatefulURL is a Vuex plugin that can read and write the state from a query string<p><a title="Read Vuex Stateful URL Plugin" class=read-more href=https://ohdoylerules.com/snippets/vuex-stateful-url/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple PHP JSON Response" href=https://ohdoylerules.com/snippets/simple-php-json-response/>Simple PHP JSON Response</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2015</span></span><div class=post-intro><p>Create a simple JSON response using PHP<p><a title="Read Simple PHP JSON Response" class=read-more href=https://ohdoylerules.com/snippets/simple-php-json-response/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Bitbucket Weekly Reports Using Make (Integromat)" href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/>Bitbucket Weekly Reports Using Make (Integromat)</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 06, 2022</span></span><div class=post-intro><p>Use Make (Integromat) to create a nice weekly report in Slack for all the closed pull-requests in a Bitbucket repository<p><a title="Read Bitbucket Weekly Reports Using Make (Integromat)" class=read-more href=https://ohdoylerules.com/snippets/bitbucket-weekly-reports-using-integromat-make/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="zsh new file && open file function" href=https://ohdoylerules.com/snippets/zsh-new-open-function/>zsh new file && open file function</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 13, 2012</span></span><div class=post-intro><p>zsh new file && open file function<p><a title="Read zsh new file && open file function" class=read-more href=https://ohdoylerules.com/snippets/zsh-new-open-function/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PhalconPHP Crop Image To Fit" href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/>PhalconPHP Crop Image To Fit</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 24, 2014</span></span><div class=post-intro><p>How to crop and scale an image to fit specific dimensions in Phalcon PHP<p><a title="Read PhalconPHP Crop Image To Fit" class=read-more href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Backup MySQL And Email It" href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/>Backup MySQL And Email It</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 24, 2016</span></span><div class=post-intro><p>Don't bother paying for a SaaS that creates MySQL backups and emails them to you on a schedule, you can do this with CRON and a small script<p><a title="Read Backup MySQL And Email It" class=read-more href=https://ohdoylerules.com/snippets/backup-mysql-and-email-it/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Lodash memoize with a timeout" href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/>Lodash memoize with a timeout</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 20, 2021</span></span><div class=post-intro><p>Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values<p><a title="Read Lodash memoize with a timeout" class=read-more href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Versioning Service Workers In Hugo" href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/>Versioning Service Workers In Hugo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 21, 2022</span></span><div class=post-intro><p>How to use Hugo pipes and resources to version your service worker scripts<p><a title="Read Versioning Service Workers In Hugo" class=read-more href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="List File Permission Numbers" href=https://ohdoylerules.com/snippets/list-file-permission-numbers/>List File Permission Numbers</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 08, 2013</span></span><div class=post-intro><p>Easily list the chmod numbers for all the files in a folder<p><a title="Read List File Permission Numbers" class=read-more href=https://ohdoylerules.com/snippets/list-file-permission-numbers/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Get Wordpress via Command Line" href=https://ohdoylerules.com/snippets/wordpress-via-command-line/>Get Wordpress via Command Line</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 21, 2013</span></span><div class=post-intro><p>Download and unzip the latest Wordpress version, all via command line<p><a title="Read Get Wordpress via Command Line" class=read-more href=https://ohdoylerules.com/snippets/wordpress-via-command-line/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Detect Animation Events in Javascript" href=https://ohdoylerules.com/snippets/animation-events-in-javascript/>Detect Animation Events in Javascript</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 31, 2013</span></span><div class=post-intro><p>Detect Animation Events in Javascript<p><a title="Read Detect Animation Events in Javascript" class=read-more href=https://ohdoylerules.com/snippets/animation-events-in-javascript/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Autocomplete TailwindCSS In Custom Attributes/Strings" href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/>Autocomplete TailwindCSS In Custom Attributes/Strings</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 06, 2022</span></span><div class=post-intro><p>Use tailwindcss autocomplete classes and logic inside non-default attributes or strings<p><a title="Read Autocomplete TailwindCSS In Custom Attributes/Strings" class=read-more href=https://ohdoylerules.com/snippets/autocomplete-tailwind-classes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple HTML5 Notifications" href=https://ohdoylerules.com/snippets/simple-html5-notification/>Simple HTML5 Notifications</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div class=post-intro><p>Simple HTML5 Notifications<p><a title="Read Simple HTML5 Notifications" class=read-more href=https://ohdoylerules.com/snippets/simple-html5-notification/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Modernizr SVG Fallback to PNG" href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/>Modernizr SVG Fallback to PNG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2013</span></span><div class=post-intro><p>Modernizr SVG Fallback to PNG<p><a title="Read Modernizr SVG Fallback to PNG" class=read-more href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="jQuery Plugin Snippets for Sublime Text 2" href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/>jQuery Plugin Snippets for Sublime Text 2</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div class=post-intro><p>jQuery Plugin Snippets for Sublime Text 2<p><a title="Read jQuery Plugin Snippets for Sublime Text 2" class=read-more href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Bash select example" href=https://ohdoylerules.com/snippets/bash-select-example/>Bash select example</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 07, 2014</span></span><div class=post-intro><p>An example of how to use the select command in bash to pass arguments to functions<p><a title="Read Bash select example" class=read-more href=https://ohdoylerules.com/snippets/bash-select-example/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Easy FFmpeg Video Posters" href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/>Easy FFmpeg Video Posters</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 19, 2015</span></span><div class=post-intro><p>Take in a list of video files and generate a poster image for each one<p><a title="Read Easy FFmpeg Video Posters" class=read-more href=https://ohdoylerules.com/snippets/easy-ffmpeg-video-posters/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Randomly Generate A Password In Bash" href=https://ohdoylerules.com/snippets/bash-random-password-generation/>Randomly Generate A Password In Bash</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 16, 2014</span></span><div class=post-intro><p>Randomly generate a password of specified length and then copy it to the clipboard<p><a title="Read Randomly Generate A Password In Bash" class=read-more href=https://ohdoylerules.com/snippets/bash-random-password-generation/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Color Helpers In Fish Shell" href=https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/>Color Helpers In Fish Shell</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 03, 2017</span></span><div class=post-intro><p>How to easily create a color function for printing colorized output<p><a title="Read Color Helpers In Fish Shell" class=read-more href=https://ohdoylerules.com/snippets/color-helpers-in-fish-shell/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Salt.js micro selector library" href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/>Salt.js micro selector library</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2013</span></span><div class=post-intro><p>salt.js is micro DOM selector library. Minified, it comes in at 255 bytes<p><a title="Read Salt.js micro selector library" class=read-more href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Render PHP File With Data" href=https://ohdoylerules.com/snippets/render-php-with-data/>Render PHP File With Data</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div class=post-intro><p>Render PHP File With Data<p><a title="Read Render PHP File With Data" class=read-more href=https://ohdoylerules.com/snippets/render-php-with-data/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Node.js in an AppleScript" href=https://ohdoylerules.com/snippets/using-node-in-applescript/>Using Node.js in an AppleScript</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 12, 2014</span></span><div class=post-intro><p>How to use Node.js in an AppleScript<p><a title="Read Using Node.js in an AppleScript" class=read-more href=https://ohdoylerules.com/snippets/using-node-in-applescript/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Install the latest Node.js on Amazon Linux" href=https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/>Install the latest Node.js on Amazon Linux</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2017</span></span><div class=post-intro><p>How to install the latest version of node.js on the Amazon Linux AMI<p><a title="Read Install the latest Node.js on Amazon Linux" class=read-more href=https://ohdoylerules.com/snippets/install-latest-nodejs-on-amazon-linux/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Target Mozilla-only in CSS" href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/>Target Mozilla-only in CSS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2012</span></span><div class=post-intro><p>Target Mozilla-only in CSS<p><a title="Read Target Mozilla-only in CSS" class=read-more href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="grunt terminal-notifier setup" href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/>grunt terminal-notifier setup</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 07, 2013</span></span><div class=post-intro><p>grunt terminal-notifier setup<p><a title="Read grunt terminal-notifier setup" class=read-more href=https://ohdoylerules.com/snippets/grunt-terminal-notifier-setup/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Tailwind Screens In JS" href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/>Tailwind Screens In JS</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 05, 2020</span></span><div class=post-intro><p>Detect if a tailwind screen value matches the current window<p><a title="Read Tailwind Screens In JS" class=read-more href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Apax apache theme in htdocs" href=https://ohdoylerules.com/snippets/apax-in-htdocs/>Apax apache theme in htdocs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 02, 2013</span></span><div class=post-intro><p>Apax apache theme in htdocs<p><a title="Read Apax apache theme in htdocs" class=read-more href=https://ohdoylerules.com/snippets/apax-in-htdocs/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/jquery-plugin-snippets/index.html b/docs/snippets/jquery-plugin-snippets/index.html
index e423d92..4b2989c 100644
--- a/docs/snippets/jquery-plugin-snippets/index.html
+++ b/docs/snippets/jquery-plugin-snippets/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>jQuery Plugin Snippets for Sublime Text 2 | OhDoyleRules</title><meta content="jQuery Plugin Snippets for Sublime Text 2 | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="jQuery Plugin Snippets for Sublime Text 2" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/jquery-plugin-snippets/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/jquery-plugin-snippets/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="jQuery Plugin Snippets for Sublime Text 2" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="jQuery Plugin Snippets for Sublime Text 2" name=description><meta content="jQuery Plugin Snippets for Sublime Text 2" itemprop=description><meta content="jQuery Plugin Snippets for Sublime Text 2" property=og:description><meta content="jQuery Plugin Snippets for Sublime Text 2" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="jQuery Plugin Snippets for Sublime Text 2 | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="editor, Github, javascript, jquery, open source, Plugin, snippets, sublime text" itemprop=keywords><meta content="editor, Github, javascript, jquery, open source, Plugin, snippets, sublime text" property=article:tag><meta content="editor, Github, javascript, jquery, open source, Plugin, snippets, sublime text" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">jQuery Plugin Snippets for Sublime Text 2</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="jquery logo" src=/images/jquery.png></div><p>I created a <a href=https://github.com/james2doyle/jquery-plugin-snippets title=james2doyle/jquery-plugin-snippets>bunch of snippets</a> out of the patterns from <a title="shichuan javascript patterns" href=https://github.com/shichuan/javascript-patterns/tree/master/jquery-plugin-patterns>shichuans javascript patterns repo</a>.<p>These are for <a title="sublime text site" href=http://www.sublimetext.com/>Sublime Text 2</a> which everyone knows. You just clone the repo into the packages directory and they magically appear. If you don’t use sublime text…<div class=center><img alt="y u no use sublime text 2" src=/images/yunost2.jpg></div><p>I had to create that image because it didn’t exists for some reason.<p><a href=https://github.com/james2doyle/jquery-plugin-snippets title=james2doyle/jquery-plugin-snippets>Github Linky</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>jQuery Plugin Snippets for Sublime Text 2 | OhDoyleRules</title><meta content="jQuery Plugin Snippets for Sublime Text 2 | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="jQuery Plugin Snippets for Sublime Text 2" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/jquery-plugin-snippets/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/jquery-plugin-snippets/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="jQuery Plugin Snippets for Sublime Text 2" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="jQuery Plugin Snippets for Sublime Text 2" name=description><meta content="jQuery Plugin Snippets for Sublime Text 2" itemprop=description><meta content="jQuery Plugin Snippets for Sublime Text 2" property=og:description><meta content="jQuery Plugin Snippets for Sublime Text 2" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="jQuery Plugin Snippets for Sublime Text 2 | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="editor, Github, javascript, jquery, open source, Plugin, snippets, sublime text" itemprop=keywords><meta content="editor, Github, javascript, jquery, open source, Plugin, snippets, sublime text" property=article:tag><meta content="editor, Github, javascript, jquery, open source, Plugin, snippets, sublime text" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/jquery-plugin-snippets/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">jQuery Plugin Snippets for Sublime Text 2</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 28, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="jquery logo" src=/images/jquery.png></div><p>I created a <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/jquery-plugin-snippets target=_blank title=james2doyle/jquery-plugin-snippets>bunch of snippets</a> out of the patterns from <a rel="noopener nofollow noreferrer" title="shichuan javascript patterns" href=https://github.com/shichuan/javascript-patterns/tree/master/jquery-plugin-patterns target=_blank>shichuans javascript patterns repo</a>.<p>These are for <a rel="noopener nofollow noreferrer" title="sublime text site" href=http://www.sublimetext.com/ target=_blank>Sublime Text 2</a> which everyone knows. You just clone the repo into the packages directory and they magically appear. If you don’t use sublime text…<div class=center><img alt="y u no use sublime text 2" src=/images/yunost2.jpg></div><p>I had to create that image because it didn’t exists for some reason.<p><a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/jquery-plugin-snippets target=_blank title=james2doyle/jquery-plugin-snippets>Github Linky</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/list-file-permission-numbers/index.html b/docs/snippets/list-file-permission-numbers/index.html
index edc1aa9..6f22f05 100644
--- a/docs/snippets/list-file-permission-numbers/index.html
+++ b/docs/snippets/list-file-permission-numbers/index.html
@@ -7,4 +7,4 @@
 </span><span>644 -rw-r--r--   1 james2doyle   LICENSE
 </span></code></pre><p>greping the output<pre style=background:#2b303b;color:#c0c5ce><code><span>show-permissions | grep README.md
 </span><span>644 -rw-r--r--   1 james2doyle   README.md
-</span></code></pre><p>Here is the <a href=http://goo.gl/HS9Ar3>stackoverflow question</a> where I stole this from.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Here is the <a rel="noopener nofollow noreferrer" href=http://goo.gl/HS9Ar3 target=_blank>stackoverflow question</a> where I stole this from.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/lodash-memo-with-timeout/index.html b/docs/snippets/lodash-memo-with-timeout/index.html
index 50e19ce..1462434 100644
--- a/docs/snippets/lodash-memo-with-timeout/index.html
+++ b/docs/snippets/lodash-memo-with-timeout/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Lodash memoize with a timeout | OhDoyleRules</title><meta content="Lodash memoize with a timeout | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Lodash memoize with a timeout" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Lodash memoize with a timeout" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values" name=description><meta content="Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values" itemprop=description><meta content="Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values" property=og:description><meta content="Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Lodash memoize with a timeout | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="lodash, memo, ttl, timeout, cache, function, memoize" itemprop=keywords><meta content="lodash, memo, ttl, timeout, cache, function, memoize" property=article:tag><meta content="lodash, memo, ttl, timeout, cache, function, memoize" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Lodash memoize with a timeout</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 20, 2021</span></span><div itemprop="ArticleBody text" class=main-content><p>If you are familiar with <a href=https://lodash.com/docs/4.17.15>lodash</a> you may also be familiar with one of the very handy functions called <code>[memoize](https://lodash.com/docs/4.17.15#memoize)</code>.<p>The definition of <code>memoize</code> on the lodash site is quite verbose. So I will use the <a href=https://en.wikipedia.org/wiki/Memoization>definition on wikipedia</a>:<blockquote><p>In computing, "memoization" or "memoisation" is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.</blockquote><p>The default <code>memo</code> function in lodash uses a local Map to cache the results of each call. This means the results of the calls to <code>memo</code> will be cached for the entire browser session. The way you would clear the cache is to refresh or trigger a full navigation.<p>A function that returns the same result given the same input, is called a <a href=https://en.wikipedia.org/wiki/Pure_function>pure function</a>. So if you have a "pure function" that gets called a lot with the same arguments, and should have the same output given the same arguments, then this is a perfect candidate for memoization. Of course, it is perfectly fine to reach for memoization in order to keep things like expensive HTTP requests from being repeated.<p>But is a "session" based cache really the best cache for <code>memo</code>? Personally, I think that a time-based caching mechanism is better. What I mean is that the cache will only live for a specific amount of time and then expire.<p>Imagine a case where you just fetched a users account from your API. If for some reason your code calls that endpoint again just a few seconds later, is it worth redoing the request or should you return cached results given you just called that endpoint earlier?<p>If you are using the default cache, the request will never be run again unless you refresh. But there may have been changes to the results of the call but you can't rerun it. This is where a TTL cache comes in.<p>TTL (time to live) is the amount of time that needs to elapse before the cache needs to be refreshed. If you are familiar with the HTTP protocol, you may have come across this term when learning about cache headers.<p>So how do you implement a custom cache backend for lodash <code>memoize</code>? Easy! The <code>memoize</code> function allows you to write your own resolver function that lets you decide when to fetch from the cache or run the function again.<p>I've done the work for you and made a simple version in TypeScript that uses the current minute as a tracker for when the last call was:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/2a7428e6e740279f8cc7fbd2dd7b4f75.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/2a7428e6e740279f8cc7fbd2dd7b4f75.js src=about:blank></iframe><p>You can see in this function that we take in the arguments and add a time to the end. We then serialize that object as JSON and use that as our cache key. When lodash runs our new <code>memo</code> function, it will first compare the cached keys and see if they are different. If they are, then the function will actually run and the cached results will not be used and instead our original function will run, and the result of that run, will be cached. Subsequent calls repeat the whole process.<p>In this case, we only cache the results for one minute. So any calls to our new <code>memo</code> function that are over a minute old will run. This will allow some inefficient code that calls an endpoint too often to only make those calls if at least a minute has passed.<p>In this case, our new <code>memo</code> is almost like the <code>throttle</code> function in lodash except we get the results back when we call our <code>memo</code>. But if you need to control the mechanism of caching (maybe you want to use localstorage, the URL, or global state) then you can write your own <code>memoize</code>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Lodash memoize with a timeout | OhDoyleRules</title><meta content="Lodash memoize with a timeout | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Lodash memoize with a timeout" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Lodash memoize with a timeout" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values" name=description><meta content="Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values" itemprop=description><meta content="Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values" property=og:description><meta content="Use lodash memoize with a TTL/timeout. Allows calls to be cached by time as well as argument values" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Lodash memoize with a timeout | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="lodash, memo, ttl, timeout, cache, function, memoize" itemprop=keywords><meta content="lodash, memo, ttl, timeout, cache, function, memoize" property=article:tag><meta content="lodash, memo, ttl, timeout, cache, function, memoize" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/lodash-memo-with-timeout/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Lodash memoize with a timeout</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 20, 2021</span></span><div itemprop="ArticleBody text" class=main-content><p>If you are familiar with <a rel="noopener nofollow noreferrer" href=https://lodash.com/docs/4.17.15 target=_blank>lodash</a> you may also be familiar with one of the very handy functions called <code>[memoize](https://lodash.com/docs/4.17.15#memoize)</code>.<p>The definition of <code>memoize</code> on the lodash site is quite verbose. So I will use the <a rel="noopener nofollow noreferrer" href=https://en.wikipedia.org/wiki/Memoization target=_blank>definition on wikipedia</a>:<blockquote><p>In computing, "memoization" or "memoisation" is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.</blockquote><p>The default <code>memo</code> function in lodash uses a local Map to cache the results of each call. This means the results of the calls to <code>memo</code> will be cached for the entire browser session. The way you would clear the cache is to refresh or trigger a full navigation.<p>A function that returns the same result given the same input, is called a <a rel="noopener nofollow noreferrer" href=https://en.wikipedia.org/wiki/Pure_function target=_blank>pure function</a>. So if you have a "pure function" that gets called a lot with the same arguments, and should have the same output given the same arguments, then this is a perfect candidate for memoization. Of course, it is perfectly fine to reach for memoization in order to keep things like expensive HTTP requests from being repeated.<p>But is a "session" based cache really the best cache for <code>memo</code>? Personally, I think that a time-based caching mechanism is better. What I mean is that the cache will only live for a specific amount of time and then expire.<p>Imagine a case where you just fetched a users account from your API. If for some reason your code calls that endpoint again just a few seconds later, is it worth redoing the request or should you return cached results given you just called that endpoint earlier?<p>If you are using the default cache, the request will never be run again unless you refresh. But there may have been changes to the results of the call but you can't rerun it. This is where a TTL cache comes in.<p>TTL (time to live) is the amount of time that needs to elapse before the cache needs to be refreshed. If you are familiar with the HTTP protocol, you may have come across this term when learning about cache headers.<p>So how do you implement a custom cache backend for lodash <code>memoize</code>? Easy! The <code>memoize</code> function allows you to write your own resolver function that lets you decide when to fetch from the cache or run the function again.<p>I've done the work for you and made a simple version in TypeScript that uses the current minute as a tracker for when the last call was:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/2a7428e6e740279f8cc7fbd2dd7b4f75.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/2a7428e6e740279f8cc7fbd2dd7b4f75.js src=about:blank></iframe><p>You can see in this function that we take in the arguments and add a time to the end. We then serialize that object as JSON and use that as our cache key. When lodash runs our new <code>memo</code> function, it will first compare the cached keys and see if they are different. If they are, then the function will actually run and the cached results will not be used and instead our original function will run, and the result of that run, will be cached. Subsequent calls repeat the whole process.<p>In this case, we only cache the results for one minute. So any calls to our new <code>memo</code> function that are over a minute old will run. This will allow some inefficient code that calls an endpoint too often to only make those calls if at least a minute has passed.<p>In this case, our new <code>memo</code> is almost like the <code>throttle</code> function in lodash except we get the results back when we call our <code>memo</code>. But if you need to control the mechanism of caching (maybe you want to use localstorage, the URL, or global state) then you can write your own <code>memoize</code>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/lodash-translation-function/index.html b/docs/snippets/lodash-translation-function/index.html
index 77e430b..9596390 100644
--- a/docs/snippets/lodash-translation-function/index.html
+++ b/docs/snippets/lodash-translation-function/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Lodash i18n (translation) function | OhDoyleRules</title><meta content="Lodash i18n (translation) function | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Lodash i18n (translation) function" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/lodash-translation-function/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/lodash-translation-function/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Lodash i18n (translation) function" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions" name=description><meta content="An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions" itemprop=description><meta content="An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions" property=og:description><meta content="An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Lodash i18n (translation) function | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="lodash, i18n, internationalization, intl, translation, get, template, function" itemprop=keywords><meta content="lodash, i18n, internationalization, intl, translation, get, template, function" property=article:tag><meta content="lodash, i18n, internationalization, intl, translation, get, template, function" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/lodash-translation-function/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Lodash i18n (translation) function</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 22, 2021</span></span><div itemprop="ArticleBody text" class=main-content><p>One of the great things about <a href=https://lodash.com/>lodash</a> is that it gives you all the building blocks to create some really powerful functions.<p>I was working on a site that needed to use dynamic translations. The way this is done today is usually through a function that is loaded in your components and called with a key that then gets mapped to whatever language you are using.<p>You can pass in variables to the function in order to translate sentences that include placeholders. For example, you might want to have a welcome message like "Hello {name_of_user}!". Pretty common use case as you can imagine.<p>I managed to get a simple version of an <code>intl</code> function working by using a combination of <code>get</code>, <code>template</code>, and <code>memoize</code> functions in lodash.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/d00e06a5f4963a539e3aa0b2d5283d11.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/d00e06a5f4963a539e3aa0b2d5283d11.js src=about:blank></iframe><p>What we are doing here is using first getting a value from our translation file. We use the <code>template</code> function to parse the value we find from our translation function using a pattern that looks for single words wrapped with curly braces. Like <code>{this}</code>. We can then pass in any variables we wanted to replace in that string. Finally, we use <code>memoize</code> to avoid recompiling the template on each additional call. This will just return the cached results of any translations instead of grabbing the value and parsing the string again.<p>If you find yourself needing a simple translation function, this could be a good option if you already have lodash in your project.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Lodash i18n (translation) function | OhDoyleRules</title><meta content="Lodash i18n (translation) function | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Lodash i18n (translation) function" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/lodash-translation-function/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/lodash-translation-function/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Lodash i18n (translation) function" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions" name=description><meta content="An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions" itemprop=description><meta content="An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions" property=og:description><meta content="An incredibly simple i18n (internationalization + translation) function using lodash `get` and `template` functions" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Lodash i18n (translation) function | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="lodash, i18n, internationalization, intl, translation, get, template, function" itemprop=keywords><meta content="lodash, i18n, internationalization, intl, translation, get, template, function" property=article:tag><meta content="lodash, i18n, internationalization, intl, translation, get, template, function" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/lodash-translation-function/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Lodash i18n (translation) function</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 22, 2021</span></span><div itemprop="ArticleBody text" class=main-content><p>One of the great things about <a rel="noopener nofollow noreferrer" href=https://lodash.com/ target=_blank>lodash</a> is that it gives you all the building blocks to create some really powerful functions.<p>I was working on a site that needed to use dynamic translations. The way this is done today is usually through a function that is loaded in your components and called with a key that then gets mapped to whatever language you are using.<p>You can pass in variables to the function in order to translate sentences that include placeholders. For example, you might want to have a welcome message like "Hello {name_of_user}!". Pretty common use case as you can imagine.<p>I managed to get a simple version of an <code>intl</code> function working by using a combination of <code>get</code>, <code>template</code>, and <code>memoize</code> functions in lodash.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/d00e06a5f4963a539e3aa0b2d5283d11.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/d00e06a5f4963a539e3aa0b2d5283d11.js src=about:blank></iframe><p>What we are doing here is using first getting a value from our translation file. We use the <code>template</code> function to parse the value we find from our translation function using a pattern that looks for single words wrapped with curly braces. Like <code>{this}</code>. We can then pass in any variables we wanted to replace in that string. Finally, we use <code>memoize</code> to avoid recompiling the template on each additional call. This will just return the cached results of any translations instead of grabbing the value and parsing the string again.<p>If you find yourself needing a simple translation function, this could be a good option if you already have lodash in your project.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/modernizr-svg-fallback-to-png/index.html b/docs/snippets/modernizr-svg-fallback-to-png/index.html
index 4c0ffa2..c8b6384 100644
--- a/docs/snippets/modernizr-svg-fallback-to-png/index.html
+++ b/docs/snippets/modernizr-svg-fallback-to-png/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Modernizr SVG Fallback to PNG | OhDoyleRules</title><meta content="Modernizr SVG Fallback to PNG | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Modernizr SVG Fallback to PNG" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Modernizr SVG Fallback to PNG" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Modernizr SVG Fallback to PNG" name=description><meta content="Modernizr SVG Fallback to PNG" itemprop=description><meta content="Modernizr SVG Fallback to PNG" property=og:description><meta content="Modernizr SVG Fallback to PNG" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Modernizr SVG Fallback to PNG | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" itemprop=keywords><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" property=article:tag><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Modernizr SVG Fallback to PNG</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="Github Gists Logo" src=/images/githubgistlogo.png></div><p>I have been building a small project boilerplate for when I am starting new projects. I wrote this small snippet based on <a title="Todd Motto - mastering-svg-use-for-a-retina-web-fallbacks-with-png-script" href=http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/>this article</a>.<p>The only changes I made were wrapping it in a closure and combining all the vars to make it smaller. Of course your minifier would do this anyway unless you are using it inline after including Modernizr.<p><a href=https://gist.github.com/james2doyle/5659710 title=modernizr-svg-replace.js>Here is the gist</a>.<p>Or you can copy the current version from right here.<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#b48ead>if </span><span>(!</span><span style=color:#bf616a>Modernizr</span><span>.</span><span style=color:#bf616a>svg</span><span>) {
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Modernizr SVG Fallback to PNG | OhDoyleRules</title><meta content="Modernizr SVG Fallback to PNG | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Modernizr SVG Fallback to PNG" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Modernizr SVG Fallback to PNG" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Modernizr SVG Fallback to PNG" name=description><meta content="Modernizr SVG Fallback to PNG" itemprop=description><meta content="Modernizr SVG Fallback to PNG" property=og:description><meta content="Modernizr SVG Fallback to PNG" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Modernizr SVG Fallback to PNG | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" itemprop=keywords><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" property=article:tag><meta content="CodeIgniter, generator, Github, laravel, module, open source, PHP, PyroCMS, tool" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/modernizr-svg-fallback-to-png/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Modernizr SVG Fallback to PNG</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="Github Gists Logo" src=/images/githubgistlogo.png></div><p>I have been building a small project boilerplate for when I am starting new projects. I wrote this small snippet based on <a rel="noopener nofollow noreferrer" title="Todd Motto - mastering-svg-use-for-a-retina-web-fallbacks-with-png-script" href=http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/ target=_blank>this article</a>.<p>The only changes I made were wrapping it in a closure and combining all the vars to make it smaller. Of course your minifier would do this anyway unless you are using it inline after including Modernizr.<p><a rel="noopener nofollow noreferrer" href=https://gist.github.com/james2doyle/5659710 target=_blank title=modernizr-svg-replace.js>Here is the gist</a>.<p>Or you can copy the current version from right here.<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#b48ead>if </span><span>(!</span><span style=color:#bf616a>Modernizr</span><span>.</span><span style=color:#bf616a>svg</span><span>) {
 </span><span>  </span><span style=color:#65737e>// wrap this in a closure to not expose any conflicts
 </span><span>  (</span><span style=color:#b48ead>function</span><span>() {
 </span><span>    </span><span style=color:#65737e>// grab all images. getElementsByTagName works with IE5.5 and up
diff --git a/docs/snippets/nodelist-each/index.html b/docs/snippets/nodelist-each/index.html
index ed82068..561f210 100644
--- a/docs/snippets/nodelist-each/index.html
+++ b/docs/snippets/nodelist-each/index.html
@@ -14,4 +14,4 @@
 </span><span style=color:#bf616a>x</span><span>.</span><span style=color:#8fa1b3>each</span><span>(</span><span style=color:#b48ead>function</span><span>(</span><span style=color:#bf616a>elem</span><span>) {
 </span><span>    </span><span style=color:#bf616a>elem</span><span>.style.background = '</span><span style=color:#a3be8c>red</span><span>';
 </span><span>});
-</span></code></pre><p>Pretty cool. <a title="each prototype" href=http://jsfiddle.net/james2doyle/nrhgr/>Here is the fiddle</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Pretty cool. <a rel="noopener nofollow noreferrer" title="each prototype" href=http://jsfiddle.net/james2doyle/nrhgr/ target=_blank>Here is the fiddle</a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/openssl-encrypt-decrypt-functions/index.html b/docs/snippets/openssl-encrypt-decrypt-functions/index.html
index 23996af..db05726 100644
--- a/docs/snippets/openssl-encrypt-decrypt-functions/index.html
+++ b/docs/snippets/openssl-encrypt-decrypt-functions/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Decrypt-Encrypt Functions From Command Line | OhDoyleRules</title><meta content="Decrypt-Encrypt Functions From Command Line | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Decrypt-Encrypt Functions From Command Line" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Decrypt-Encrypt Functions From Command Line" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Functions to encrypt and then decrypt files from the command line with OpenSSL" name=description><meta content="Functions to encrypt and then decrypt files from the command line with OpenSSL" itemprop=description><meta content="Functions to encrypt and then decrypt files from the command line with OpenSSL" property=og:description><meta content="Functions to encrypt and then decrypt files from the command line with OpenSSL" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Decrypt-Encrypt Functions From Command Line | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="encrypt, decrypt, openssl, cli, terminal, shell, command line, shred, rc4" itemprop=keywords><meta content="encrypt, decrypt, openssl, cli, terminal, shell, command line, shred, rc4" property=article:tag><meta content="encrypt, decrypt, openssl, cli, terminal, shell, command line, shred, rc4" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Decrypt-Encrypt Functions From Command Line</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2013</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=preamble>Preamble</h3><p>I have been reading about encryption and security since the whole NSA/Edward Snowden thing. It is pretty intense stuff. Most of the security comes from the philosophy of "security through obfuscation". What this means, is that you are making it extremely difficult (expensive, time-consuming) to try and look at your "stuff".<p>I would suggest reading <a href=http://en.wikipedia.org/wiki/Key_size>this article on "Key Size"</a>. This is probably my favorite quote from the article:<blockquote><p>With a key of length <em>n</em> bits, there are <em>2n</em> possible keys. This number grows very rapidly as <em>n</em> increases. Moore's law suggests that computing power doubles roughly every 18 to 24 months, but even this doubling effect leaves the larger symmetric key lengths currently considered acceptable well out of reach.</blockquote><p>The best thing you can do for this type of encryption is <a href=https://tech.dropbox.com/2012/04/zxcvbn-realistic-password-strength-estimation/>pick a good password</a>.<h3 id=code>Code</h3><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e># take in a file and output an encrypted one
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Decrypt-Encrypt Functions From Command Line | OhDoyleRules</title><meta content="Decrypt-Encrypt Functions From Command Line | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Decrypt-Encrypt Functions From Command Line" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Decrypt-Encrypt Functions From Command Line" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Functions to encrypt and then decrypt files from the command line with OpenSSL" name=description><meta content="Functions to encrypt and then decrypt files from the command line with OpenSSL" itemprop=description><meta content="Functions to encrypt and then decrypt files from the command line with OpenSSL" property=og:description><meta content="Functions to encrypt and then decrypt files from the command line with OpenSSL" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Decrypt-Encrypt Functions From Command Line | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="encrypt, decrypt, openssl, cli, terminal, shell, command line, shred, rc4" itemprop=keywords><meta content="encrypt, decrypt, openssl, cli, terminal, shell, command line, shred, rc4" property=article:tag><meta content="encrypt, decrypt, openssl, cli, terminal, shell, command line, shred, rc4" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/openssl-encrypt-decrypt-functions/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Decrypt-Encrypt Functions From Command Line</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2013</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=preamble>Preamble</h3><p>I have been reading about encryption and security since the whole NSA/Edward Snowden thing. It is pretty intense stuff. Most of the security comes from the philosophy of "security through obfuscation". What this means, is that you are making it extremely difficult (expensive, time-consuming) to try and look at your "stuff".<p>I would suggest reading <a rel="noopener nofollow noreferrer" href=http://en.wikipedia.org/wiki/Key_size target=_blank>this article on "Key Size"</a>. This is probably my favorite quote from the article:<blockquote><p>With a key of length <em>n</em> bits, there are <em>2n</em> possible keys. This number grows very rapidly as <em>n</em> increases. Moore's law suggests that computing power doubles roughly every 18 to 24 months, but even this doubling effect leaves the larger symmetric key lengths currently considered acceptable well out of reach.</blockquote><p>The best thing you can do for this type of encryption is <a rel="noopener nofollow noreferrer" href=https://tech.dropbox.com/2012/04/zxcvbn-realistic-password-strength-estimation/ target=_blank>pick a good password</a>.<h3 id=code>Code</h3><pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e># take in a file and output an encrypted one
 </span><span style=color:#b48ead>function </span><span style=color:#8fa1b3>encrypt</span><span>() {
 </span><span>  </span><span style=color:#65737e># take in a file and output a new one with a `.enc` extension
 </span><span>  </span><span style=color:#bf616a>openssl</span><span> rc4</span><span style=color:#bf616a> -in </span><span>"$</span><span style=color:#bf616a>1</span><span>"</span><span style=color:#bf616a> -out </span><span>"$</span><span style=color:#bf616a>1</span><span>".enc
@@ -14,4 +14,4 @@
 </span><span>}
 </span></code></pre><p>This still leave an "open" file when the file is encrypted. Remember to remove the file securely. You can use <code>shred</code> or <code>gshred</code> (for OSX). Here is the info from the <code>--help</code> output of gshred:<blockquote><p>Overwrite the specified FILE(s) repeatedly, in order to make it harder for even very expensive hardware probing to recover the data.</blockquote><p>Here is the function that I found to be pretty good:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e># overwrite 'my-unsafe-file.txt' 3 times, with zeros (nulls) and then remove the file
 </span><span style=color:#bf616a>gshred --iterations</span><span>=3</span><span style=color:#bf616a> --zero --remove</span><span> my-unsafe-file.txt
-</span></code></pre><p>Note: I used RC4 instead of 3DES because it is faster (95% slower than RC4), but it is not as secure.<h4 id=references>References:</h4><ul><li><a href=http://osxdaily.com/2012/01/30/encrypt-and-decrypt-files-with-openssl/>Encrypt & Decrypt Files from the Command Line with OpenSSL</a><li><a href=http://blog.commandlinekungfu.com/2009/05/episode-32-wiping-securely.html>Wiping Securely</a><li><a href=http://zombe.es/post/4078724716/openssl-cipher-selection>OpenSSL Cipher Selection</a></ul></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Note: I used RC4 instead of 3DES because it is faster (95% slower than RC4), but it is not as secure.<h4 id=references>References:</h4><ul><li><a rel="noopener nofollow noreferrer" href=http://osxdaily.com/2012/01/30/encrypt-and-decrypt-files-with-openssl/ target=_blank>Encrypt & Decrypt Files from the Command Line with OpenSSL</a><li><a rel="noopener nofollow noreferrer" href=http://blog.commandlinekungfu.com/2009/05/episode-32-wiping-securely.html target=_blank>Wiping Securely</a><li><a rel="noopener nofollow noreferrer" href=http://zombe.es/post/4078724716/openssl-cipher-selection target=_blank>OpenSSL Cipher Selection</a></ul></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/phalconphp-crop-to-fit/index.html b/docs/snippets/phalconphp-crop-to-fit/index.html
index 23102af..fd01412 100644
--- a/docs/snippets/phalconphp-crop-to-fit/index.html
+++ b/docs/snippets/phalconphp-crop-to-fit/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PhalconPHP Crop Image To Fit | OhDoyleRules</title><meta content="PhalconPHP Crop Image To Fit | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PhalconPHP Crop Image To Fit" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PhalconPHP Crop Image To Fit" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to crop and scale an image to fit specific dimensions in Phalcon PHP" name=description><meta content="How to crop and scale an image to fit specific dimensions in Phalcon PHP" itemprop=description><meta content="How to crop and scale an image to fit specific dimensions in Phalcon PHP" property=og:description><meta content="How to crop and scale an image to fit specific dimensions in Phalcon PHP" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PhalconPHP Crop Image To Fit | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="phalcon, php, imagick, gd, liquidRescale, resize, crop, fit, lrf" itemprop=keywords><meta content="phalcon, php, imagick, gd, liquidRescale, resize, crop, fit, lrf" property=article:tag><meta content="phalcon, php, imagick, gd, liquidRescale, resize, crop, fit, lrf" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PhalconPHP Crop Image To Fit</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 24, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I was trying to find out how to crop-to-fit an image with <code>GD</code>. But there were no examples with Phalcon. There was one post that mentioned using <code>Imagick</code>. The only problem was that you needed to compiled Imagick with <code>--lrf</code> in order to use <code>liquidRescale</code>. This may not be an option on many hosting platforms. For that reason, I wanted to use <code>GD</code> instead.<p>I <a title="Crop-To-Fit an Image Using ASP/PHP" href=http://salman-w.blogspot.com/2009/04/crop-to-fit-image-using-aspphp.html>found this post</a> after a quick Google search. It helped me create the base for my Phalcon version of the function. This may seem pretty easy for some people, but I found enough people asking, that I figured I would share the whole code.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/13a36401d6249729d017.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/13a36401d6249729d017.js src=about:blank></iframe><p>If you really wanted to use Imagick, then you could just replace GD in the constructor (<code>Phalcon\Image\Adapter\Imagick($source)</code>) and it should work fine. This way you don't need to compile Imagick from source in order to get <code>liquidRescale</code>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PhalconPHP Crop Image To Fit | OhDoyleRules</title><meta content="PhalconPHP Crop Image To Fit | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PhalconPHP Crop Image To Fit" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PhalconPHP Crop Image To Fit" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to crop and scale an image to fit specific dimensions in Phalcon PHP" name=description><meta content="How to crop and scale an image to fit specific dimensions in Phalcon PHP" itemprop=description><meta content="How to crop and scale an image to fit specific dimensions in Phalcon PHP" property=og:description><meta content="How to crop and scale an image to fit specific dimensions in Phalcon PHP" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PhalconPHP Crop Image To Fit | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="phalcon, php, imagick, gd, liquidRescale, resize, crop, fit, lrf" itemprop=keywords><meta content="phalcon, php, imagick, gd, liquidRescale, resize, crop, fit, lrf" property=article:tag><meta content="phalcon, php, imagick, gd, liquidRescale, resize, crop, fit, lrf" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/phalconphp-crop-to-fit/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PhalconPHP Crop Image To Fit</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 24, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I was trying to find out how to crop-to-fit an image with <code>GD</code>. But there were no examples with Phalcon. There was one post that mentioned using <code>Imagick</code>. The only problem was that you needed to compiled Imagick with <code>--lrf</code> in order to use <code>liquidRescale</code>. This may not be an option on many hosting platforms. For that reason, I wanted to use <code>GD</code> instead.<p>I <a rel="noopener nofollow noreferrer" title="Crop-To-Fit an Image Using ASP/PHP" href=http://salman-w.blogspot.com/2009/04/crop-to-fit-image-using-aspphp.html target=_blank>found this post</a> after a quick Google search. It helped me create the base for my Phalcon version of the function. This may seem pretty easy for some people, but I found enough people asking, that I figured I would share the whole code.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/13a36401d6249729d017.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/13a36401d6249729d017.js src=about:blank></iframe><p>If you really wanted to use Imagick, then you could just replace GD in the constructor (<code>Phalcon\Image\Adapter\Imagick($source)</code>) and it should work fine. This way you don't need to compile Imagick from source in order to get <code>liquidRescale</code>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/purge-file-from-github/index.html b/docs/snippets/purge-file-from-github/index.html
index 40a7e1c..f8b6938 100644
--- a/docs/snippets/purge-file-from-github/index.html
+++ b/docs/snippets/purge-file-from-github/index.html
@@ -3,7 +3,7 @@
 </span><span>  </span><span style=color:#bf616a>FN</span><span>="</span><span style=color:#a3be8c>git rm --cached --ignore-unmatch </span><span>$</span><span style=color:#bf616a>1</span><span>"
 </span><span>  </span><span style=color:#bf616a>git</span><span> filter-branch</span><span style=color:#bf616a> --force --index-filter </span><span>$</span><span style=color:#bf616a>FN --prune-empty --tag-name-filter</span><span> cat -- --all
 </span><span>}
-</span></code></pre><p>This was taken from the <a title="Github - Remove Sensitive Data" href=https://help.github.com/articles/remove-sensitive-data>Github article about removing files</a>. Here is what they said about the function:<blockquote><p>Run git filter-branch, forcing (--force) Git to process—but not check out (--index-filter)—the entire history of every branch and tag (--tag-name-filter cat -- --all), removing the specified file ('git rm --cached --ignore-unmatch MYFILE') and any empty commits generated as a result (--prune-empty). Note that you need to specify the path to the file you want to remove, not just its filename. Be careful! This will overwrite your existing tags.</blockquote><p>You should also add the file to your <code>.gitignore</code>:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#96b5b4>echo </span><span>"</span><span style=color:#a3be8c>MYFILE</span><span>" >> .gitignore
+</span></code></pre><p>This was taken from the <a rel="noopener nofollow noreferrer" title="Github - Remove Sensitive Data" href=https://help.github.com/articles/remove-sensitive-data target=_blank>Github article about removing files</a>. Here is what they said about the function:<blockquote><p>Run git filter-branch, forcing (--force) Git to process—but not check out (--index-filter)—the entire history of every branch and tag (--tag-name-filter cat -- --all), removing the specified file ('git rm --cached --ignore-unmatch MYFILE') and any empty commits generated as a result (--prune-empty). Note that you need to specify the path to the file you want to remove, not just its filename. Be careful! This will overwrite your existing tags.</blockquote><p>You should also add the file to your <code>.gitignore</code>:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#96b5b4>echo </span><span>"</span><span style=color:#a3be8c>MYFILE</span><span>" >> .gitignore
 </span><span style=color:#bf616a>git</span><span> add .gitignore
 </span><span style=color:#bf616a>git</span><span> commit</span><span style=color:#bf616a> -m </span><span>"</span><span style=color:#a3be8c>Add MYFILE to .gitignore</span><span>"
-</span></code></pre><p>Then to update the live repo, run <code>git push origin master --force</code>.<p>This process will remove the file from your repo, and from the history. This is in-case you committed a sensitive file. If you get in a real pickle, you can use the <a title="BFG Repo-Cleaner" href=http://rtyley.github.io/bfg-repo-cleaner/>BFG Repo-Cleaner</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Then to update the live repo, run <code>git push origin master --force</code>.<p>This process will remove the file from your repo, and from the history. This is in-case you committed a sensitive file. If you get in a real pickle, you can use the <a rel="noopener nofollow noreferrer" title="BFG Repo-Cleaner" href=http://rtyley.github.io/bfg-repo-cleaner/ target=_blank>BFG Repo-Cleaner</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/raspberry-pi-php-and-lighttpd/index.html b/docs/snippets/raspberry-pi-php-and-lighttpd/index.html
index c1a2664..9f15eee 100644
--- a/docs/snippets/raspberry-pi-php-and-lighttpd/index.html
+++ b/docs/snippets/raspberry-pi-php-and-lighttpd/index.html
@@ -1,10 +1,10 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Setup A Raspberry Pi with PHP And Lighttpd | OhDoyleRules</title><meta content="Setup A Raspberry Pi with PHP And Lighttpd | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Setup A Raspberry Pi with PHP And Lighttpd" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Setup A Raspberry Pi with PHP And Lighttpd" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Setup a raspberry pi with php 8.1 and the latest lighttpd web server" name=description><meta content="Setup a raspberry pi with php 8.1 and the latest lighttpd web server" itemprop=description><meta content="Setup a raspberry pi with php 8.1 and the latest lighttpd web server" property=og:description><meta content="Setup a raspberry pi with php 8.1 and the latest lighttpd web server" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Setup A Raspberry Pi with PHP And Lighttpd | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="raspberry, pi, php, 8.1, composer, lighttpd, apache, web, server" itemprop=keywords><meta content="raspberry, pi, php, 8.1, composer, lighttpd, apache, web, server" property=article:tag><meta content="raspberry, pi, php, 8.1, composer, lighttpd, apache, web, server" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Setup A Raspberry Pi with PHP And Lighttpd</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 05, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>I recently got a Raspberry Pi model 4+. I'm using it to <a href=https://pimylifeup.com/raspberrypi-minidlna/>run a minidlna server</a> that loads music and movies from an old external hard drive that I have. On top of that, I wanted to run a local web server so that I can write scripts and pages that I can access locally on my network without having to have my laptop open and running.<p>I wanted to setup <code>lighttpd</code> as it is much more efficient than the default installed <code>apache2</code>. Since I'm already running <code>minidlna</code>, I wanted a web server that was more performant and used less memory/resources.<p>Finally, I wanted the latest PHP installed given I use it a lot in my day job and it will be great for writing small websites that are only ever accessed through my local network. Unfortunately, the default installed PHP version is quite a bit behind and you need to setup new sources in order to install the latest version of PHP.<p>Here is a short list of all the steps you need to setup a newer version of PHP 8.1 as well as the <code>lighttpd</code> server.<h4 id=instructions>Instructions</h4><p><em>These instructions assume you're using the default debian-based raspberry pi operating system!</em><p>Update the local packages already installed:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>sudo</span><span> apt-get update
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Setup A Raspberry Pi with PHP And Lighttpd | OhDoyleRules</title><meta content="Setup A Raspberry Pi with PHP And Lighttpd | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Setup A Raspberry Pi with PHP And Lighttpd" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Setup A Raspberry Pi with PHP And Lighttpd" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Setup a raspberry pi with php 8.1 and the latest lighttpd web server" name=description><meta content="Setup a raspberry pi with php 8.1 and the latest lighttpd web server" itemprop=description><meta content="Setup a raspberry pi with php 8.1 and the latest lighttpd web server" property=og:description><meta content="Setup a raspberry pi with php 8.1 and the latest lighttpd web server" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Setup A Raspberry Pi with PHP And Lighttpd | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="raspberry, pi, php, 8.1, composer, lighttpd, apache, web, server" itemprop=keywords><meta content="raspberry, pi, php, 8.1, composer, lighttpd, apache, web, server" property=article:tag><meta content="raspberry, pi, php, 8.1, composer, lighttpd, apache, web, server" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/raspberry-pi-php-and-lighttpd/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Setup A Raspberry Pi with PHP And Lighttpd</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 05, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>I recently got a Raspberry Pi model 4+. I'm using it to <a rel="noopener nofollow noreferrer" href=https://pimylifeup.com/raspberrypi-minidlna/ target=_blank>run a minidlna server</a> that loads music and movies from an old external hard drive that I have. On top of that, I wanted to run a local web server so that I can write scripts and pages that I can access locally on my network without having to have my laptop open and running.<p>I wanted to setup <code>lighttpd</code> as it is much more efficient than the default installed <code>apache2</code>. Since I'm already running <code>minidlna</code>, I wanted a web server that was more performant and used less memory/resources.<p>Finally, I wanted the latest PHP installed given I use it a lot in my day job and it will be great for writing small websites that are only ever accessed through my local network. Unfortunately, the default installed PHP version is quite a bit behind and you need to setup new sources in order to install the latest version of PHP.<p>Here is a short list of all the steps you need to setup a newer version of PHP 8.1 as well as the <code>lighttpd</code> server.<h4 id=instructions>Instructions</h4><p><em>These instructions assume you're using the default debian-based raspberry pi operating system!</em><p>Update the local packages already installed:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>sudo</span><span> apt-get update
 </span></code></pre><p>Install the dependencies needed to add the additional services:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>sudo</span><span> apt-get install lsb-release apt-transport-https ca-certificates
 </span></code></pre><p>Add the repository for installing the latest version of PHP:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>sudo</span><span> wget</span><span style=color:#bf616a> -O</span><span> /etc/apt/trusted.gpg.d/php.gpg https://origin.sury.org/php/apt.gpg
 </span><span style=color:#96b5b4>echo </span><span>"</span><span style=color:#a3be8c>deb https://packages.sury.org/php/ </span><span>$</span><span style=color:#a3be8c>(</span><span style=color:#bf616a>lsb_release -sc</span><span style=color:#a3be8c>) main</span><span>" | </span><span style=color:#bf616a>sudo</span><span> tee /etc/apt/sources.list.d/php.list
 </span></code></pre><p>Now we can install all the PHP packages we will need for basic PHP applications:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>sudo</span><span> apt-get update
 </span><span style=color:#bf616a>sudo</span><span> apt-get install</span><span style=color:#bf616a> -y</span><span> php8.1 php8.1-cli php8.1-cgi php8.1-intl php8.1-zip
-</span></code></pre><p>If you need additional PHP extensions then the above command is where you would add those in.<p>Since we now have the latest PHP version, we can setup <code>composer</code>. The <code>sha384</code> code may different for your installation based on whatever version is out when you are following these instructions. <a href=https://getcomposer.org/download/>You can find the latest download/install instructions on the Composer download page</a>.<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>php -r </span><span>"</span><span style=color:#a3be8c>copy('https://getcomposer.org/installer', 'composer-setup.php');</span><span>"
+</span></code></pre><p>If you need additional PHP extensions then the above command is where you would add those in.<p>Since we now have the latest PHP version, we can setup <code>composer</code>. The <code>sha384</code> code may different for your installation based on whatever version is out when you are following these instructions. <a rel="noopener nofollow noreferrer" href=https://getcomposer.org/download/ target=_blank>You can find the latest download/install instructions on the Composer download page</a>.<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>php -r </span><span>"</span><span style=color:#a3be8c>copy('https://getcomposer.org/installer', 'composer-setup.php');</span><span>"
 </span><span style=color:#bf616a>php -r </span><span>"</span><span style=color:#a3be8c>if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;</span><span>"
 </span><span style=color:#bf616a>php</span><span> composer-setup.php
 </span><span style=color:#bf616a>sudo</span><span> mv composer.phar /usr/local/bin/composer
@@ -17,6 +17,6 @@
 </span><span style=color:#bf616a>sudo</span><span> chown</span><span style=color:#bf616a> -R</span><span> www-data:www-data /var/cache/lighttpd
 </span><span style=color:#bf616a>sudo</span><span> chown</span><span style=color:#bf616a> -R</span><span> www-data:www-data /var/www/html
 </span></code></pre><p>To test out the server once we are finished, we can setup this simple project that emulates the apache directory listing module. This will just list everything in our <code>/var/www/html</code> folder in a nice display:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>git</span><span> clone https://github.com/halgatewood/file-directory-list /var/www/html/listing
-</span></code></pre><p>If you are looking for a more efficient directory browser, or you don't want to use PHP for this, you can <a href=https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModDirlisting>use the built-in <code>dirlisting</code> module</a> that comes with <code>lighttpd</code>.<p>We can now make sure the <code>lighttpd</code> service is running so it will always start when we restart our pi:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>sudo</span><span> systemctl start lighttpd.service
+</span></code></pre><p>If you are looking for a more efficient directory browser, or you don't want to use PHP for this, you can <a rel="noopener nofollow noreferrer" href=https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModDirlisting target=_blank>use the built-in <code>dirlisting</code> module</a> that comes with <code>lighttpd</code>.<p>We can now make sure the <code>lighttpd</code> service is running so it will always start when we restart our pi:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>sudo</span><span> systemctl start lighttpd.service
 </span></code></pre><p>If you want to test the server on the command line, you can just <code>curl</code> your localhost and see what happens. You should get the source code for the listing page we installed:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#bf616a>curl</span><span> http://localhost/listing
 </span></code></pre><p>Done! That should be all you need to have PHP 8.1 and a light weight web server setup!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/render-php-with-data/index.html b/docs/snippets/render-php-with-data/index.html
index 4476b39..c5cef5d 100644
--- a/docs/snippets/render-php-with-data/index.html
+++ b/docs/snippets/render-php-with-data/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Render PHP File With Data | OhDoyleRules</title><meta content="Render PHP File With Data | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Render PHP File With Data" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/render-php-with-data/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/render-php-with-data/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Render PHP File With Data" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Render PHP File With Data" name=description><meta content="Render PHP File With Data" itemprop=description><meta content="Render PHP File With Data" property=og:description><meta content="Render PHP File With Data" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Render PHP File With Data | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, render, file, data, view, array, template" itemprop=keywords><meta content="php, render, file, data, view, array, template" property=article:tag><meta content="php, render, file, data, view, array, template" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/render-php-with-data/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Render PHP File With Data</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I am modifying an open source CMS to use the <a title="Phalcon PHP Framework" href=https://ohdoylerules.com/snippets/render-php-with-data/phalconphp.com/en/>Phalcon PHP framework</a>, as well as the <a href=https://github.com/chobie/php-sundown title=PHP-Sundown>PHP-Sundown</a> C implementation of Markdown.<p>It is a very simple CMS which previously would just echo out compiled HTML. But I am using the Volt template engine in Phalcon. It renders <code>.volt</code> files to native PHP. This means that I cannot just spit out raw HTML. I need to create a render function that passes an array of data to my PHP file.<p>Here is that function:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>function renderPhpFile($filename, $vars = null) {
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Render PHP File With Data | OhDoyleRules</title><meta content="Render PHP File With Data | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Render PHP File With Data" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/render-php-with-data/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/render-php-with-data/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Render PHP File With Data" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Render PHP File With Data" name=description><meta content="Render PHP File With Data" itemprop=description><meta content="Render PHP File With Data" property=og:description><meta content="Render PHP File With Data" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Render PHP File With Data | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, render, file, data, view, array, template" itemprop=keywords><meta content="php, render, file, data, view, array, template" property=article:tag><meta content="php, render, file, data, view, array, template" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/render-php-with-data/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Render PHP File With Data</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 29, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I am modifying an open source CMS to use the <a title="Phalcon PHP Framework" href=https://ohdoylerules.com/snippets/render-php-with-data/phalconphp.com/en/>Phalcon PHP framework</a>, as well as the <a rel="noopener nofollow noreferrer" href=https://github.com/chobie/php-sundown target=_blank title=PHP-Sundown>PHP-Sundown</a> C implementation of Markdown.<p>It is a very simple CMS which previously would just echo out compiled HTML. But I am using the Volt template engine in Phalcon. It renders <code>.volt</code> files to native PHP. This means that I cannot just spit out raw HTML. I need to create a render function that passes an array of data to my PHP file.<p>Here is that function:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>function renderPhpFile($filename, $vars = null) {
 </span><span>  if (is_array($vars) && !empty($vars)) {
 </span><span>    extract($vars);
 </span><span>  }
diff --git a/docs/snippets/running-go-in-docker/index.html b/docs/snippets/running-go-in-docker/index.html
index 8d0374b..2f3410d 100644
--- a/docs/snippets/running-go-in-docker/index.html
+++ b/docs/snippets/running-go-in-docker/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Running Go (golang) in Docker | OhDoyleRules</title><meta content="Running Go (golang) in Docker | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Running Go (golang) in Docker" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/running-go-in-docker/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/running-go-in-docker/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Running Go (golang) in Docker" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to run and deploy golang applications inside a Docker container." name=description><meta content="How to run and deploy golang applications inside a Docker container." itemprop=description><meta content="How to run and deploy golang applications inside a Docker container." property=og:description><meta content="How to run and deploy golang applications inside a Docker container." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Running Go (golang) in Docker | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="golang, docker, container, dockerfile, deploy, now.sh" itemprop=keywords><meta content="golang, docker, container, dockerfile, deploy, now.sh" property=article:tag><meta content="golang, docker, container, dockerfile, deploy, now.sh" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/running-go-in-docker/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Running Go (golang) in Docker</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 28, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>Lately, I have been trying to learn golang. This means playing with a lot of tools and busting up my local environment.<p>In order to keep things simple, I have been using Docker container to run my applications when I am ready to deploy or build them.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/6489d3e60d994222ce0404c8cd500a93.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/6489d3e60d994222ce0404c8cd500a93.js src=about:blank></iframe><p>I use <a href=https://zeit.co/now>now.sh</a> to deploy the applications. Since now.sh support deploying Docker, using the Dockerfile approach makes it really simple to deploy.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Running Go (golang) in Docker | OhDoyleRules</title><meta content="Running Go (golang) in Docker | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Running Go (golang) in Docker" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/running-go-in-docker/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/running-go-in-docker/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Running Go (golang) in Docker" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to run and deploy golang applications inside a Docker container." name=description><meta content="How to run and deploy golang applications inside a Docker container." itemprop=description><meta content="How to run and deploy golang applications inside a Docker container." property=og:description><meta content="How to run and deploy golang applications inside a Docker container." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Running Go (golang) in Docker | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="golang, docker, container, dockerfile, deploy, now.sh" itemprop=keywords><meta content="golang, docker, container, dockerfile, deploy, now.sh" property=article:tag><meta content="golang, docker, container, dockerfile, deploy, now.sh" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/running-go-in-docker/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Running Go (golang) in Docker</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 28, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>Lately, I have been trying to learn golang. This means playing with a lot of tools and busting up my local environment.<p>In order to keep things simple, I have been using Docker container to run my applications when I am ready to deploy or build them.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/6489d3e60d994222ce0404c8cd500a93.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/6489d3e60d994222ce0404c8cd500a93.js src=about:blank></iframe><p>I use <a rel="noopener nofollow noreferrer" href=https://zeit.co/now target=_blank>now.sh</a> to deploy the applications. Since now.sh support deploying Docker, using the Dockerfile approach makes it really simple to deploy.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/salt-js-mirco-selector-library/index.html b/docs/snippets/salt-js-mirco-selector-library/index.html
index 9748ce7..95e0bd9 100644
--- a/docs/snippets/salt-js-mirco-selector-library/index.html
+++ b/docs/snippets/salt-js-mirco-selector-library/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Salt.js micro selector library | OhDoyleRules</title><meta content="Salt.js micro selector library | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Salt.js micro selector library" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Salt.js micro selector library" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="salt.js is micro DOM selector library. Minified, it comes in at 255 bytes" name=description><meta content="salt.js is micro DOM selector library. Minified, it comes in at 255 bytes" itemprop=description><meta content="salt.js is micro DOM selector library. Minified, it comes in at 255 bytes" property=og:description><meta content="salt.js is micro DOM selector library. Minified, it comes in at 255 bytes" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Salt.js micro selector library | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="dom, html5, javascript, js, micro, mini, $, querySelectorAll, sizzle, matching, mapping" itemprop=keywords><meta content="dom, html5, javascript, js, micro, mini, $, querySelectorAll, sizzle, matching, mapping" property=article:tag><meta content="dom, html5, javascript, js, micro, mini, $, querySelectorAll, sizzle, matching, mapping" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Salt.js micro selector library</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="Slat.js Logo" src=/images/saltjs.png></div><p>I made a tiny dom selector library called <a href=https://github.com/james2doyle/saltjs title=james2doyle/saltjs>Salt.js</a>.<p>It uses a regular expression to map different queries you pass through it to their native get functions. The reason I don’t just use <code>querySelectorAll</code> for everything is because it is slower than the native get commands. <a href=http://jsperf.com/getelementbyid-vs-queryselector/11>See this jsperf test</a>.<p>Yes, I see that the mapping is slower for newer versions of Chrome. But, almost every other browser and device is slower using <code>querySelectorAll</code> over the mapping method. Also keep in mind the regex used in that example is much more complicated than mine.<p>Here are some examples of how you would use the library:<h4 id=salt-js-examples>Salt.js Examples</h4><pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#65737e>// get by id
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Salt.js micro selector library | OhDoyleRules</title><meta content="Salt.js micro selector library | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Salt.js micro selector library" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Salt.js micro selector library" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="salt.js is micro DOM selector library. Minified, it comes in at 255 bytes" name=description><meta content="salt.js is micro DOM selector library. Minified, it comes in at 255 bytes" itemprop=description><meta content="salt.js is micro DOM selector library. Minified, it comes in at 255 bytes" property=og:description><meta content="salt.js is micro DOM selector library. Minified, it comes in at 255 bytes" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Salt.js micro selector library | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="dom, html5, javascript, js, micro, mini, $, querySelectorAll, sizzle, matching, mapping" itemprop=keywords><meta content="dom, html5, javascript, js, micro, mini, $, querySelectorAll, sizzle, matching, mapping" property=article:tag><meta content="dom, html5, javascript, js, micro, mini, $, querySelectorAll, sizzle, matching, mapping" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/salt-js-mirco-selector-library/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Salt.js micro selector library</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2013</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="Slat.js Logo" src=/images/saltjs.png></div><p>I made a tiny dom selector library called <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/saltjs target=_blank title=james2doyle/saltjs>Salt.js</a>.<p>It uses a regular expression to map different queries you pass through it to their native get functions. The reason I don’t just use <code>querySelectorAll</code> for everything is because it is slower than the native get commands. <a rel="noopener nofollow noreferrer" href=http://jsperf.com/getelementbyid-vs-queryselector/11 target=_blank>See this jsperf test</a>.<p>Yes, I see that the mapping is slower for newer versions of Chrome. But, almost every other browser and device is slower using <code>querySelectorAll</code> over the mapping method. Also keep in mind the regex used in that example is much more complicated than mine.<p>Here are some examples of how you would use the library:<h4 id=salt-js-examples>Salt.js Examples</h4><pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#65737e>// get by id
 </span><span style=color:#8fa1b3>$</span><span>('</span><span style=color:#a3be8c>#iddiv</span><span>');
 </span><span style=color:#65737e>// get by class name
 </span><span style=color:#8fa1b3>$</span><span>('</span><span style=color:#a3be8c>.classdiv</span><span>');
@@ -12,4 +12,4 @@
 </span><span style=color:#8fa1b3>$</span><span>('</span><span style=color:#a3be8c>#iddiv</span><span>').</span><span style=color:#96b5b4>getAttribute</span><span>('</span><span style=color:#a3be8c>name</span><span>');
 </span><span style=color:#65737e>// getAttribute of name from nodelist
 </span><span style=color:#8fa1b3>$</span><span>('</span><span style=color:#a3be8c>.classdiv</span><span>')[</span><span style=color:#d08770>0</span><span>].</span><span style=color:#96b5b4>getAttribute</span><span>('</span><span style=color:#a3be8c>name</span><span>');
-</span></code></pre><p><a href=https://github.com/james2doyle/saltjs title=james2doyle/saltjs>Check out the library on Github</a>.<h4 id=update>Update</h4><p>Looks like there are a bunch of better ways to make this smaller! I’ve updated the github to reflect the new libraries. I have also added a <a href=http://jsperf.com/micro-selector-libraries>jsPerf test</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p><a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/saltjs target=_blank title=james2doyle/saltjs>Check out the library on Github</a>.<h4 id=update>Update</h4><p>Looks like there are a bunch of better ways to make this smaller! I’ve updated the github to reflect the new libraries. I have also added a <a rel="noopener nofollow noreferrer" href=http://jsperf.com/micro-selector-libraries target=_blank>jsPerf test</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/simple-php-json-response/index.html b/docs/snippets/simple-php-json-response/index.html
index 9b8f71d..1847ecc 100644
--- a/docs/snippets/simple-php-json-response/index.html
+++ b/docs/snippets/simple-php-json-response/index.html
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Simple PHP JSON Response | OhDoyleRules</title><meta content="Simple PHP JSON Response | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Simple PHP JSON Response" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/simple-php-json-response/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/simple-php-json-response/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Simple PHP JSON Response" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a simple JSON response using PHP" name=description><meta content="Create a simple JSON response using PHP" itemprop=description><meta content="Create a simple JSON response using PHP" property=og:description><meta content="Create a simple JSON response using PHP" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Simple PHP JSON Response | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="PHP, json, response, headers, status, encoding, parse, stringify" itemprop=keywords><meta content="PHP, json, response, headers, status, encoding, parse, stringify" property=article:tag><meta content="PHP, json, response, headers, status, encoding, parse, stringify" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/simple-php-json-response/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Simple PHP JSON Response</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>This is little snippet I use all the time when I am building simple flat sites that need a single route for an AJAX request.<p>There are a couple of things you need to do in order to create a proper JSON response.<h4 id=use-json-encode>Use json_encode</h4><p>If you are really new to PHP, you may not have found <a href=http://php.net/manual/en/function.json-encode.php#refsect1-function.json-encode-examples>json_encode</a>. If that is the case, then look it up right now.<p>This function converts PHP arrays, strings, and objects, into a JSON safe string. This makes it simple for you to create safe responses that can be handled by your javascript.<h4 id=use-content-type>Use Content-Type</h4><p>This is usually the magic command that allows you to <em>receive</em> JSON from your script. If you don't set the header, PHP will simple return a string. Then in your javascript, you have to use <code>JSON.parse</code> in order to get the object that javascript can use.<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>header('Content-Type: application/json');
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Simple PHP JSON Response | OhDoyleRules</title><meta content="Simple PHP JSON Response | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Simple PHP JSON Response" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/simple-php-json-response/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/simple-php-json-response/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Simple PHP JSON Response" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a simple JSON response using PHP" name=description><meta content="Create a simple JSON response using PHP" itemprop=description><meta content="Create a simple JSON response using PHP" property=og:description><meta content="Create a simple JSON response using PHP" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Simple PHP JSON Response | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="PHP, json, response, headers, status, encoding, parse, stringify" itemprop=keywords><meta content="PHP, json, response, headers, status, encoding, parse, stringify" property=article:tag><meta content="PHP, json, response, headers, status, encoding, parse, stringify" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/simple-php-json-response/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Simple PHP JSON Response</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 04, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>This is little snippet I use all the time when I am building simple flat sites that need a single route for an AJAX request.<p>There are a couple of things you need to do in order to create a proper JSON response.<h4 id=use-json-encode>Use json_encode</h4><p>If you are really new to PHP, you may not have found <a rel="noopener nofollow noreferrer" href=http://php.net/manual/en/function.json-encode.php#refsect1-function.json-encode-examples target=_blank>json_encode</a>. If that is the case, then look it up right now.<p>This function converts PHP arrays, strings, and objects, into a JSON safe string. This makes it simple for you to create safe responses that can be handled by your javascript.<h4 id=use-content-type>Use Content-Type</h4><p>This is usually the magic command that allows you to <em>receive</em> JSON from your script. If you don't set the header, PHP will simple return a string. Then in your javascript, you have to use <code>JSON.parse</code> in order to get the object that javascript can use.<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>header('Content-Type: application/json');
 </span></code></pre><p>No more strings! The request is now treated accordingly and is parsed for you. I am sure everyone has encountered this in the beginning.<h4 id=use-status>Use Status</h4><p>Here is another header that you need to set in order for things to work smoothly. By setting the status, you can tell your javascript, as well as your browser, what the status of the request it. By default, the requests are treated as <code>200 OK</code>. So although you may have sent a response with a failing message, with setting a failed status (usually 300 codes and above) the browser, and your javascript, think everything is fine.<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>header('Status: 400 Bad Request');
-</span></code></pre><p>This becomes very apparent in jQuery when using <code>$.get</code> or <code>$.post</code>. If you are using a Promise style request (using <code>$.get().then( ... )</code>), your error handler never gets called.<p>If you want to find the perfect header for your fantastic error, check out the Wikipedia for the <a href=https://en.wikipedia.org/wiki/List_of_HTTP_status_codes>HTTP status codes</a>.<h4 id=example>Example</h4><p>Here is an example of a simple script I might use when testing an AJAX response, or when building a flat-file site. I would place this somewhere in my websites directory, and then hit it directly with an AJAX request.<p>If my local path to my site was <code>http://localhost:8888/website</code>, I would save this script as <code>json.php</code>. Then I would then use the following jQuery to test the script:<pre style=background:#2b303b;color:#c0c5ce><code><span>$.get("http://localhost:8888/website/json.php")
+</span></code></pre><p>This becomes very apparent in jQuery when using <code>$.get</code> or <code>$.post</code>. If you are using a Promise style request (using <code>$.get().then( ... )</code>), your error handler never gets called.<p>If you want to find the perfect header for your fantastic error, check out the Wikipedia for the <a rel="noopener nofollow noreferrer" href=https://en.wikipedia.org/wiki/List_of_HTTP_status_codes target=_blank>HTTP status codes</a>.<h4 id=example>Example</h4><p>Here is an example of a simple script I might use when testing an AJAX response, or when building a flat-file site. I would place this somewhere in my websites directory, and then hit it directly with an AJAX request.<p>If my local path to my site was <code>http://localhost:8888/website</code>, I would save this script as <code>json.php</code>. Then I would then use the following jQuery to test the script:<pre style=background:#2b303b;color:#c0c5ce><code><span>$.get("http://localhost:8888/website/json.php")
 </span><span>.done(function(response){
 </span><span>  console.log(response);
 </span><span>});
diff --git a/docs/snippets/tailwind-screens-in-js/index.html b/docs/snippets/tailwind-screens-in-js/index.html
index 9b1120a..a16c451 100644
--- a/docs/snippets/tailwind-screens-in-js/index.html
+++ b/docs/snippets/tailwind-screens-in-js/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Tailwind Screens In JS | OhDoyleRules</title><meta content="Tailwind Screens In JS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Tailwind Screens In JS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/tailwind-screens-in-js/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/tailwind-screens-in-js/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Tailwind Screens In JS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Detect if a tailwind screen value matches the current window" name=description><meta content="Detect if a tailwind screen value matches the current window" itemprop=description><meta content="Detect if a tailwind screen value matches the current window" property=og:description><meta content="Detect if a tailwind screen value matches the current window" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Tailwind Screens In JS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="tailwind, css, screens, js" itemprop=keywords><meta content="tailwind, css, screens, js" property=article:tag><meta content="tailwind, css, screens, js" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Tailwind Screens In JS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 05, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>If you haven't heard of <a href=https://tailwindcss.com/>Tailwindcss</a> before, what is going on? It is the hot new CSS framework for building custom designs.<p>From the site:<blockquote><p>Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.</blockquote><p>One of the things Tailwindcss gives you is a configuration file (named <code>tailwind.config.js</code>) for setting the configuration of the output CSS. This may be a little strange to people who have never used this before but there are some advantages. The output CSS can be configured based on the build environment or your own specifications.<p>One of the configuration settings is for what screen sizes and breakpoints are supported. One of the benefits of these values being defined in JS is that you can then use them in JS as well. You can <a href=https://tailwindcss.com/docs/breakpoints>read more about them in the docs</a>.<p>So why might you want to use these values in JS? Well, if you are building components that have conditional content based on the screen size, having access to these values can be super handy. You can check the screen size and show/hide different content, conditional load different sizes elements, or even disable an entire swath of features/functionality. All while keep your JS code in sync with your CSS code. You can reuse the variable names.<p>Here is the code I used to accomplish this:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/c1306ace82cfe9e22a4ecfff13c6595b.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/c1306ace82cfe9e22a4ecfff13c6595b.js src=about:blank></iframe><p>You can use the function like so:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#65737e>// es6
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Tailwind Screens In JS | OhDoyleRules</title><meta content="Tailwind Screens In JS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Tailwind Screens In JS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/tailwind-screens-in-js/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/tailwind-screens-in-js/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Tailwind Screens In JS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Detect if a tailwind screen value matches the current window" name=description><meta content="Detect if a tailwind screen value matches the current window" itemprop=description><meta content="Detect if a tailwind screen value matches the current window" property=og:description><meta content="Detect if a tailwind screen value matches the current window" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Tailwind Screens In JS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="tailwind, css, screens, js" itemprop=keywords><meta content="tailwind, css, screens, js" property=article:tag><meta content="tailwind, css, screens, js" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/tailwind-screens-in-js/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Tailwind Screens In JS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 05, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>If you haven't heard of <a rel="noopener nofollow noreferrer" href=https://tailwindcss.com/ target=_blank>Tailwindcss</a> before, what is going on? It is the hot new CSS framework for building custom designs.<p>From the site:<blockquote><p>Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.</blockquote><p>One of the things Tailwindcss gives you is a configuration file (named <code>tailwind.config.js</code>) for setting the configuration of the output CSS. This may be a little strange to people who have never used this before but there are some advantages. The output CSS can be configured based on the build environment or your own specifications.<p>One of the configuration settings is for what screen sizes and breakpoints are supported. One of the benefits of these values being defined in JS is that you can then use them in JS as well. You can <a rel="noopener nofollow noreferrer" href=https://tailwindcss.com/docs/breakpoints target=_blank>read more about them in the docs</a>.<p>So why might you want to use these values in JS? Well, if you are building components that have conditional content based on the screen size, having access to these values can be super handy. You can check the screen size and show/hide different content, conditional load different sizes elements, or even disable an entire swath of features/functionality. All while keep your JS code in sync with your CSS code. You can reuse the variable names.<p>Here is the code I used to accomplish this:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/c1306ace82cfe9e22a4ecfff13c6595b.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/c1306ace82cfe9e22a4ecfff13c6595b.js src=about:blank></iframe><p>You can use the function like so:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#65737e>// es6
 </span><span style=color:#65737e>// import screenIs from 'screenIs';
 </span><span style=color:#65737e>// commonjs
 </span><span style=color:#b48ead>const </span><span style=color:#bf616a>screenIs </span><span>= </span><span style=color:#96b5b4>require</span><span>('</span><span style=color:#a3be8c>screenIs</span><span>');
@@ -11,4 +11,4 @@
 </span><span style=color:#b48ead>if </span><span>(</span><span style=color:#bf616a>md </span><span>|| </span><span style=color:#bf616a>lg</span><span>) {
 </span><span>  </span><span style=color:#65737e>// we are on an "md" or an "lg" screen...
 </span><span>}
-</span></code></pre><p>Basically, we load up the config, use <a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia><code>window.matchMedia</code></a> to test all the media queries in the config, then check if the key we pass in matches an existing key in our config and return the results.<p>Pretty simple but a nice way to share the config into your JS code.<p>If you are familiar with Tailwind, you might be asking, <em>why not just use CSS with md:show and md:hide?</em><p>While that does work perfectly for visual content, it does not stop the browser from creating the DOM for the hidden content or stop and event listeners from being created or removed. If you are using the detection of the screen in JS, you can make sure to not render or add events for code that is not used. The opposite is true for when the screen changes and you need to cleanup any listeners or DOM elements you don't want to be there.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Basically, we load up the config, use <a rel="noopener nofollow noreferrer" href=https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia target=_blank><code>window.matchMedia</code></a> to test all the media queries in the config, then check if the key we pass in matches an existing key in our config and return the results.<p>Pretty simple but a nice way to share the config into your JS code.<p>If you are familiar with Tailwind, you might be asking, <em>why not just use CSS with md:show and md:hide?</em><p>While that does work perfectly for visual content, it does not stop the browser from creating the DOM for the hidden content or stop and event listeners from being created or removed. If you are using the detection of the screen in JS, you can make sure to not render or add events for code that is not used. The opposite is true for when the screen changes and you need to cleanup any listeners or DOM elements you don't want to be there.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/target-mozilla-only-in-css/index.html b/docs/snippets/target-mozilla-only-in-css/index.html
index 72eb403..8b95e81 100644
--- a/docs/snippets/target-mozilla-only-in-css/index.html
+++ b/docs/snippets/target-mozilla-only-in-css/index.html
@@ -1,4 +1,4 @@
 <!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Target Mozilla-only in CSS | OhDoyleRules</title><meta content="Target Mozilla-only in CSS | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Target Mozilla-only in CSS" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Target Mozilla-only in CSS" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Target Mozilla-only in CSS" name=description><meta content="Target Mozilla-only in CSS" itemprop=description><meta content="Target Mozilla-only in CSS" property=og:description><meta content="Target Mozilla-only in CSS" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Target Mozilla-only in CSS | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="CSS, document, firefox, media queries, mozilla, url-prefix" itemprop=keywords><meta content="CSS, document, firefox, media queries, mozilla, url-prefix" property=article:tag><meta content="CSS, document, firefox, media queries, mozilla, url-prefix" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/target-mozilla-only-in-css/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Target Mozilla-only in CSS</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I had some issues in Firefox recently. I was building a complicated “item” in CSS and it looked great in Chrome. I got an email later saying that the sizing was all off for a bunch of things. I thought this was really strange. I went back to the CSS and Chrome and I could not see any issues.<p>I then fired up Firefox and, yikes! There was a bunch of weird issues. This is strange because normally Chrome to Firefox translates pretty well. I was using the <code>::first-letter</code> element and a few <code>::before</code> elements. But somehow, someway they got messed up. Anyway, I discovered this little snippet:<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span>@-</span><span style=color:#bf616a>moz-document url-prefix</span><span style=color:#b48ead>(</span><span>) {
 </span><span>  </span><span style=color:#65737e>/* firefox only styles */
 </span><span>}
-</span></code></pre><p>It works. But what does it mean? The url-prefix() is a way to serve specific styles to a specific URL. In this case, I just want to target a -moz- device. <a href="https://developer.mozilla.org/en-US/docs/CSS/@document?redirectlocale=en-US&redirectslug=CSS%2F%40-moz-document" title="MDN @Document">Here is a more in depth definition</a>. This worked nicely, and so it will stay into production.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>It works. But what does it mean? The url-prefix() is a way to serve specific styles to a specific URL. In this case, I just want to target a -moz- device. <a href="https://developer.mozilla.org/en-US/docs/CSS/@document?redirectlocale=en-US&redirectslug=CSS%2F%40-moz-document" rel="noopener nofollow noreferrer" title="MDN @Document" target=_blank>Here is a more in depth definition</a>. This worked nicely, and so it will stay into production.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/using-laravel-when-method-to-support-multiple-queries/index.html b/docs/snippets/using-laravel-when-method-to-support-multiple-queries/index.html
index 4ae0c8b..d54d81c 100644
--- a/docs/snippets/using-laravel-when-method-to-support-multiple-queries/index.html
+++ b/docs/snippets/using-laravel-when-method-to-support-multiple-queries/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Laravel `when` Method To Support Multiple Queries | OhDoyleRules</title><meta content="Using Laravel `when` Method To Support Multiple Queries | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Laravel `when` Method To Support Multiple Queries" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Laravel `when` Method To Support Multiple Queries" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use the `when` method on database collections in Laravel to create more flexible and readable code" name=description><meta content="How to use the `when` method on database collections in Laravel to create more flexible and readable code" itemprop=description><meta content="How to use the `when` method on database collections in Laravel to create more flexible and readable code" property=og:description><meta content="How to use the `when` method on database collections in Laravel to create more flexible and readable code" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Laravel `when` Method To Support Multiple Queries | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="query, laravel, sqlite, postgres, sql, builder, search, when, switch, case" itemprop=keywords><meta content="query, laravel, sqlite, postgres, sql, builder, search, when, switch, case" property=article:tag><meta content="query, laravel, sqlite, postgres, sql, builder, search, when, switch, case" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Laravel `when` Method To Support Multiple Queries</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>There is a method on Laravel collections called <a href=https://laravel.com/docs/8.x/collections#method-when><code>when</code></a> that allows you to create a condition on your code without using an <code>if</code> statement. This can be really handy given we often have conditions on queries to deal with missing or present data, the session-specific environment, or even information in the config.<p>Let's look at the common pattern I was using in the past to put conditions on my queries:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span style=color:#ab7967>&LT?php
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Laravel `when` Method To Support Multiple Queries | OhDoyleRules</title><meta content="Using Laravel `when` Method To Support Multiple Queries | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Laravel `when` Method To Support Multiple Queries" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Laravel `when` Method To Support Multiple Queries" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use the `when` method on database collections in Laravel to create more flexible and readable code" name=description><meta content="How to use the `when` method on database collections in Laravel to create more flexible and readable code" itemprop=description><meta content="How to use the `when` method on database collections in Laravel to create more flexible and readable code" property=og:description><meta content="How to use the `when` method on database collections in Laravel to create more flexible and readable code" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Laravel `when` Method To Support Multiple Queries | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="query, laravel, sqlite, postgres, sql, builder, search, when, switch, case" itemprop=keywords><meta content="query, laravel, sqlite, postgres, sql, builder, search, when, switch, case" property=article:tag><meta content="query, laravel, sqlite, postgres, sql, builder, search, when, switch, case" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/using-laravel-when-method-to-support-multiple-queries/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Laravel `when` Method To Support Multiple Queries</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>There is a method on Laravel collections called <a rel="noopener nofollow noreferrer" href=https://laravel.com/docs/8.x/collections#method-when target=_blank><code>when</code></a> that allows you to create a condition on your code without using an <code>if</code> statement. This can be really handy given we often have conditions on queries to deal with missing or present data, the session-specific environment, or even information in the config.<p>Let's look at the common pattern I was using in the past to put conditions on my queries:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span style=color:#ab7967>&LT?php
 </span><span style=color:#65737e>/** </span><span style=color:#b48ead>@var</span><span style=color:#65737e> \Illuminate\Database\Eloquent\Builder|\App\Models\User */
 </span><span>$</span><span style=color:#bf616a>query </span><span>= </span><span style=color:#ebcb8b>User</span><span>::</span><span style=color:#bf616a>query</span><span>();
 </span><span>
diff --git a/docs/snippets/using-node-in-applescript/index.html b/docs/snippets/using-node-in-applescript/index.html
index 79ed749..95a7ad4 100644
--- a/docs/snippets/using-node-in-applescript/index.html
+++ b/docs/snippets/using-node-in-applescript/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Node.js in an AppleScript | OhDoyleRules</title><meta content="Using Node.js in an AppleScript | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Node.js in an AppleScript" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/using-node-in-applescript/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/using-node-in-applescript/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Node.js in an AppleScript" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use Node.js in an AppleScript" name=description><meta content="How to use Node.js in an AppleScript" itemprop=description><meta content="How to use Node.js in an AppleScript" property=og:description><meta content="How to use Node.js in an AppleScript" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Node.js in an AppleScript | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="osx, apple, applescript, automator, finder, node, javascript, js, marked, markdown, md, scpt" itemprop=keywords><meta content="osx, apple, applescript, automator, finder, node, javascript, js, marked, markdown, md, scpt" property=article:tag><meta content="osx, apple, applescript, automator, finder, node, javascript, js, marked, markdown, md, scpt" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/using-node-in-applescript/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Node.js in an AppleScript</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 12, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>A few days ago, I wrote an article about <a title="Copy filepath to clipboard in OSX" href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx>how to create a service in Automator to copy the selected file's path to the clipboard while in the Finder.app</a>.<p>I was playing around some more and thought it would be cool to be able to right click and convert a markdown file to HTML. This can be useful for lazy people who don't want to open and app or terminal just to convert.<blockquote><p>Here is the trick, you need absolute paths to node and the target module (or bin entry js file) file you are trying to run</blockquote><p>Here is the code:<pre class=language-applescript data-lang=applescript style=background:#2b303b;color:#c0c5ce><code class=language-applescript data-lang=applescript><span style=color:#65737e>-- setup some valid extensions for markdown files
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Node.js in an AppleScript | OhDoyleRules</title><meta content="Using Node.js in an AppleScript | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Node.js in an AppleScript" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/using-node-in-applescript/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/using-node-in-applescript/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Node.js in an AppleScript" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use Node.js in an AppleScript" name=description><meta content="How to use Node.js in an AppleScript" itemprop=description><meta content="How to use Node.js in an AppleScript" property=og:description><meta content="How to use Node.js in an AppleScript" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Node.js in an AppleScript | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="osx, apple, applescript, automator, finder, node, javascript, js, marked, markdown, md, scpt" itemprop=keywords><meta content="osx, apple, applescript, automator, finder, node, javascript, js, marked, markdown, md, scpt" property=article:tag><meta content="osx, apple, applescript, automator, finder, node, javascript, js, marked, markdown, md, scpt" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/using-node-in-applescript/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Node.js in an AppleScript</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 12, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>A few days ago, I wrote an article about <a rel="noopener nofollow noreferrer" title="Copy filepath to clipboard in OSX" href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx target=_blank>how to create a service in Automator to copy the selected file's path to the clipboard while in the Finder.app</a>.<p>I was playing around some more and thought it would be cool to be able to right click and convert a markdown file to HTML. This can be useful for lazy people who don't want to open and app or terminal just to convert.<blockquote><p>Here is the trick, you need absolute paths to node and the target module (or bin entry js file) file you are trying to run</blockquote><p>Here is the code:<pre class=language-applescript data-lang=applescript style=background:#2b303b;color:#c0c5ce><code class=language-applescript data-lang=applescript><span style=color:#65737e>-- setup some valid extensions for markdown files
 </span><span style=color:#b48ead>property </span><span style=color:#bf616a>validExtensions </span><span>: {"</span><span style=color:#a3be8c>md</span><span>", "</span><span style=color:#a3be8c>markdown</span><span>", "</span><span style=color:#a3be8c>mdown</span><span>"}
 </span><span style=color:#b48ead>tell </span><span style=color:#ebcb8b>application </span><span>"</span><span style=color:#a3be8c>Finder</span><span>"
 </span><span>  </span><span style=color:#b48ead>set </span><span style=color:#bf616a>theFile </span><span style=color:#b48ead>to </span><span style=color:#96b5b4>item </span><span style=color:#d08770>1 </span><span style=color:#b48ead>of </span><span>(</span><span style=color:#b48ead>get</span><span> selection)
@@ -24,4 +24,4 @@
 </span><span>    </span><span style=color:#96b5b4>delay </span><span style=color:#d08770>2
 </span><span>  </span><span style=color:#b48ead>end if
 </span><span style=color:#b48ead>end tell
-</span></code></pre><p>Now this can be used in an <em>Automator Service</em>, which you can find out how to make in the <a title="Copy filepath to clipboard in OSX" href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx>previous article</a>.<p>If you modify this for any other cool node tools, please let me know!<p><strong>PS</strong>: Keep in mind that this doesn't iterate through multiple files. Only single files.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Now this can be used in an <em>Automator Service</em>, which you can find out how to make in the <a rel="noopener nofollow noreferrer" title="Copy filepath to clipboard in OSX" href=https://ohdoylerules.com/snippets/copy-file-path-clipboard-osx target=_blank>previous article</a>.<p>If you modify this for any other cool node tools, please let me know!<p><strong>PS</strong>: Keep in mind that this doesn't iterate through multiple files. Only single files.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/validate-email-with-lua/index.html b/docs/snippets/validate-email-with-lua/index.html
index e050556..6baed35 100644
--- a/docs/snippets/validate-email-with-lua/index.html
+++ b/docs/snippets/validate-email-with-lua/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Validate Email With Lua | OhDoyleRules</title><meta content="Validate Email With Lua | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Validate Email With Lua" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/validate-email-with-lua/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/validate-email-with-lua/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Validate Email With Lua" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A verbose email validation function for Lua" name=description><meta content="A verbose email validation function for Lua" itemprop=description><meta content="A verbose email validation function for Lua" property=og:description><meta content="A verbose email validation function for Lua" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Validate Email With Lua | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Lua, valid, email, address, test" itemprop=keywords><meta content="Lua, valid, email, address, test" property=article:tag><meta content="Lua, valid, email, address, test" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/validate-email-with-lua/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Validate Email With Lua</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>Checking if an email is valid should be easy, right? WRONG.<p>This took about 3-4 hours to finally get. I scoured the web for a good email validation function. But, I was unable to find any that actually handled all the valid email variations.<p>If you didn't know, the <a href=https://en.wikipedia.org/wiki/Email_address#Examples>spec for email</a> is actually pretty complex. It allows a lot more than just a web-safe prefix and a domain sandwiched between an <code>@</code> symbol. You can use quotes, brackets, escapes, and more <code>@</code> symbols.<p>Looking at the results that Wikipedia gives me for emails that should fail or pass a validation, I knew this would require more than just a simple pattern match.<p>Here is the final product. I added some nice comments to explain some of the rules as well.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/67846afd05335822c149.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/67846afd05335822c149.js src=about:blank></iframe><p>You can see there is a lot more logic than expected. I also made this function have multiple returns.<p>If the email passes the function returns <code>true</code> and <code>nil</code>, but if it fails, it will return <code>nil</code> and the reason that the validation failed. Pretty slick!<p>Anyway, this was a tedious task. So go forth and leverage my pain in your next form submission.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Validate Email With Lua | OhDoyleRules</title><meta content="Validate Email With Lua | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Validate Email With Lua" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/validate-email-with-lua/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/validate-email-with-lua/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Validate Email With Lua" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A verbose email validation function for Lua" name=description><meta content="A verbose email validation function for Lua" itemprop=description><meta content="A verbose email validation function for Lua" property=og:description><meta content="A verbose email validation function for Lua" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Validate Email With Lua | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Lua, valid, email, address, test" itemprop=keywords><meta content="Lua, valid, email, address, test" property=article:tag><meta content="Lua, valid, email, address, test" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/validate-email-with-lua/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Validate Email With Lua</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 06, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>Checking if an email is valid should be easy, right? WRONG.<p>This took about 3-4 hours to finally get. I scoured the web for a good email validation function. But, I was unable to find any that actually handled all the valid email variations.<p>If you didn't know, the <a rel="noopener nofollow noreferrer" href=https://en.wikipedia.org/wiki/Email_address#Examples target=_blank>spec for email</a> is actually pretty complex. It allows a lot more than just a web-safe prefix and a domain sandwiched between an <code>@</code> symbol. You can use quotes, brackets, escapes, and more <code>@</code> symbols.<p>Looking at the results that Wikipedia gives me for emails that should fail or pass a validation, I knew this would require more than just a simple pattern match.<p>Here is the final product. I added some nice comments to explain some of the rules as well.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/67846afd05335822c149.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/67846afd05335822c149.js src=about:blank></iframe><p>You can see there is a lot more logic than expected. I also made this function have multiple returns.<p>If the email passes the function returns <code>true</code> and <code>nil</code>, but if it fails, it will return <code>nil</code> and the reason that the validation failed. Pretty slick!<p>Anyway, this was a tedious task. So go forth and leverage my pain in your next form submission.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/versioning-service-workers-in-hugo/index.html b/docs/snippets/versioning-service-workers-in-hugo/index.html
index 8140c7b..56caec5 100644
--- a/docs/snippets/versioning-service-workers-in-hugo/index.html
+++ b/docs/snippets/versioning-service-workers-in-hugo/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Versioning Service Workers In Hugo | OhDoyleRules</title><meta content="Versioning Service Workers In Hugo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Versioning Service Workers In Hugo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Versioning Service Workers In Hugo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use Hugo pipes and resources to version your service worker scripts" name=description><meta content="How to use Hugo pipes and resources to version your service worker scripts" itemprop=description><meta content="How to use Hugo pipes and resources to version your service worker scripts" property=og:description><meta content="How to use Hugo pipes and resources to version your service worker scripts" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Versioning Service Workers In Hugo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="hugo, sw, service worker, version, bust, clear, script, resources, pipes" itemprop=keywords><meta content="hugo, sw, service worker, version, bust, clear, script, resources, pipes" property=article:tag><meta content="hugo, sw, service worker, version, bust, clear, script, resources, pipes" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Versioning Service Workers In Hugo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 21, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>I have been running this blog on <a href=https://gohugo.io/>Hugo</a> for quite some time. It is fast, well supported, and full of features. Until recently, one of the features I was not taking advantage of was the <a href=https://gohugo.io/hugo-pipes/introduction/>pipes feature</a>.<p>For all intents and purposes, pipes are used for processing strings and templates. They are "assets" that are used on your site. They live outside your theme at the top level <code>/assets</code> folder in your Hugo project. But you can also pull in remote assets via a URL and Hugo will pull that in when you build your site.<p>From the day I switched to Hugo, I was always <a href=https://developer.chrome.com/docs/workbox/caching-strategies-overview/#cache-only>using a service worker to cache my sites static assets</a>. The challenge I had was how to bust the cache. The old way I was doing this was to add a query string on the end of my <code>sw.js</code> URL. Something like this:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span>navigator.</span><span style=color:#bf616a>serviceWorker</span><span>.</span><span style=color:#8fa1b3>register</span><span>('</span><span style=color:#a3be8c>sw.js?{{ now.Format "2006-01-02" }}</span><span>');
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Versioning Service Workers In Hugo | OhDoyleRules</title><meta content="Versioning Service Workers In Hugo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Versioning Service Workers In Hugo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Versioning Service Workers In Hugo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use Hugo pipes and resources to version your service worker scripts" name=description><meta content="How to use Hugo pipes and resources to version your service worker scripts" itemprop=description><meta content="How to use Hugo pipes and resources to version your service worker scripts" property=og:description><meta content="How to use Hugo pipes and resources to version your service worker scripts" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Versioning Service Workers In Hugo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="hugo, sw, service worker, version, bust, clear, script, resources, pipes" itemprop=keywords><meta content="hugo, sw, service worker, version, bust, clear, script, resources, pipes" property=article:tag><meta content="hugo, sw, service worker, version, bust, clear, script, resources, pipes" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/versioning-service-workers-in-hugo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Versioning Service Workers In Hugo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 21, 2022</span></span><div itemprop="ArticleBody text" class=main-content><p>I have been running this blog on <a rel="noopener nofollow noreferrer" href=https://gohugo.io/ target=_blank>Hugo</a> for quite some time. It is fast, well supported, and full of features. Until recently, one of the features I was not taking advantage of was the <a rel="noopener nofollow noreferrer" href=https://gohugo.io/hugo-pipes/introduction/ target=_blank>pipes feature</a>.<p>For all intents and purposes, pipes are used for processing strings and templates. They are "assets" that are used on your site. They live outside your theme at the top level <code>/assets</code> folder in your Hugo project. But you can also pull in remote assets via a URL and Hugo will pull that in when you build your site.<p>From the day I switched to Hugo, I was always <a rel="noopener nofollow noreferrer" href=https://developer.chrome.com/docs/workbox/caching-strategies-overview/#cache-only target=_blank>using a service worker to cache my sites static assets</a>. The challenge I had was how to bust the cache. The old way I was doing this was to add a query string on the end of my <code>sw.js</code> URL. Something like this:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span>navigator.</span><span style=color:#bf616a>serviceWorker</span><span>.</span><span style=color:#8fa1b3>register</span><span>('</span><span style=color:#a3be8c>sw.js?{{ now.Format "2006-01-02" }}</span><span>');
 </span></code></pre><p>This seemed to work <em>just OK</em>. I think maybe in the last couple years the browser's changed and they would still cache this file even when the URL was different. It would not reload the service worker and therefore update the cache with new articles making my site seem stale even though there was new content.<p>I can't say for sure but it used to work in the past and then one day it did not...<p>Now that this is a known issue in my site, I need a way to bust the cache in the service worker file itself instead of relying on the file's URL.<p>What I need to do is treat the <code>sw.js</code> file as a template so I can pass in a variable and tell the file it is new each time I deploy.<p>In this case, it is pipes to the rescue! Here is the code that runs in my <code>footer.html</code> file:<pre class=language-handlebars data-lang=handlebars style=background:#2b303b;color:#c0c5ce><code class=language-handlebars data-lang=handlebars><span style=color:#65737e>&LT!-- Get the file in "assets/service-worker.js" -->
 </span><span>{{ </span><span style=color:#bf616a>$jsTemplate</span><span> := </span><span style=color:#bf616a>resources.Get </span><span>"</span><span style=color:#a3be8c>service-worker.js</span><span>" }}
 </span><span style=color:#65737e>&LT!-- We are making a new file called "sw.js" -->
diff --git a/docs/snippets/vue-stateful-form-component/index.html b/docs/snippets/vue-stateful-form-component/index.html
index d84f681..2e6d2c6 100644
--- a/docs/snippets/vue-stateful-form-component/index.html
+++ b/docs/snippets/vue-stateful-form-component/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vue stateful form component | OhDoyleRules</title><meta content="Vue stateful form component | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vue stateful form component" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/vue-stateful-form-component/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/vue-stateful-form-component/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vue stateful form component" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a Vue form that escalates all events to the top level and supports v-model" name=description><meta content="Create a Vue form that escalates all events to the top level and supports v-model" itemprop=description><meta content="Create a Vue form that escalates all events to the top level and supports v-model" property=og:description><meta content="Create a Vue form that escalates all events to the top level and supports v-model" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vue stateful form component | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, state, form, render, component, v-model, event" itemprop=keywords><meta content="vue, state, form, render, component, v-model, event" property=article:tag><meta content="vue, state, form, render, component, v-model, event" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/vue-stateful-form-component/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vue stateful form component</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 24, 2021</span></span><div itemprop="ArticleBody text" class=main-content><p>Recently, I needed to create a app that could recreate a form from static JSON and then fill it with values from another source. This was pretty difficult as storing a form in JSON is very hard. You can't add handlers or events given you only can store string, numbers, booleans, and arrays. No functions.<p>I ended up coming up with <a href=https://james2doyle.github.io/vue-stateful-form/>a component that uses a render function in order to recreate the form stored in JSON</a>.<div class=center><a href=/images/vue-stateful-form-demo.gif target=_blank> <img src=/images/vue-stateful-form-demo.gif width=720> </a></div><h4 id=features>Features</h4><ul><li><label><input checked readonly type=checkbox>  uses event delegation from the top level <code>form</code> element</label><li><label><input checked readonly type=checkbox>  2 way binding with proper <code>v-model</code> support</label><li><label><input checked readonly type=checkbox>  unstyled but includes lots of classes to target</label><li><label><input checked readonly type=checkbox>  built-in debounce function</label><li><label><input checked readonly type=checkbox>  still allows <code>submit</code> handler</label><li><label><input checked readonly type=checkbox>  encodes "multiple" inputs (<code>select[multiple]</code>, <code>radio</code>, <code>checkbox</code>)</label><li><label><input checked readonly type=checkbox>  no hacky "mounted" calls</label><li><label><input checked readonly type=checkbox>  supports most input elements (no <code>file</code>/<code>image</code> support)</label><li><label><input checked readonly type=checkbox>  sets <code>ref</code> for each input automatically</label><li><label><input checked readonly type=checkbox>  supports custom components and passing props/attrs</label></ul><p>I made a whole site on this and posted the code to NPM. It currently only works in Vue 2. So keep that in mind. You can <a href=https://james2doyle.github.io/vue-stateful-form/>find the source code and instructions here</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vue stateful form component | OhDoyleRules</title><meta content="Vue stateful form component | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vue stateful form component" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/vue-stateful-form-component/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/vue-stateful-form-component/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vue stateful form component" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Create a Vue form that escalates all events to the top level and supports v-model" name=description><meta content="Create a Vue form that escalates all events to the top level and supports v-model" itemprop=description><meta content="Create a Vue form that escalates all events to the top level and supports v-model" property=og:description><meta content="Create a Vue form that escalates all events to the top level and supports v-model" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vue stateful form component | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, state, form, render, component, v-model, event" itemprop=keywords><meta content="vue, state, form, render, component, v-model, event" property=article:tag><meta content="vue, state, form, render, component, v-model, event" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/vue-stateful-form-component/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vue stateful form component</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 24, 2021</span></span><div itemprop="ArticleBody text" class=main-content><p>Recently, I needed to create a app that could recreate a form from static JSON and then fill it with values from another source. This was pretty difficult as storing a form in JSON is very hard. You can't add handlers or events given you only can store string, numbers, booleans, and arrays. No functions.<p>I ended up coming up with <a rel="noopener nofollow noreferrer" href=https://james2doyle.github.io/vue-stateful-form/ target=_blank>a component that uses a render function in order to recreate the form stored in JSON</a>.<div class=center><a href=/images/vue-stateful-form-demo.gif target=_blank> <img src=/images/vue-stateful-form-demo.gif width=720> </a></div><h4 id=features>Features</h4><ul><li><label><input checked readonly type=checkbox>  uses event delegation from the top level <code>form</code> element</label><li><label><input checked readonly type=checkbox>  2 way binding with proper <code>v-model</code> support</label><li><label><input checked readonly type=checkbox>  unstyled but includes lots of classes to target</label><li><label><input checked readonly type=checkbox>  built-in debounce function</label><li><label><input checked readonly type=checkbox>  still allows <code>submit</code> handler</label><li><label><input checked readonly type=checkbox>  encodes "multiple" inputs (<code>select[multiple]</code>, <code>radio</code>, <code>checkbox</code>)</label><li><label><input checked readonly type=checkbox>  no hacky "mounted" calls</label><li><label><input checked readonly type=checkbox>  supports most input elements (no <code>file</code>/<code>image</code> support)</label><li><label><input checked readonly type=checkbox>  sets <code>ref</code> for each input automatically</label><li><label><input checked readonly type=checkbox>  supports custom components and passing props/attrs</label></ul><p>I made a whole site on this and posted the code to NPM. It currently only works in Vue 2. So keep that in mind. You can <a rel="noopener nofollow noreferrer" href=https://james2doyle.github.io/vue-stateful-form/ target=_blank>find the source code and instructions here</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/vuex-crosstab/index.html b/docs/snippets/vuex-crosstab/index.html
index 8a91858..5b1bf41 100644
--- a/docs/snippets/vuex-crosstab/index.html
+++ b/docs/snippets/vuex-crosstab/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vuex Crosstab Plugin | OhDoyleRules</title><meta content="Vuex Crosstab Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vuex Crosstab Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/vuex-crosstab/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/vuex-crosstab/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vuex Crosstab Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab" name=description><meta content="CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab" itemprop=description><meta content="CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab" property=og:description><meta content="CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vuex Crosstab Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, vuex, plugin, store, sync, tab, window, event, bus, localstorage, storage" itemprop=keywords><meta content="vue, vuex, plugin, store, sync, tab, window, event, bus, localstorage, storage" property=article:tag><meta content="vue, vuex, plugin, store, sync, tab, window, event, bus, localstorage, storage" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/vuex-crosstab/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vuex Crosstab Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>Did you know that you can use localstorage as an event bus between same-origin tabs?<p>Yep! Local storage is shared across same-origin domains. Which means you can share information between tabs on the same domain. Other cool thing is that the <code>storage</code> event that is fired on the <code>window</code> when localstorage changes, it <em>only fired on non-focused tabs</em>. This means you can write an event bus to sync the tabs you don't have focused with the one you do! Neat.<p>When browsing around GitHub, like I do, I found this project called <a href=https://github.com/storeon/storeon>storeon</a>. It is a framework agnostic state manager. It's aim is to be small and flexible and provide additional functionality through plugins. One such plugin is called <a href=https://github.com/storeon/crosstab>crosstab</a>.<p>I am a Vue.js user who likes VueX. So I wanted to recreate this plugin in VueX. VueX also provides a <a href=https://vuex.vuejs.org/guide/plugins.html>plugin API</a> so you can write plugins as well. So I wrote the plugin for VueX, published it to <a href=https://www.npmjs.com/package/vuex-crosstab>npm</a>, and posted the source on <a href=https://github.com/james2doyle/vuex-crosstab>GitHub</a>.<p>Here is the demo of the plugin working:<div class=center><a title="vuex crosstab demo" href=/images/vuex-crosstab.gif target=_blank><img alt="laravel multi-lingual site demo" src=/images/vuex-crosstab.gif></a></div><p>You can use the plugin like so:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#65737e>// es6
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vuex Crosstab Plugin | OhDoyleRules</title><meta content="Vuex Crosstab Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vuex Crosstab Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/vuex-crosstab/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/vuex-crosstab/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vuex Crosstab Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab" name=description><meta content="CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab" itemprop=description><meta content="CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab" property=og:description><meta content="CrossTab syncs Vuex state across same-origin tabs. Converted from storeon crosstab" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vuex Crosstab Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, vuex, plugin, store, sync, tab, window, event, bus, localstorage, storage" itemprop=keywords><meta content="vue, vuex, plugin, store, sync, tab, window, event, bus, localstorage, storage" property=article:tag><meta content="vue, vuex, plugin, store, sync, tab, window, event, bus, localstorage, storage" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/vuex-crosstab/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vuex Crosstab Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>Did you know that you can use localstorage as an event bus between same-origin tabs?<p>Yep! Local storage is shared across same-origin domains. Which means you can share information between tabs on the same domain. Other cool thing is that the <code>storage</code> event that is fired on the <code>window</code> when localstorage changes, it <em>only fired on non-focused tabs</em>. This means you can write an event bus to sync the tabs you don't have focused with the one you do! Neat.<p>When browsing around GitHub, like I do, I found this project called <a rel="noopener nofollow noreferrer" href=https://github.com/storeon/storeon target=_blank>storeon</a>. It is a framework agnostic state manager. It's aim is to be small and flexible and provide additional functionality through plugins. One such plugin is called <a rel="noopener nofollow noreferrer" href=https://github.com/storeon/crosstab target=_blank>crosstab</a>.<p>I am a Vue.js user who likes VueX. So I wanted to recreate this plugin in VueX. VueX also provides a <a rel="noopener nofollow noreferrer" href=https://vuex.vuejs.org/guide/plugins.html target=_blank>plugin API</a> so you can write plugins as well. So I wrote the plugin for VueX, published it to <a rel="noopener nofollow noreferrer" href=https://www.npmjs.com/package/vuex-crosstab target=_blank>npm</a>, and posted the source on <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/vuex-crosstab target=_blank>GitHub</a>.<p>Here is the demo of the plugin working:<div class=center><a title="vuex crosstab demo" href=/images/vuex-crosstab.gif target=_blank><img alt="laravel multi-lingual site demo" src=/images/vuex-crosstab.gif></a></div><p>You can use the plugin like so:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#65737e>// es6
 </span><span style=color:#65737e>// import CrossTab from 'vuex-crosstab';
 </span><span style=color:#65737e>// commonjs
 </span><span style=color:#b48ead>const </span><span style=color:#bf616a>CrossTab </span><span>= </span><span style=color:#96b5b4>require</span><span>('</span><span style=color:#a3be8c>vuex-crosstab</span><span>');
@@ -11,4 +11,4 @@
 </span><span>  ],
 </span><span>  </span><span style=color:#65737e>// ...
 </span><span>});
-</span></code></pre><p>There is a simple config object you can pass to control some things like the "recovery" which will check the localstorage to see if there was state already in there. You can <a href=https://github.com/james2doyle/vuex-crosstab#options>read more on the Github page</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>There is a simple config object you can pass to control some things like the "recovery" which will check the localstorage to see if there was state already in there. You can <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/vuex-crosstab#options target=_blank>read more on the Github page</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/vuex-stateful-url/index.html b/docs/snippets/vuex-stateful-url/index.html
index 058d6c7..f76af90 100644
--- a/docs/snippets/vuex-stateful-url/index.html
+++ b/docs/snippets/vuex-stateful-url/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vuex Stateful URL Plugin | OhDoyleRules</title><meta content="Vuex Stateful URL Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vuex Stateful URL Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/vuex-stateful-url/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/vuex-stateful-url/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vuex Stateful URL Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="StatefulURL is a Vuex plugin that can read and write the state from a query string" name=description><meta content="StatefulURL is a Vuex plugin that can read and write the state from a query string" itemprop=description><meta content="StatefulURL is a Vuex plugin that can read and write the state from a query string" property=og:description><meta content="StatefulURL is a Vuex plugin that can read and write the state from a query string" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vuex Stateful URL Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, vuex, plugin, store, sync, url, query, string" itemprop=keywords><meta content="vue, vuex, plugin, store, sync, url, query, string" property=article:tag><meta content="vue, vuex, plugin, store, sync, url, query, string" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/vuex-stateful-url/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vuex Stateful URL Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you ever used permalinks on a site? These links store the state of the page in the URL. They can be super useful for simple single-page-apps (SPAs) for bringing users back to where they were when they left the page or just adding the ability to share that page state with someone else without requiring logins or anything like that.<p>I'm a Vue.js user who likes VueX. So I wanted to create a plugin in VueX that would send the state of the store into the URL.<p>VueX provides a <a href=https://vuex.vuejs.org/guide/plugins.html>plugin API</a> so you can write plugins that can extend the basic functionality. So I wrote the plugin for VueX that would sync the store to the URL.<p>I used a great package called <a href=https://github.com/masotime/json-url>json-url</a> which allows you to encode/compress JSON objects in a URL-safe way.<p>It is now published to <a href=https://www.npmjs.com/package/vuex-stateful-url>npm</a> and the source is on <a href=https://github.com/james2doyle/vuex-stateful-url>GitHub</a>.<p>Here is the demo of the plugin working:<div class=center><a title="vuex stateful url demo" href=/images/vuex-stateful-url.gif target=_blank><img alt="laravel multi-lingual site demo" src=/images/vuex-stateful-url.gif></a></div><p>You can use the plugin like so:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#65737e>// es6
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vuex Stateful URL Plugin | OhDoyleRules</title><meta content="Vuex Stateful URL Plugin | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vuex Stateful URL Plugin" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/vuex-stateful-url/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/vuex-stateful-url/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vuex Stateful URL Plugin" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="StatefulURL is a Vuex plugin that can read and write the state from a query string" name=description><meta content="StatefulURL is a Vuex plugin that can read and write the state from a query string" itemprop=description><meta content="StatefulURL is a Vuex plugin that can read and write the state from a query string" property=og:description><meta content="StatefulURL is a Vuex plugin that can read and write the state from a query string" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vuex Stateful URL Plugin | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, vuex, plugin, store, sync, url, query, string" itemprop=keywords><meta content="vue, vuex, plugin, store, sync, url, query, string" property=article:tag><meta content="vue, vuex, plugin, store, sync, url, query, string" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/vuex-stateful-url/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vuex Stateful URL Plugin</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 03, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you ever used permalinks on a site? These links store the state of the page in the URL. They can be super useful for simple single-page-apps (SPAs) for bringing users back to where they were when they left the page or just adding the ability to share that page state with someone else without requiring logins or anything like that.<p>I'm a Vue.js user who likes VueX. So I wanted to create a plugin in VueX that would send the state of the store into the URL.<p>VueX provides a <a rel="noopener nofollow noreferrer" href=https://vuex.vuejs.org/guide/plugins.html target=_blank>plugin API</a> so you can write plugins that can extend the basic functionality. So I wrote the plugin for VueX that would sync the store to the URL.<p>I used a great package called <a rel="noopener nofollow noreferrer" href=https://github.com/masotime/json-url target=_blank>json-url</a> which allows you to encode/compress JSON objects in a URL-safe way.<p>It is now published to <a rel="noopener nofollow noreferrer" href=https://www.npmjs.com/package/vuex-stateful-url target=_blank>npm</a> and the source is on <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/vuex-stateful-url target=_blank>GitHub</a>.<p>Here is the demo of the plugin working:<div class=center><a title="vuex stateful url demo" href=/images/vuex-stateful-url.gif target=_blank><img alt="laravel multi-lingual site demo" src=/images/vuex-stateful-url.gif></a></div><p>You can use the plugin like so:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#65737e>// es6
 </span><span style=color:#65737e>// import StatefulURL from 'vuex-stateful-url';
 </span><span style=color:#65737e>// commonjs
 </span><span style=color:#b48ead>const </span><span style=color:#bf616a>StatefulURL </span><span>= </span><span style=color:#96b5b4>require</span><span>('</span><span style=color:#a3be8c>vuex-stateful-url</span><span>');
@@ -11,4 +11,4 @@
 </span><span>  ],
 </span><span>  </span><span style=color:#65737e>// ...
 </span><span>});
-</span></code></pre><p>You can <a href=https://github.com/james2doyle/vuex-crosstab>read more on the Github page</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>You can <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/vuex-crosstab target=_blank>read more on the Github page</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/snippets/wysiwyg-in-pyrocms-widgets/index.html b/docs/snippets/wysiwyg-in-pyrocms-widgets/index.html
index 749edb6..951cf7d 100644
--- a/docs/snippets/wysiwyg-in-pyrocms-widgets/index.html
+++ b/docs/snippets/wysiwyg-in-pyrocms-widgets/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>WYSIWYG in PyroCMS Widgets | OhDoyleRules</title><meta content="WYSIWYG in PyroCMS Widgets | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="WYSIWYG in PyroCMS Widgets" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="WYSIWYG in PyroCMS Widgets" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="WYSIWYG in PyroCMS Widgets" name=description><meta content="WYSIWYG in PyroCMS Widgets" itemprop=description><meta content="WYSIWYG in PyroCMS Widgets" property=og:description><meta content="WYSIWYG in PyroCMS Widgets" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="WYSIWYG in PyroCMS Widgets | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="WYSIWYG, PyroCMS, Widgets" itemprop=keywords><meta content="WYSIWYG, PyroCMS, Widgets" property=article:tag><meta content="WYSIWYG, PyroCMS, Widgets" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">WYSIWYG in PyroCMS Widgets</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 10, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I have been working on a site that uses <a title="PyroCMS Homepage" href=https://www.pyrocms.com/>PyroCMS</a>. I needed to build a custom widget that had a WYSIWYG textarea. This is what worked for me.<p>Add this to template in the constructors function.<h4 id=pyrocms-system-cms-modules-widgets-controllers-admin-php>pyrocms/system/cms/modules/widgets/controllers/admin.php</h4><pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>// my new template
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>WYSIWYG in PyroCMS Widgets | OhDoyleRules</title><meta content="WYSIWYG in PyroCMS Widgets | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="WYSIWYG in PyroCMS Widgets" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="WYSIWYG in PyroCMS Widgets" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="WYSIWYG in PyroCMS Widgets" name=description><meta content="WYSIWYG in PyroCMS Widgets" itemprop=description><meta content="WYSIWYG in PyroCMS Widgets" property=og:description><meta content="WYSIWYG in PyroCMS Widgets" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="WYSIWYG in PyroCMS Widgets | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="WYSIWYG, PyroCMS, Widgets" itemprop=keywords><meta content="WYSIWYG, PyroCMS, Widgets" property=article:tag><meta content="WYSIWYG, PyroCMS, Widgets" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/wysiwyg-in-pyrocms-widgets/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">WYSIWYG in PyroCMS Widgets</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 10, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I have been working on a site that uses <a rel="noopener nofollow noreferrer" title="PyroCMS Homepage" href=https://www.pyrocms.com/ target=_blank>PyroCMS</a>. I needed to build a custom widget that had a WYSIWYG textarea. This is what worked for me.<p>Add this to template in the constructors function.<h4 id=pyrocms-system-cms-modules-widgets-controllers-admin-php>pyrocms/system/cms/modules/widgets/controllers/admin.php</h4><pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>// my new template
 </span><span>$this->template
 </span><span>->set_partial('shortcuts', 'admin/partials/shortcuts')
 </span><span>->append_js('module::widgets.js')
diff --git a/docs/snippets/zsh-new-open-function/index.html b/docs/snippets/zsh-new-open-function/index.html
index b883505..895966b 100644
--- a/docs/snippets/zsh-new-open-function/index.html
+++ b/docs/snippets/zsh-new-open-function/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>zsh new file && open file function | OhDoyleRules</title><meta content="zsh new file && open file function | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="zsh new file && open file function" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/zsh-new-open-function/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/zsh-new-open-function/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="zsh new file && open file function" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="zsh new file && open file function" name=description><meta content="zsh new file && open file function" itemprop=description><meta content="zsh new file && open file function" property=og:description><meta content="zsh new file && open file function" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="zsh new file && open file function | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="zsh, new, file, and, open, function, shell, bash, command" itemprop=keywords><meta content="zsh, new, file, and, open, function, shell, bash, command" property=article:tag><meta content="zsh, new, file, and, open, function, shell, bash, command" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/zsh-new-open-function/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">zsh new file && open file function</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 13, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>Here is a little function that I made for <a href=https://github.com/robbyrussell/oh-my-zsh title=oh-my-zsh>oh-my-zsh</a>. I found myself constantly doing <code>sudo touch app.js && open app.js</code>.<p>What this little command does is create an empty file called <code>app.js</code> and then opens it with whatever your default editor is.<h4 id=here-is-the-function>Here is the function:</h4><pre style=background:#2b303b;color:#c0c5ce><code><span># create a new file in the current directory and then open it
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>zsh new file && open file function | OhDoyleRules</title><meta content="zsh new file && open file function | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="zsh new file && open file function" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/snippets/zsh-new-open-function/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/snippets/zsh-new-open-function/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="zsh new file && open file function" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="zsh new file && open file function" name=description><meta content="zsh new file && open file function" itemprop=description><meta content="zsh new file && open file function" property=og:description><meta content="zsh new file && open file function" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="zsh new file && open file function | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="zsh, new, file, and, open, function, shell, bash, command" itemprop=keywords><meta content="zsh, new, file, and, open, function, shell, bash, command" property=article:tag><meta content="zsh, new, file, and, open, function, shell, bash, command" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/snippets/zsh-new-open-function/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">zsh new file && open file function</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 13, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>Here is a little function that I made for <a rel="noopener nofollow noreferrer" href=https://github.com/robbyrussell/oh-my-zsh target=_blank title=oh-my-zsh>oh-my-zsh</a>. I found myself constantly doing <code>sudo touch app.js && open app.js</code>.<p>What this little command does is create an empty file called <code>app.js</code> and then opens it with whatever your default editor is.<h4 id=here-is-the-function>Here is the function:</h4><pre style=background:#2b303b;color:#c0c5ce><code><span># create a new file in the current directory and then open it
 </span><span>new () {
 </span><span>  sudo touch $1 && open $1
 </span><span>}
diff --git a/docs/tricks/always-connect-to-starbucks-wifi/index.html b/docs/tricks/always-connect-to-starbucks-wifi/index.html
index 8b7a3ef..4e98e61 100644
--- a/docs/tricks/always-connect-to-starbucks-wifi/index.html
+++ b/docs/tricks/always-connect-to-starbucks-wifi/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Always Connect To Starbucks WiFi | OhDoyleRules</title><meta content="Always Connect To Starbucks WiFi | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Always Connect To Starbucks WiFi" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Always Connect To Starbucks WiFi" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to connect to the Starbucks WiFi every time by using your phone." name=description><meta content="How to connect to the Starbucks WiFi every time by using your phone." itemprop=description><meta content="How to connect to the Starbucks WiFi every time by using your phone." property=og:description><meta content="How to connect to the Starbucks WiFi every time by using your phone." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Always Connect To Starbucks WiFi | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="connect, starbucks, wifi, wireless, laptop, trick, easy, phone, tether, hotspot, iphone, android, macbook, osx" itemprop=keywords><meta content="connect, starbucks, wifi, wireless, laptop, trick, easy, phone, tether, hotspot, iphone, android, macbook, osx" property=article:tag><meta content="connect, starbucks, wifi, wireless, laptop, trick, easy, phone, tether, hotspot, iphone, android, macbook, osx" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Always Connect To Starbucks WiFi</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Lately, it has been quite difficult for me to connect to Starbucks WiFi. About a year ago, the network would connect pretty quickly, but now it seems like the network is powered by voodoo magic and the will of Satan.<p>Well, I have discovered the <em>ultimate way</em> to connect to the network <strong>every time</strong>. Now, this is still complete bullshit, considering the year is <strong>2014</strong> and we have a rover on Mars, but we still can't connect to a wireless network. Don't even get me started on wireless printers.<p>Here is the process I use to connect quickly:<h3 id=1-connect-to-the-starbucks-network-with-your-phone>1. Connect to the Starbucks network with your phone</h3><p>Yes. Use your cell phone to connect to the Starbucks wireless network. I have never had a problem connecting any phone to the Starbucks wifi. It seems like phones have some sort of special powers.<h3 id=2-turn-on-tethering-and-connect-to-your-computer-to-your-phone>2. Turn on tethering and connect to your computer to your phone</h3><p>Once you connect <em>your phone</em> to the Starbucks network, turn on <strong>tethering</strong> or <strong>wifi hotspot</strong>. Then, on your computer, connect to your phones network.<p>Here are instructions for turning on wireless hotspot on <a href=http://www.wikihow.com/Activate-Internet-Tethering-on-the-iPhone>iOS</a> and <a href=http://www.wikihow.com/Tether-With-Android>android</a>.<h3 id=3-load-the-starbucks-connection-page>3. Load the Starbucks connection page</h3><p>Now you will go to the <a href=http://starbucks.allstreamwifi.ca/00246C3ECB90/Welcome>Starbucks connection page</a> and <strong>wait until it is finished loading</strong>.<p>If it doesn't load all the way, that is fine. Just hit the stop button when you think it has reached a point of not going any further.<h4 id=do-not-press-the-green-submit-button>DO NOT PRESS THE GREEN SUBMIT BUTTON!</h4><p>Control yourself. We will do this later.<h3 id=4-switch-your-computer-to-the-starbucks-network>4. Switch your computer to the Starbucks network</h3><p>While that connection page <strong>is still open</strong>, switch your computers wifi from the <em>phones hotspot connection</em> to the <em>Starbucks network</em>.<h3 id=5-click-the-big-green-button-to-connect>5. Click the big green button to connect</h3><p>Now that you have the <em>connection page loaded</em> and your <em>computer connected to the Starbucks wifi</em>, you can press the big green submit button. This will complete the authentication and it should redirect you to the Starbucks homepage.<h3 id=why-does-this-work>Why does this work?</h3><p>I am not really sure. I <em>think</em> the reason might be that an unauthenticated connection to the network (a connection that has not made it past the connection page) has limited bandwidth.<p>This means that all pages are trying to load with a throttled speed. Typically, the browser will only try to connect for so long before it gives up and assumes the site is unreachable (a timeout occurs).<p>With my process, you are using a connection that is already authenticated, so you have the full speed you need in order to load the necessary page without it timing out on you.<h3 id=side-note>Side Note</h3><p>You can probably use your phones <em>data network</em> to load the initial Starbucks connection page. Then switch from the phone to Starbucks and press the green button.<h3 id=did-this-work>Did this work?</h3><p>This always works for me. It is a hell of a lot better than waiting a solid 30 minutes before the network finally connects. If this works for you, please <strong>leave a comment</strong> and let me know. If it doesn't work, let me know <strong>what you did</strong> in order to get it to work.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Always Connect To Starbucks WiFi | OhDoyleRules</title><meta content="Always Connect To Starbucks WiFi | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Always Connect To Starbucks WiFi" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Always Connect To Starbucks WiFi" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to connect to the Starbucks WiFi every time by using your phone." name=description><meta content="How to connect to the Starbucks WiFi every time by using your phone." itemprop=description><meta content="How to connect to the Starbucks WiFi every time by using your phone." property=og:description><meta content="How to connect to the Starbucks WiFi every time by using your phone." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Always Connect To Starbucks WiFi | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="connect, starbucks, wifi, wireless, laptop, trick, easy, phone, tether, hotspot, iphone, android, macbook, osx" itemprop=keywords><meta content="connect, starbucks, wifi, wireless, laptop, trick, easy, phone, tether, hotspot, iphone, android, macbook, osx" property=article:tag><meta content="connect, starbucks, wifi, wireless, laptop, trick, easy, phone, tether, hotspot, iphone, android, macbook, osx" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Always Connect To Starbucks WiFi</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Lately, it has been quite difficult for me to connect to Starbucks WiFi. About a year ago, the network would connect pretty quickly, but now it seems like the network is powered by voodoo magic and the will of Satan.<p>Well, I have discovered the <em>ultimate way</em> to connect to the network <strong>every time</strong>. Now, this is still complete bullshit, considering the year is <strong>2014</strong> and we have a rover on Mars, but we still can't connect to a wireless network. Don't even get me started on wireless printers.<p>Here is the process I use to connect quickly:<h3 id=1-connect-to-the-starbucks-network-with-your-phone>1. Connect to the Starbucks network with your phone</h3><p>Yes. Use your cell phone to connect to the Starbucks wireless network. I have never had a problem connecting any phone to the Starbucks wifi. It seems like phones have some sort of special powers.<h3 id=2-turn-on-tethering-and-connect-to-your-computer-to-your-phone>2. Turn on tethering and connect to your computer to your phone</h3><p>Once you connect <em>your phone</em> to the Starbucks network, turn on <strong>tethering</strong> or <strong>wifi hotspot</strong>. Then, on your computer, connect to your phones network.<p>Here are instructions for turning on wireless hotspot on <a rel="noopener nofollow noreferrer" href=http://www.wikihow.com/Activate-Internet-Tethering-on-the-iPhone target=_blank>iOS</a> and <a rel="noopener nofollow noreferrer" href=http://www.wikihow.com/Tether-With-Android target=_blank>android</a>.<h3 id=3-load-the-starbucks-connection-page>3. Load the Starbucks connection page</h3><p>Now you will go to the <a rel="noopener nofollow noreferrer" href=http://starbucks.allstreamwifi.ca/00246C3ECB90/Welcome target=_blank>Starbucks connection page</a> and <strong>wait until it is finished loading</strong>.<p>If it doesn't load all the way, that is fine. Just hit the stop button when you think it has reached a point of not going any further.<h4 id=do-not-press-the-green-submit-button>DO NOT PRESS THE GREEN SUBMIT BUTTON!</h4><p>Control yourself. We will do this later.<h3 id=4-switch-your-computer-to-the-starbucks-network>4. Switch your computer to the Starbucks network</h3><p>While that connection page <strong>is still open</strong>, switch your computers wifi from the <em>phones hotspot connection</em> to the <em>Starbucks network</em>.<h3 id=5-click-the-big-green-button-to-connect>5. Click the big green button to connect</h3><p>Now that you have the <em>connection page loaded</em> and your <em>computer connected to the Starbucks wifi</em>, you can press the big green submit button. This will complete the authentication and it should redirect you to the Starbucks homepage.<h3 id=why-does-this-work>Why does this work?</h3><p>I am not really sure. I <em>think</em> the reason might be that an unauthenticated connection to the network (a connection that has not made it past the connection page) has limited bandwidth.<p>This means that all pages are trying to load with a throttled speed. Typically, the browser will only try to connect for so long before it gives up and assumes the site is unreachable (a timeout occurs).<p>With my process, you are using a connection that is already authenticated, so you have the full speed you need in order to load the necessary page without it timing out on you.<h3 id=side-note>Side Note</h3><p>You can probably use your phones <em>data network</em> to load the initial Starbucks connection page. Then switch from the phone to Starbucks and press the green button.<h3 id=did-this-work>Did this work?</h3><p>This always works for me. It is a hell of a lot better than waiting a solid 30 minutes before the network finally connects. If this works for you, please <strong>leave a comment</strong> and let me know. If it doesn't work, let me know <strong>what you did</strong> in order to get it to work.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/tricks/disallowed-characters-in-uri/index.html b/docs/tricks/disallowed-characters-in-uri/index.html
index 8cd3b32..2c0d640 100644
--- a/docs/tricks/disallowed-characters-in-uri/index.html
+++ b/docs/tricks/disallowed-characters-in-uri/index.html
@@ -1,2 +1,2 @@
 <!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Disallowed Characters In URI | OhDoyleRules</title><meta content="Disallowed Characters In URI | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Disallowed Characters In URI" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Disallowed Characters In URI" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The URI you submitted has disallowed characters" name=description><meta content="The URI you submitted has disallowed characters" itemprop=description><meta content="The URI you submitted has disallowed characters" property=og:description><meta content="The URI you submitted has disallowed characters" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Disallowed Characters In URI | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, codeigniter, disallowed, characters, 400, error, paragraph ending, %E2%80%8B" itemprop=keywords><meta content="php, codeigniter, disallowed, characters, 400, error, paragraph ending, %E2%80%8B" property=article:tag><meta content="php, codeigniter, disallowed, characters, 400, error, paragraph ending, %E2%80%8B" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Disallowed Characters In URI</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 31, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>How to fix "The URI you submitted has disallowed characters" error.<p>Does this screenshot look familiar?<div class=center><a href=/images/error-400-disallowed-characters.png target=_blank><img alt="codeigniter 400 error for disallowed characters" src=/images/error-400-disallowed-characters.png></a></div><p>Well, it has been killing me for the last 2 hours. I have encountered this error before, but I never realized what caused it, or how it was fixed. I would just try random stuff, entering in different content, moving different functions. Eventually it would go away...<h3 id=symptoms>Symptoms</h3><p>In this situation, whenever I would click on a particular link I got the error. I copied and pasted the URL from the browser into Sublime Text. It looked like this:<pre style=background:#2b303b;color:#c0c5ce><code><span>http://localhost:8080/website/page%E2%80%8B
-</span></code></pre><p>What the heck? I never added those characters. They never showed in the browser URL, and trying to replace them in my code was not working.<p>I tried editing the entries in my database in order to remove the character. I deleted and edited each field. I even tried converting the character encoding and trimming the URL. <em>Nothing worked!</em><p>I then read a post on the <a href=https://forum.pyrocms.com/discussion/24142/does-pagesurl-return-with-disallowed-characters-for-you-too>PyroCMS Forum</a> that said there is probably a hidden character somewhere in the code. Well, I looked in my PHP and I didn't find anything, looking in my HTML there was nothing there either.<p>So what to do? When in doubt, <em>use vim</em>. I dusted off my vim and looked at the PHP file, nothing! Then I opened the HTML file...<p><strong>HEY! There is a tiny little hidden character in my HTML!!</strong><h3 id=the-fix>The Fix</h3><p>I removed the character and everything worked perfectly. Here is the diff after I removed the character:<div class=center><a href=/images/hidden-character-diff.png target=_blank><img alt="git diff for hidden character" src=/images/hidden-character-diff.png></a></div><p>You can see there is a little trailing character there. I don't know exactly how this got in there, but god damn was it driving me crazy.<h3 id=in-summation>In Summation</h3><p>The real problem is, this <em>didn't show in Sublime Text</em> or in the <em>Chrome elements panel</em>. Even the commit on <em>Github</em> didn't show the hidden character I removed.<div class=center><a href=/images/github-hidden-character-diff.png target=_blank><img alt="github diff for hidden character" src=/images/github-hidden-character-diff.png></a></div><p>The only way it would show up is when I opened the file in <strong>vim</strong>!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>What the heck? I never added those characters. They never showed in the browser URL, and trying to replace them in my code was not working.<p>I tried editing the entries in my database in order to remove the character. I deleted and edited each field. I even tried converting the character encoding and trimming the URL. <em>Nothing worked!</em><p>I then read a post on the <a rel="noopener nofollow noreferrer" href=https://forum.pyrocms.com/discussion/24142/does-pagesurl-return-with-disallowed-characters-for-you-too target=_blank>PyroCMS Forum</a> that said there is probably a hidden character somewhere in the code. Well, I looked in my PHP and I didn't find anything, looking in my HTML there was nothing there either.<p>So what to do? When in doubt, <em>use vim</em>. I dusted off my vim and looked at the PHP file, nothing! Then I opened the HTML file...<p><strong>HEY! There is a tiny little hidden character in my HTML!!</strong><h3 id=the-fix>The Fix</h3><p>I removed the character and everything worked perfectly. Here is the diff after I removed the character:<div class=center><a href=/images/hidden-character-diff.png target=_blank><img alt="git diff for hidden character" src=/images/hidden-character-diff.png></a></div><p>You can see there is a little trailing character there. I don't know exactly how this got in there, but god damn was it driving me crazy.<h3 id=in-summation>In Summation</h3><p>The real problem is, this <em>didn't show in Sublime Text</em> or in the <em>Chrome elements panel</em>. Even the commit on <em>Github</em> didn't show the hidden character I removed.<div class=center><a href=/images/github-hidden-character-diff.png target=_blank><img alt="github diff for hidden character" src=/images/github-hidden-character-diff.png></a></div><p>The only way it would show up is when I opened the file in <strong>vim</strong>!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/tricks/fastmod-codemod-for-refactoring/index.html b/docs/tricks/fastmod-codemod-for-refactoring/index.html
index 25ea6d3..f62ea45 100644
--- a/docs/tricks/fastmod-codemod-for-refactoring/index.html
+++ b/docs/tricks/fastmod-codemod-for-refactoring/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Fastmod Codemod For Refactoring | OhDoyleRules</title><meta content="Fastmod Codemod For Refactoring | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Fastmod Codemod For Refactoring" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Fastmod Codemod For Refactoring" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Fastmod is a command line tool that can help you with large-scale codebase refactors" name=description><meta content="Fastmod is a command line tool that can help you with large-scale codebase refactors" itemprop=description><meta content="Fastmod is a command line tool that can help you with large-scale codebase refactors" property=og:description><meta content="Fastmod is a command line tool that can help you with large-scale codebase refactors" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Fastmod Codemod For Refactoring | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="refactor, code, delete, remove, replace, find, webpack, rewrite, fix, fastmod, codemod" itemprop=keywords><meta content="refactor, code, delete, remove, replace, find, webpack, rewrite, fix, fastmod, codemod" property=article:tag><meta content="refactor, code, delete, remove, replace, find, webpack, rewrite, fix, fastmod, codemod" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Fastmod Codemod For Refactoring</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2021</span></span><div itemprop="ArticleBody text" class=main-content><p>If you have ever encounter a big refactor, you were probably dreading the steps it would take to get all the changes done. You have to find patterns, replace them, remove old code, rename variables, so much work! Well, like most things in the development world, there are tools to help you do this. Yes, you can use find-and-replace, but that approach is very naïve (as in simple) and doesn't take in some of the more nuanced cases that you will come across.<p>The tool that I have been using for the last couple of years is <a href=https://github.com/facebookincubator/fastmod>fastmod</a>. <code>fastmod</code> is a flavour of <code>codemod</code> but written in Rust - so it has to be cool right? Here is a description from the <code>codemod</code> repo:<blockquote><p>codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention.</blockquote><p>What you do is write a "match pattern" and then a "replace pattern". When you run the tool you get a prompt for each match and you can decide what you want to do with the proposed changes. This is a lot like <code>git add -p</code> (which is also a great trick) where you only accept the changes you know are valid.<p>One of the best things about this tool is how it provides the interface to the changes you need to apply:<ul><li><input checked disabled type=checkbox> filter files by extension<li><input checked disabled type=checkbox> use regex to create matches<li><input checked disabled type=checkbox> named matches so they can be reordered<li><input checked disabled type=checkbox> preview of the changes before you commit them<li><input checked disabled type=checkbox> ability to accept or decline any single change<li><input checked disabled type=checkbox> ability to edit the changes using <code>$EDITOR</code> (like <code>git commit --verbose</code>)<li><input checked disabled type=checkbox> accept all changes without previews ("fast mode")</ul><p><strong>Help With Regex</strong><p>If you are terrible at written regex patterns, you're not alone. There are lots of people who despise regex but it isn't going anyway. I actually made a conscious effort a few years ago to acquire a better understanding of how regex works and what the patterns and special characters do. I used <a href=https://regexr.com/>this tool call regexr</a> to help practice as well as learn new patterns. Check it out if you need help building and testing regex patterns.<p>Like most purpose-built tools, there is some learning curve to finding how to best use the interface provided. You really need to consider your match strategy and your replace strategy. Let's write some examples based on some real world examples I've come across.<h4 id=css>CSS</h4><p>Here we have a CSS example for a button component. This component can be grouped or have an icon inside it. The naming of the component in CSS is kinda redundant.<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#8fa1b3>.</span><span style=color:#d08770>button-group-component </span><span>{
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Fastmod Codemod For Refactoring | OhDoyleRules</title><meta content="Fastmod Codemod For Refactoring | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Fastmod Codemod For Refactoring" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Fastmod Codemod For Refactoring" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Fastmod is a command line tool that can help you with large-scale codebase refactors" name=description><meta content="Fastmod is a command line tool that can help you with large-scale codebase refactors" itemprop=description><meta content="Fastmod is a command line tool that can help you with large-scale codebase refactors" property=og:description><meta content="Fastmod is a command line tool that can help you with large-scale codebase refactors" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Fastmod Codemod For Refactoring | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="refactor, code, delete, remove, replace, find, webpack, rewrite, fix, fastmod, codemod" itemprop=keywords><meta content="refactor, code, delete, remove, replace, find, webpack, rewrite, fix, fastmod, codemod" property=article:tag><meta content="refactor, code, delete, remove, replace, find, webpack, rewrite, fix, fastmod, codemod" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Fastmod Codemod For Refactoring</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2021</span></span><div itemprop="ArticleBody text" class=main-content><p>If you have ever encounter a big refactor, you were probably dreading the steps it would take to get all the changes done. You have to find patterns, replace them, remove old code, rename variables, so much work! Well, like most things in the development world, there are tools to help you do this. Yes, you can use find-and-replace, but that approach is very naïve (as in simple) and doesn't take in some of the more nuanced cases that you will come across.<p>The tool that I have been using for the last couple of years is <a rel="noopener nofollow noreferrer" href=https://github.com/facebookincubator/fastmod target=_blank>fastmod</a>. <code>fastmod</code> is a flavour of <code>codemod</code> but written in Rust - so it has to be cool right? Here is a description from the <code>codemod</code> repo:<blockquote><p>codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention.</blockquote><p>What you do is write a "match pattern" and then a "replace pattern". When you run the tool you get a prompt for each match and you can decide what you want to do with the proposed changes. This is a lot like <code>git add -p</code> (which is also a great trick) where you only accept the changes you know are valid.<p>One of the best things about this tool is how it provides the interface to the changes you need to apply:<ul><li><input checked disabled type=checkbox> filter files by extension<li><input checked disabled type=checkbox> use regex to create matches<li><input checked disabled type=checkbox> named matches so they can be reordered<li><input checked disabled type=checkbox> preview of the changes before you commit them<li><input checked disabled type=checkbox> ability to accept or decline any single change<li><input checked disabled type=checkbox> ability to edit the changes using <code>$EDITOR</code> (like <code>git commit --verbose</code>)<li><input checked disabled type=checkbox> accept all changes without previews ("fast mode")</ul><p><strong>Help With Regex</strong><p>If you are terrible at written regex patterns, you're not alone. There are lots of people who despise regex but it isn't going anyway. I actually made a conscious effort a few years ago to acquire a better understanding of how regex works and what the patterns and special characters do. I used <a rel="noopener nofollow noreferrer" href=https://regexr.com/ target=_blank>this tool call regexr</a> to help practice as well as learn new patterns. Check it out if you need help building and testing regex patterns.<p>Like most purpose-built tools, there is some learning curve to finding how to best use the interface provided. You really need to consider your match strategy and your replace strategy. Let's write some examples based on some real world examples I've come across.<h4 id=css>CSS</h4><p>Here we have a CSS example for a button component. This component can be grouped or have an icon inside it. The naming of the component in CSS is kinda redundant.<pre class=language-css data-lang=css style=background:#2b303b;color:#c0c5ce><code class=language-css data-lang=css><span style=color:#8fa1b3>.</span><span style=color:#d08770>button-group-component </span><span>{
 </span><span>  display: flex;
 </span><span>  align-items: center;
 </span><span>  justify-content: space-between;
@@ -19,11 +19,11 @@
 </span><span>    display: flex;
 </span><span>    align-items: center;
 </span><span>Accept change (y = yes [default], n = no, e = edit, A = yes to all, E = yes+edit, q = quit)?
-</span></code></pre><p>Here you can see all the options for the code that is going to be changed as well as a nice diff too. If we move from left to right in the options we get the following choices:<ul><li><code>y</code> or <code>enter</code> accepts the changes being shown<li><code>n</code> will not change anything and will go to the next change<li><code>e</code> will open your <code>$EDITOR</code> <em>without</em> any changes applied<li><code>A</code> will accept this change and all of the future changes with reprompting you<li><code>E</code> will open your <code>$EDITOR</code> <em>with</em> any changes applied<li><code>q</code> will no accept the changes and stop the process</ul><p>In this case we can hit <code>enter</code> for each change. We will be prompted 4 times: once for each occurrence of the string <code>-component</code> or we can skip all that and just hit <code>A</code> and everything will be changed.<h4 id=webpack-magic-comments>Webpack Magic Comments</h4><p>Recently I was working on a Vue project that had a lot of components in it. I wanted to start using <a href=https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk>webpack chunking</a> in order to split the components up and have single chunks for each component instead of them being wrapped up together. In order to do that, I need to rewrite all my <code>import</code> statements to use "dynamic imports" with a special magic comment that webpack picks up.<p>You can see the example below:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e># old code: `import MyComponent from 'Components/MyComponent.vue';`
+</span></code></pre><p>Here you can see all the options for the code that is going to be changed as well as a nice diff too. If we move from left to right in the options we get the following choices:<ul><li><code>y</code> or <code>enter</code> accepts the changes being shown<li><code>n</code> will not change anything and will go to the next change<li><code>e</code> will open your <code>$EDITOR</code> <em>without</em> any changes applied<li><code>A</code> will accept this change and all of the future changes with reprompting you<li><code>E</code> will open your <code>$EDITOR</code> <em>with</em> any changes applied<li><code>q</code> will no accept the changes and stop the process</ul><p>In this case we can hit <code>enter</code> for each change. We will be prompted 4 times: once for each occurrence of the string <code>-component</code> or we can skip all that and just hit <code>A</code> and everything will be changed.<h4 id=webpack-magic-comments>Webpack Magic Comments</h4><p>Recently I was working on a Vue project that had a lot of components in it. I wanted to start using <a rel="noopener nofollow noreferrer" href=https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk target=_blank>webpack chunking</a> in order to split the components up and have single chunks for each component instead of them being wrapped up together. In order to do that, I need to rewrite all my <code>import</code> statements to use "dynamic imports" with a special magic comment that webpack picks up.<p>You can see the example below:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span style=color:#65737e># old code: `import MyComponent from 'Components/MyComponent.vue';`
 </span><span style=color:#65737e># new code: `const MyComponent = () => import(/* webpackChunkName: "MyComponent" */ 'Components/MyComponent.vue');`
 </span><span style=color:#65737e># note: you may need to reorder your imports when using a dynamic import
 </span><span>
 </span><span style=color:#bf616a>fastmod -m -d</span><span> ./</span><span style=color:#bf616a> --extensions</span><span> vue \
 </span><span>  '</span><span style=color:#a3be8c>import (.*?) from \</span><span>'(.*?)</span><span style=color:#96b5b4>\'</span><span>;'</span><span style=color:#a3be8c> \
 </span><span style=color:#a3be8c>  </span><span>'</span><span style=color:#bf616a>const </span><span>${</span><span style=color:#bf616a>1</span><span>} = () => import(</span><span style=color:#bf616a>/*</span><span> webpackChunkName: "$</span><span style=color:#a3be8c>{</span><span style=color:#bf616a>1</span><span style=color:#a3be8c>}</span><span>" */ </span><span style=color:#96b5b4>\'</span><span>${</span><span style=color:#bf616a>2</span><span>}</span><span style=color:#96b5b4>\'</span><span>);'
-</span></code></pre><p>Here you can see the snippet I wrote to do the refactor. The great thing about using <code>fastmod</code> over find-and-replace, is that it allowed me to accept or deny the changes. I didn't want all the components updated this way. Especially imports that were not Vue components. So this approach was ideal.<h4 id=more-use-cases>More Use Cases</h4><p>Those are two decent examples but I have used this tool quite a lot for refactoring code. Here are some more examples of what I used it for:<ul><li>add/remove classes in HTML<li>rename bad variable names on multiple projects<li>quickly fix the misspelling of various words in multiple projects<li>ran a replace on an exported SQL database backup to change some values in the data (faster than running a query)<li><a href=https://gist.github.com/james2doyle/a94542b8ef6f07a689f23698424d1763>refactor <code>isset</code> into <code>array_get</code></a> on a Laravel (PHP) project<li>merge down multiple <code>use</code> statement in PHP to a single <code>use</code> line<li>rewrite <code>{{ var }}</code> interpolation to <code>v-text="var"</code> directives in a Vue project<li>replace imports with other versions<li>upgrade old code to new methods or APIs</ul><p>As you can probably already tell, the possibilities are endless! I have used this on database exports and even CSV files. It is a much nicer alternative to find-and-replace. Best of all? It's editor agnostic. So you can use it with any other tools.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Here you can see the snippet I wrote to do the refactor. The great thing about using <code>fastmod</code> over find-and-replace, is that it allowed me to accept or deny the changes. I didn't want all the components updated this way. Especially imports that were not Vue components. So this approach was ideal.<h4 id=more-use-cases>More Use Cases</h4><p>Those are two decent examples but I have used this tool quite a lot for refactoring code. Here are some more examples of what I used it for:<ul><li>add/remove classes in HTML<li>rename bad variable names on multiple projects<li>quickly fix the misspelling of various words in multiple projects<li>ran a replace on an exported SQL database backup to change some values in the data (faster than running a query)<li><a rel="noopener nofollow noreferrer" href=https://gist.github.com/james2doyle/a94542b8ef6f07a689f23698424d1763 target=_blank>refactor <code>isset</code> into <code>array_get</code></a> on a Laravel (PHP) project<li>merge down multiple <code>use</code> statement in PHP to a single <code>use</code> line<li>rewrite <code>{{ var }}</code> interpolation to <code>v-text="var"</code> directives in a Vue project<li>replace imports with other versions<li>upgrade old code to new methods or APIs</ul><p>As you can probably already tell, the possibilities are endless! I have used this on database exports and even CSV files. It is a much nicer alternative to find-and-replace. Best of all? It's editor agnostic. So you can use it with any other tools.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/tricks/hammerspoon-hyper-key/index.html b/docs/tricks/hammerspoon-hyper-key/index.html
index 37f8555..f3a305d 100644
--- a/docs/tricks/hammerspoon-hyper-key/index.html
+++ b/docs/tricks/hammerspoon-hyper-key/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Hammerspoon hyper key | OhDoyleRules</title><meta content="Hammerspoon hyper key | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Hammerspoon hyper key" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Hammerspoon hyper key" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Hammerspoon to create hyper key shortcuts to automate window focus" name=description><meta content="Use Hammerspoon to create hyper key shortcuts to automate window focus" itemprop=description><meta content="Use Hammerspoon to create hyper key shortcuts to automate window focus" property=og:description><meta content="Use Hammerspoon to create hyper key shortcuts to automate window focus" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Hammerspoon hyper key | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="lua, hammerspoon, hyper, osx, automation" itemprop=keywords><meta content="lua, hammerspoon, hyper, osx, automation" property=article:tag><meta content="lua, hammerspoon, hyper, osx, automation" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Hammerspoon hyper key</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2024</span></span><div itemprop="ArticleBody text" class=main-content><p>If you aren't using <a href=https://www.hammerspoon.org/>Hammerspoon</a> on OSX, you are missing out!<p>It has some great features that you can use to control your desktop, automate tasks, build small UIs and toolbar apps. It can also trigger key presses and modifiers like shift, alt, etc.<p>Here is the script I use to create "hyper" key shortcuts. If you aren't aware, the hyper key is a modifier key that combines the Shift, Control, Alt, and Command/Windows keys simultaneously. Then you can press a regular key and use that for shortcuts.<p>I wrote an article a while back to <a href=/tricks/hammerspoon-number-pad-shortcuts/>"Use Your Numberpad To Control Google Hangouts/Meet"</a> which is pretty handy. It uses a similar trick to play out a combination of keys and trigger actions in Chrome.<p>The script below watches the keyboard for the hyper key + another key. In the script below, I just bind the hyper key + some letter keys to trigger apps to focus.<pre class=language-lua data-lang=lua style=background:#2b303b;color:#c0c5ce><code class=language-lua data-lang=lua><span style=color:#65737e>-- verbose logging
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Hammerspoon hyper key | OhDoyleRules</title><meta content="Hammerspoon hyper key | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Hammerspoon hyper key" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Hammerspoon hyper key" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Hammerspoon to create hyper key shortcuts to automate window focus" name=description><meta content="Use Hammerspoon to create hyper key shortcuts to automate window focus" itemprop=description><meta content="Use Hammerspoon to create hyper key shortcuts to automate window focus" property=og:description><meta content="Use Hammerspoon to create hyper key shortcuts to automate window focus" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Hammerspoon hyper key | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="lua, hammerspoon, hyper, osx, automation" itemprop=keywords><meta content="lua, hammerspoon, hyper, osx, automation" property=article:tag><meta content="lua, hammerspoon, hyper, osx, automation" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Hammerspoon hyper key</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2024</span></span><div itemprop="ArticleBody text" class=main-content><p>If you aren't using <a rel="noopener nofollow noreferrer" href=https://www.hammerspoon.org/ target=_blank>Hammerspoon</a> on OSX, you are missing out!<p>It has some great features that you can use to control your desktop, automate tasks, build small UIs and toolbar apps. It can also trigger key presses and modifiers like shift, alt, etc.<p>Here is the script I use to create "hyper" key shortcuts. If you aren't aware, the hyper key is a modifier key that combines the Shift, Control, Alt, and Command/Windows keys simultaneously. Then you can press a regular key and use that for shortcuts.<p>I wrote an article a while back to <a href=/tricks/hammerspoon-number-pad-shortcuts/>"Use Your Numberpad To Control Google Hangouts/Meet"</a> which is pretty handy. It uses a similar trick to play out a combination of keys and trigger actions in Chrome.<p>The script below watches the keyboard for the hyper key + another key. In the script below, I just bind the hyper key + some letter keys to trigger apps to focus.<pre class=language-lua data-lang=lua style=background:#2b303b;color:#c0c5ce><code class=language-lua data-lang=lua><span style=color:#65737e>-- verbose logging
 </span><span style=color:#65737e>-- hs.logger.setGlobalLogLevel(5)
 </span><span style=color:#b48ead>local </span><span style=color:#bf616a>hyperKeyLogger </span><span>= </span><span style=color:#bf616a>hs</span><span>.logger.</span><span style=color:#bf616a>new</span><span>('</span><span style=color:#a3be8c>hyperkey</span><span>','</span><span style=color:#a3be8c>debug</span><span>')
 </span><span>
diff --git a/docs/tricks/hammerspoon-number-pad-shortcuts/index.html b/docs/tricks/hammerspoon-number-pad-shortcuts/index.html
index 37545e8..9134c78 100644
--- a/docs/tricks/hammerspoon-number-pad-shortcuts/index.html
+++ b/docs/tricks/hammerspoon-number-pad-shortcuts/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Use Your Numberpad To Control Google Hangouts/Meet | OhDoyleRules</title><meta content="Use Your Numberpad To Control Google Hangouts/Meet | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Use Your Numberpad To Control Google Hangouts/Meet" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Use Your Numberpad To Control Google Hangouts/Meet" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet" name=description><meta content="Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet" itemprop=description><meta content="Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet" property=og:description><meta content="Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Use Your Numberpad To Control Google Hangouts/Meet | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="hammerspoon, number, pad, shortcuts, lua, google, hangouts, meet, toggle, mute" itemprop=keywords><meta content="hammerspoon, number, pad, shortcuts, lua, google, hangouts, meet, toggle, mute" property=article:tag><meta content="hammerspoon, number, pad, shortcuts, lua, google, hangouts, meet, toggle, mute" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Use Your Numberpad To Control Google Hangouts/Meet</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 10, 2023</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=the-number-pad>The number pad</h3><p>Number pads can be pretty handy. Not just for accountants or spreadsheet junkies. Did you know that the keys on a number pad register in their own way? If your number pad is setup right, pressing a <code>1</code> on your keyboard number row and pressing <code>1</code> on your number pad, will be different keys. I have a bunch of my number keys on my number pad set to control the window positions on my desktop.<p>I also use the <code>0</code> key and the <code>.</code> key to control Google Hangouts/Meet. Read more to find out how.<h3 id=hammerspoon>Hammerspoon</h3><p>If you aren't using <a href=https://www.hammerspoon.org/>Hammerspoon</a> on OSX, you are missing out! It has some great features! I will write some more articles on using Hammerspoon to control your Apple trackpad and also tricks with "hyper" keys to control your desktop.<p>Back on track. These are all the keys on the number pad that Hammerspoon will treat as "unique":<pre style=background:#2b303b;color:#c0c5ce><code><span>pad., pad*, pad+, pad/, pad-, pad=,
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Use Your Numberpad To Control Google Hangouts/Meet | OhDoyleRules</title><meta content="Use Your Numberpad To Control Google Hangouts/Meet | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Use Your Numberpad To Control Google Hangouts/Meet" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Use Your Numberpad To Control Google Hangouts/Meet" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet" name=description><meta content="Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet" itemprop=description><meta content="Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet" property=og:description><meta content="Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Use Your Numberpad To Control Google Hangouts/Meet | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="hammerspoon, number, pad, shortcuts, lua, google, hangouts, meet, toggle, mute" itemprop=keywords><meta content="hammerspoon, number, pad, shortcuts, lua, google, hangouts, meet, toggle, mute" property=article:tag><meta content="hammerspoon, number, pad, shortcuts, lua, google, hangouts, meet, toggle, mute" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Use Your Numberpad To Control Google Hangouts/Meet</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 10, 2023</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=the-number-pad>The number pad</h3><p>Number pads can be pretty handy. Not just for accountants or spreadsheet junkies. Did you know that the keys on a number pad register in their own way? If your number pad is setup right, pressing a <code>1</code> on your keyboard number row and pressing <code>1</code> on your number pad, will be different keys. I have a bunch of my number keys on my number pad set to control the window positions on my desktop.<p>I also use the <code>0</code> key and the <code>.</code> key to control Google Hangouts/Meet. Read more to find out how.<h3 id=hammerspoon>Hammerspoon</h3><p>If you aren't using <a rel="noopener nofollow noreferrer" href=https://www.hammerspoon.org/ target=_blank>Hammerspoon</a> on OSX, you are missing out! It has some great features! I will write some more articles on using Hammerspoon to control your Apple trackpad and also tricks with "hyper" keys to control your desktop.<p>Back on track. These are all the keys on the number pad that Hammerspoon will treat as "unique":<pre style=background:#2b303b;color:#c0c5ce><code><span>pad., pad*, pad+, pad/, pad-, pad=,
 </span><span>pad0, pad1, pad2,
 </span><span>pad3, pad4, pad5,
 </span><span>pad6, pad7, pad8, pad9,
diff --git a/docs/tricks/index.html b/docs/tricks/index.html
index 2b53958..e8eca9f 100644
--- a/docs/tricks/index.html
+++ b/docs/tricks/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Tricks | OhDoyleRules</title><meta content="Tricks | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Tricks itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Tricks name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The tricks category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The tricks category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The tricks category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The tricks category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Conditional Vue.js Mixins" href=https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/>Conditional Vue.js Mixins</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 25, 2017</span></span><div class=post-intro><p>How to use commonjs modules as vue.js mixins and how to conditionally load mixins on a per-page-basis.<p><a title="Read Conditional Vue.js Mixins" class=read-more href=https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="How To Use Template Strings As Modules" href=https://ohdoylerules.com/tricks/es6-template-strings-as-modules/>How To Use Template Strings As Modules</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 26, 2017</span></span><div class=post-intro><p>How to the new es6 template string literals to make reusable modules for templates/strings or HTML partials<p><a title="Read How To Use Template Strings As Modules" class=read-more href=https://ohdoylerules.com/tricks/es6-template-strings-as-modules/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Handle spaces and no-spaces in MySQL where-like clauses" href=https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/>Handle spaces and no-spaces in MySQL where-like clauses</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 08, 2017</span></span><div class=post-intro><p>Have you ever wanted to write a WHERE LIKE for a query with and without spaces? Well, now you can with this trick!<p><a title="Read Handle spaces and no-spaces in MySQL where-like clauses" class=read-more href=https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="OpenSSL Passwd Without Prompt" href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/>OpenSSL Passwd Without Prompt</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2016</span></span><div class=post-intro><p>How to use the openssl passwd without a confirm prompt<p><a title="Read OpenSSL Passwd Without Prompt" class=read-more href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Migrate AllPasswords To 1Password" href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/>Migrate AllPasswords To 1Password</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2014</span></span><div class=post-intro><p>How to import your allpasswords csv into 1password<p><a title="Read Migrate AllPasswords To 1Password" class=read-more href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Always Connect To Starbucks WiFi" href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/>Always Connect To Starbucks WiFi</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2014</span></span><div class=post-intro><p>How to connect to the Starbucks WiFi every time by using your phone.<p><a title="Read Always Connect To Starbucks WiFi" class=read-more href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Browser Devtools To Improve Your Bug Reports" href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/>Using Browser Devtools To Improve Your Bug Reports</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 09, 2023</span></span><div class=post-intro><p>How to improve your bug reports using the browser dev tools<p><a title="Read Using Browser Devtools To Improve Your Bug Reports" class=read-more href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Fastmod Codemod For Refactoring" href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/>Fastmod Codemod For Refactoring</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2021</span></span><div class=post-intro><p>Fastmod is a command line tool that can help you with large-scale codebase refactors<p><a title="Read Fastmod Codemod For Refactoring" class=read-more href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Disallowed Characters In URI" href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/>Disallowed Characters In URI</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 31, 2015</span></span><div class=post-intro><p>The URI you submitted has disallowed characters<p><a title="Read Disallowed Characters In URI" class=read-more href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="How To Use LC_MONETARY In Laravel" href=https://ohdoylerules.com/tricks/setting-money-locale-laravel/>How To Use LC_MONETARY In Laravel</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2017</span></span><div class=post-intro><p>How to use setlocale with LC_MONETARY in Laravel<p><a title="Read How To Use LC_MONETARY In Laravel" class=read-more href=https://ohdoylerules.com/tricks/setting-money-locale-laravel/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Hammerspoon hyper key" href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/>Hammerspoon hyper key</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2024</span></span><div class=post-intro><p>Use Hammerspoon to create hyper key shortcuts to automate window focus<p><a title="Read Hammerspoon hyper key" class=read-more href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Your Numberpad To Control Google Hangouts/Meet" href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/>Use Your Numberpad To Control Google Hangouts/Meet</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 10, 2023</span></span><div class=post-intro><p>Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet<p><a title="Read Use Your Numberpad To Control Google Hangouts/Meet" class=read-more href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Tricks | OhDoyleRules</title><meta content="Tricks | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Tricks itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Tricks name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The tricks category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The tricks category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The tricks category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The tricks category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Use Your Numberpad To Control Google Hangouts/Meet" href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/>Use Your Numberpad To Control Google Hangouts/Meet</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 10, 2023</span></span><div class=post-intro><p>Using Hammerspoon to create shortcuts on a number pad that can control Google Hangouts/Meet<p><a title="Read Use Your Numberpad To Control Google Hangouts/Meet" class=read-more href=https://ohdoylerules.com/tricks/hammerspoon-number-pad-shortcuts/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="How To Use Template Strings As Modules" href=https://ohdoylerules.com/tricks/es6-template-strings-as-modules/>How To Use Template Strings As Modules</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 26, 2017</span></span><div class=post-intro><p>How to the new es6 template string literals to make reusable modules for templates/strings or HTML partials<p><a title="Read How To Use Template Strings As Modules" class=read-more href=https://ohdoylerules.com/tricks/es6-template-strings-as-modules/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Disallowed Characters In URI" href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/>Disallowed Characters In URI</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 31, 2015</span></span><div class=post-intro><p>The URI you submitted has disallowed characters<p><a title="Read Disallowed Characters In URI" class=read-more href=https://ohdoylerules.com/tricks/disallowed-characters-in-uri/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Handle spaces and no-spaces in MySQL where-like clauses" href=https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/>Handle spaces and no-spaces in MySQL where-like clauses</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 08, 2017</span></span><div class=post-intro><p>Have you ever wanted to write a WHERE LIKE for a query with and without spaces? Well, now you can with this trick!<p><a title="Read Handle spaces and no-spaces in MySQL where-like clauses" class=read-more href=https://ohdoylerules.com/tricks/handle-spaces-and-no-spaces-in-mysql-where-like-clauses/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Always Connect To Starbucks WiFi" href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/>Always Connect To Starbucks WiFi</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2014</span></span><div class=post-intro><p>How to connect to the Starbucks WiFi every time by using your phone.<p><a title="Read Always Connect To Starbucks WiFi" class=read-more href=https://ohdoylerules.com/tricks/always-connect-to-starbucks-wifi/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Fastmod Codemod For Refactoring" href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/>Fastmod Codemod For Refactoring</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2021</span></span><div class=post-intro><p>Fastmod is a command line tool that can help you with large-scale codebase refactors<p><a title="Read Fastmod Codemod For Refactoring" class=read-more href=https://ohdoylerules.com/tricks/fastmod-codemod-for-refactoring/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="OpenSSL Passwd Without Prompt" href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/>OpenSSL Passwd Without Prompt</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2016</span></span><div class=post-intro><p>How to use the openssl passwd without a confirm prompt<p><a title="Read OpenSSL Passwd Without Prompt" class=read-more href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Browser Devtools To Improve Your Bug Reports" href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/>Using Browser Devtools To Improve Your Bug Reports</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 09, 2023</span></span><div class=post-intro><p>How to improve your bug reports using the browser dev tools<p><a title="Read Using Browser Devtools To Improve Your Bug Reports" class=read-more href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Conditional Vue.js Mixins" href=https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/>Conditional Vue.js Mixins</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 25, 2017</span></span><div class=post-intro><p>How to use commonjs modules as vue.js mixins and how to conditionally load mixins on a per-page-basis.<p><a title="Read Conditional Vue.js Mixins" class=read-more href=https://ohdoylerules.com/tricks/conditionall-vuejs-mixins/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="How To Use LC_MONETARY In Laravel" href=https://ohdoylerules.com/tricks/setting-money-locale-laravel/>How To Use LC_MONETARY In Laravel</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 24, 2017</span></span><div class=post-intro><p>How to use setlocale with LC_MONETARY in Laravel<p><a title="Read How To Use LC_MONETARY In Laravel" class=read-more href=https://ohdoylerules.com/tricks/setting-money-locale-laravel/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Hammerspoon hyper key" href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/>Hammerspoon hyper key</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2024</span></span><div class=post-intro><p>Use Hammerspoon to create hyper key shortcuts to automate window focus<p><a title="Read Hammerspoon hyper key" class=read-more href=https://ohdoylerules.com/tricks/hammerspoon-hyper-key/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Migrate AllPasswords To 1Password" href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/>Migrate AllPasswords To 1Password</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2014</span></span><div class=post-intro><p>How to import your allpasswords csv into 1password<p><a title="Read Migrate AllPasswords To 1Password" class=read-more href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/tricks/migrate-allpasswords-to-1password/index.html b/docs/tricks/migrate-allpasswords-to-1password/index.html
index 6b6eac6..8a44d58 100644
--- a/docs/tricks/migrate-allpasswords-to-1password/index.html
+++ b/docs/tricks/migrate-allpasswords-to-1password/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Migrate AllPasswords To 1Password | OhDoyleRules</title><meta content="Migrate AllPasswords To 1Password | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Migrate AllPasswords To 1Password" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Migrate AllPasswords To 1Password" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to import your allpasswords csv into 1password" name=description><meta content="How to import your allpasswords csv into 1password" itemprop=description><meta content="How to import your allpasswords csv into 1password" property=og:description><meta content="How to import your allpasswords csv into 1password" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Migrate AllPasswords To 1Password | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="1password, allpasswords, export, import, csv, format, osx" itemprop=keywords><meta content="1password, allpasswords, export, import, csv, format, osx" property=article:tag><meta content="1password, allpasswords, export, import, csv, format, osx" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Migrate AllPasswords To 1Password</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p><a href="https://itunes.apple.com/ca/app/allpasswords-handy-personal/id588258846?mt=12">AllPasswords</a> is an awesome, free, app for <a href="https://itunes.apple.com/ca/app/allpasswords/id578246311?mt=8">iPhone</a> and <a href="https://itunes.apple.com/ca/app/allpasswords-handy-personal/id588258846?mt=12">OSX</a>. It has a nice, simple interface, there is an awesome password generator, and it has iCloud sync.<p>The problem is, I recently bought an iPhone 6 and updated to iOS 8. It seems that the iCloud sync has busted for AllPasswords, at least on my device. With the advent of the <a href=http://bgr.com/2014/09/17/1password-for-ios-free-download/>1Password app getting a free version</a> I decided it might be time to switch.<p>I have about 130 logins in AllPasswords, so I wasn't about to manually enter in each account. Instead, I had to format the exported CSV from AllPasswords to be able to import into 1Password. Here is how I did it:<h3 id=allpasswords-export-format>AllPasswords Export Format</h3><blockquote><p>Title, Username, Password, URL, Notes</blockquote><p>The above line is the export format for AllPasswords.<p>Now this isn't going to work when you try to import it into 1Password. You will need to do some <em>massaging</em> of the CSV to get it to work properly.<p>Here is an export example:<blockquote><p>ODR PW,super_cool_guy,ilovepuppies5000,http://ohdoylerules.com,"This is a fake entry"</blockquote><p>Here is one that is less ideal, or maybe had some info missing:<blockquote><p>ODR PW,super_cool_guy,ilovepuppies5000,,</blockquote><h3 id=1password-import-expectations>1Password Import Expectations</h3><blockquote><p>"Title","Location (URL)","Username","Password","Notes"</blockquote><p>Now we need to put our CSV in this format. We need to <em>wrap the sections in quotes</em>, and we need to make sure that the <em>empty fields are just empty quotes</em>.<p>Here is how we would arrange those 2 examples from before.<blockquote><p>"ODR PW","http://ohdoylerules.com","super_cool_guy","ilovepuppies5000","This is a fake entry"</blockquote><p>Here is the ugly one, and how to fix it:<blockquote><p>"ODR PW","","super_cool_guy","ilovepuppies5000",""</blockquote><h3 id=finding-issues>Finding Issues</h3><p>When you are trying to import, you will notice that 1Passwords gives no feedback on what is wrong with the CSV, it will just deny the import.<p>The trick is to go through the file and make sure there are <em>5 sets of quotes</em>. That is what helped me.<p>So far I have been very happy with 1Password. It seems like a really solid app. I opted for Dropbox as the sync storage, and I downloaded the Chrome extension that will prompt me for pasting or saving of logins.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Migrate AllPasswords To 1Password | OhDoyleRules</title><meta content="Migrate AllPasswords To 1Password | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Migrate AllPasswords To 1Password" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Migrate AllPasswords To 1Password" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to import your allpasswords csv into 1password" name=description><meta content="How to import your allpasswords csv into 1password" itemprop=description><meta content="How to import your allpasswords csv into 1password" property=og:description><meta content="How to import your allpasswords csv into 1password" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Migrate AllPasswords To 1Password | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="1password, allpasswords, export, import, csv, format, osx" itemprop=keywords><meta content="1password, allpasswords, export, import, csv, format, osx" property=article:tag><meta content="1password, allpasswords, export, import, csv, format, osx" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/migrate-allpasswords-to-1password/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Migrate AllPasswords To 1Password</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 11, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p><a href="https://itunes.apple.com/ca/app/allpasswords-handy-personal/id588258846?mt=12" rel="noopener nofollow noreferrer" target=_blank>AllPasswords</a> is an awesome, free, app for <a href="https://itunes.apple.com/ca/app/allpasswords/id578246311?mt=8" rel="noopener nofollow noreferrer" target=_blank>iPhone</a> and <a href="https://itunes.apple.com/ca/app/allpasswords-handy-personal/id588258846?mt=12" rel="noopener nofollow noreferrer" target=_blank>OSX</a>. It has a nice, simple interface, there is an awesome password generator, and it has iCloud sync.<p>The problem is, I recently bought an iPhone 6 and updated to iOS 8. It seems that the iCloud sync has busted for AllPasswords, at least on my device. With the advent of the <a rel="noopener nofollow noreferrer" href=http://bgr.com/2014/09/17/1password-for-ios-free-download/ target=_blank>1Password app getting a free version</a> I decided it might be time to switch.<p>I have about 130 logins in AllPasswords, so I wasn't about to manually enter in each account. Instead, I had to format the exported CSV from AllPasswords to be able to import into 1Password. Here is how I did it:<h3 id=allpasswords-export-format>AllPasswords Export Format</h3><blockquote><p>Title, Username, Password, URL, Notes</blockquote><p>The above line is the export format for AllPasswords.<p>Now this isn't going to work when you try to import it into 1Password. You will need to do some <em>massaging</em> of the CSV to get it to work properly.<p>Here is an export example:<blockquote><p>ODR PW,super_cool_guy,ilovepuppies5000,http://ohdoylerules.com,"This is a fake entry"</blockquote><p>Here is one that is less ideal, or maybe had some info missing:<blockquote><p>ODR PW,super_cool_guy,ilovepuppies5000,,</blockquote><h3 id=1password-import-expectations>1Password Import Expectations</h3><blockquote><p>"Title","Location (URL)","Username","Password","Notes"</blockquote><p>Now we need to put our CSV in this format. We need to <em>wrap the sections in quotes</em>, and we need to make sure that the <em>empty fields are just empty quotes</em>.<p>Here is how we would arrange those 2 examples from before.<blockquote><p>"ODR PW","http://ohdoylerules.com","super_cool_guy","ilovepuppies5000","This is a fake entry"</blockquote><p>Here is the ugly one, and how to fix it:<blockquote><p>"ODR PW","","super_cool_guy","ilovepuppies5000",""</blockquote><h3 id=finding-issues>Finding Issues</h3><p>When you are trying to import, you will notice that 1Passwords gives no feedback on what is wrong with the CSV, it will just deny the import.<p>The trick is to go through the file and make sure there are <em>5 sets of quotes</em>. That is what helped me.<p>So far I have been very happy with 1Password. It seems like a really solid app. I opted for Dropbox as the sync storage, and I downloaded the Chrome extension that will prompt me for pasting or saving of logins.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/tricks/openssl-passwd-without-prompt/index.html b/docs/tricks/openssl-passwd-without-prompt/index.html
index 8c1260d..7ac5ce5 100644
--- a/docs/tricks/openssl-passwd-without-prompt/index.html
+++ b/docs/tricks/openssl-passwd-without-prompt/index.html
@@ -1,3 +1,3 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>OpenSSL Passwd Without Prompt | OhDoyleRules</title><meta content="OpenSSL Passwd Without Prompt | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="OpenSSL Passwd Without Prompt" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="OpenSSL Passwd Without Prompt" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use the openssl passwd without a confirm prompt" name=description><meta content="How to use the openssl passwd without a confirm prompt" itemprop=description><meta content="How to use the openssl passwd without a confirm prompt" property=og:description><meta content="How to use the openssl passwd without a confirm prompt" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="OpenSSL Passwd Without Prompt | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="openssl, prompt, passwd, password, confirm, stdin, stdout, pipe, auth" itemprop=keywords><meta content="openssl, prompt, passwd, password, confirm, stdin, stdout, pipe, auth" property=article:tag><meta content="openssl, prompt, passwd, password, confirm, stdin, stdout, pipe, auth" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">OpenSSL Passwd Without Prompt</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2016</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you ever wanted to generate a password using the <code>openssl passwd</code> command, but didn't want the prompt?<p>I encountered this problem when I was writing <a href=https://github.com/invokemedia/ansible-basicauth-nginx>an Ansible role for setting up Nginx basic auth</a>. I didn't want the prompt since I had no way for ansible to handle that gracefully. After some Googling, and some <code>man</code> page grepping, I found the answer.<p>You can generate a password without a prompt by piping text into <code>openssl</code> and passing a new flag. For example:<pre style=background:#2b303b;color:#c0c5ce><code><span>echo "password" | openssl passwd -apr1 -stdin
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>OpenSSL Passwd Without Prompt | OhDoyleRules</title><meta content="OpenSSL Passwd Without Prompt | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="OpenSSL Passwd Without Prompt" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="OpenSSL Passwd Without Prompt" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use the openssl passwd without a confirm prompt" name=description><meta content="How to use the openssl passwd without a confirm prompt" itemprop=description><meta content="How to use the openssl passwd without a confirm prompt" property=og:description><meta content="How to use the openssl passwd without a confirm prompt" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="OpenSSL Passwd Without Prompt | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="openssl, prompt, passwd, password, confirm, stdin, stdout, pipe, auth" itemprop=keywords><meta content="openssl, prompt, passwd, password, confirm, stdin, stdout, pipe, auth" property=article:tag><meta content="openssl, prompt, passwd, password, confirm, stdin, stdout, pipe, auth" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/openssl-passwd-without-prompt/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">OpenSSL Passwd Without Prompt</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 22, 2016</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you ever wanted to generate a password using the <code>openssl passwd</code> command, but didn't want the prompt?<p>I encountered this problem when I was writing <a rel="noopener nofollow noreferrer" href=https://github.com/invokemedia/ansible-basicauth-nginx target=_blank>an Ansible role for setting up Nginx basic auth</a>. I didn't want the prompt since I had no way for ansible to handle that gracefully. After some Googling, and some <code>man</code> page grepping, I found the answer.<p>You can generate a password without a prompt by piping text into <code>openssl</code> and passing a new flag. For example:<pre style=background:#2b303b;color:#c0c5ce><code><span>echo "password" | openssl passwd -apr1 -stdin
 </span></code></pre><p>This will echo to <code>stdout</code>. This way you can write a script or something instead of having to use the prompt to type in the password.<p>In my case of generating a basic auth password, I had to append the output to the <code>/etc/nginx/.htpasswd</code> file. That was done using the following command:<pre style=background:#2b303b;color:#c0c5ce><code><span>echo "password" | openssl passwd -apr1 -stdin >> /etc/nginx/.htpasswd
 </span></code></pre><p>There ya go. It's that easy. I have actually used this trick a couple times for generating passwords and piping to <code>pbcopy</code> (the clipboard) on my mac.<p>Pretty useful stuff!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/tricks/using-browser-devtools-to-improve-your-bug-reports/index.html b/docs/tricks/using-browser-devtools-to-improve-your-bug-reports/index.html
index c5e0286..258d104 100644
--- a/docs/tricks/using-browser-devtools-to-improve-your-bug-reports/index.html
+++ b/docs/tricks/using-browser-devtools-to-improve-your-bug-reports/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Browser Devtools To Improve Your Bug Reports | OhDoyleRules</title><meta content="Using Browser Devtools To Improve Your Bug Reports | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Browser Devtools To Improve Your Bug Reports" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Browser Devtools To Improve Your Bug Reports" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to improve your bug reports using the browser dev tools" name=description><meta content="How to improve your bug reports using the browser dev tools" itemprop=description><meta content="How to improve your bug reports using the browser dev tools" property=og:description><meta content="How to improve your bug reports using the browser dev tools" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Browser Devtools To Improve Your Bug Reports | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="browser, devtools, bug, reports, screenshots, har, console, output, chrome, firefox, safari, edge" itemprop=keywords><meta content="browser, devtools, bug, reports, screenshots, har, console, output, chrome, firefox, safari, edge" property=article:tag><meta content="browser, devtools, bug, reports, screenshots, har, console, output, chrome, firefox, safari, edge" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Browser Devtools To Improve Your Bug Reports</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 09, 2023</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=good-bug-reports>Good bug reports</h3><p>Reporting bugs can be very difficult when you are not a developer. How do you make sure the bug can be recreated? How do you avoid the "it works on my machine" rebuttal?<p>Well, we can greatly improve bug reports on web apps by using some simple tools built into the browsers we use every day.<h3 id=easy-screenshots>Easy Screenshots</h3><p>Did you know you can <a href=https://developer.chrome.com/blog/new-in-devtools-62/#node-screenshots>take screenshots of DOM nodes</a> right from the browser?<div class=center><a title="take a node screenshot in devtools" href=/images/1-devtools.png target=_blank> <img alt="take a node screenshot in devtools" src=/images/1-devtools.png> </a></div><p>Handy right? Use this to easy capture a smaller area of the screen and attach that to your bug report. Easy!<h3 id=saving-console-output>Saving "console output"</h3><p>Have you ever seen a blast of red in the console that states an error? You can try to explain what happened and where the error occurs. Or, you can export your console output to a log file and send it along to a developer!<div class=center><a title="save console output to a file" href=/images/2-devtools.png target=_blank> <img alt="save console output to a file" src=/images/2-devtools.png> </a></div><p>The output will look something like the following:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span>(</span><span style=color:#bf616a>index</span><span>):233 Uncaught Error: Oh no! Something happened
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Browser Devtools To Improve Your Bug Reports | OhDoyleRules</title><meta content="Using Browser Devtools To Improve Your Bug Reports | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Browser Devtools To Improve Your Bug Reports" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Browser Devtools To Improve Your Bug Reports" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to improve your bug reports using the browser dev tools" name=description><meta content="How to improve your bug reports using the browser dev tools" itemprop=description><meta content="How to improve your bug reports using the browser dev tools" property=og:description><meta content="How to improve your bug reports using the browser dev tools" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Browser Devtools To Improve Your Bug Reports | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="browser, devtools, bug, reports, screenshots, har, console, output, chrome, firefox, safari, edge" itemprop=keywords><meta content="browser, devtools, bug, reports, screenshots, har, console, output, chrome, firefox, safari, edge" property=article:tag><meta content="browser, devtools, bug, reports, screenshots, har, console, output, chrome, firefox, safari, edge" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/tricks/using-browser-devtools-to-improve-your-bug-reports/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Browser Devtools To Improve Your Bug Reports</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 09, 2023</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=good-bug-reports>Good bug reports</h3><p>Reporting bugs can be very difficult when you are not a developer. How do you make sure the bug can be recreated? How do you avoid the "it works on my machine" rebuttal?<p>Well, we can greatly improve bug reports on web apps by using some simple tools built into the browsers we use every day.<h3 id=easy-screenshots>Easy Screenshots</h3><p>Did you know you can <a rel="noopener nofollow noreferrer" href=https://developer.chrome.com/blog/new-in-devtools-62/#node-screenshots target=_blank>take screenshots of DOM nodes</a> right from the browser?<div class=center><a title="take a node screenshot in devtools" href=/images/1-devtools.png target=_blank> <img alt="take a node screenshot in devtools" src=/images/1-devtools.png> </a></div><p>Handy right? Use this to easy capture a smaller area of the screen and attach that to your bug report. Easy!<h3 id=saving-console-output>Saving "console output"</h3><p>Have you ever seen a blast of red in the console that states an error? You can try to explain what happened and where the error occurs. Or, you can export your console output to a log file and send it along to a developer!<div class=center><a title="save console output to a file" href=/images/2-devtools.png target=_blank> <img alt="save console output to a file" src=/images/2-devtools.png> </a></div><p>The output will look something like the following:<pre class=language-sh data-lang=sh style=background:#2b303b;color:#c0c5ce><code class=language-sh data-lang=sh><span>(</span><span style=color:#bf616a>index</span><span>):233 Uncaught Error: Oh no! Something happened
 </span><span>    </span><span style=color:#bf616a>at</span><span> (index)</span><span style=color:#bf616a>:233:9
 </span><span>(</span><span style=color:#bf616a>anonymous</span><span>) @ (index)</span><span style=color:#bf616a>:233
 </span><span>(</span><span style=color:#bf616a>index</span><span>):265 on localhost - not loading service worker. Query: http://localhost:1313/sw.js 2023-03-09
@@ -164,4 +164,4 @@
 </span><span>    ]
 </span><span>  }
 </span><span>}
-</span></code></pre><p>To read a HAR file that has already been exported, you can just <strong>drag it into the network panel</strong> of your devtools:<div class=center><video autoplay loop muted poster=/images/5-devtools-poster.jpg preload=auto width=100%><source src=/images/5-devtools.mp4 type=video/mp4> <p>Sorry, your browser doesn't support embedded videos, but don't worry, you can <a download href=/images/5-devtools.mp4>download it</a> and watch it with your favourite video player!</p></video></div><p>This will recreate the state of the world when the HAR file was captured.<p>You can also use a tool like the <a href=https://toolbox.googleapps.com/apps/har_analyzer/>Google Admin Toolbox HAR Analyzer</a> to view HAR files on a webpage:<div class=center><a title="save console output to a file" href=/images/4-devtools.png target=_blank> <img alt="save console output to a file" src=/images/4-devtools.png> </a></div><p>If you want to read more about capturing HAR files, just check out <a href=https://www.ibm.com/support/pages/how-generate-har-file-troubleshoot-issues>this great list of steps on the IBM site</a> - of all places.<h3 id=in-summation>In Summation</h3><p>Hopefully these simple tips help improve your bug reports and make it easier for your team members to report them but also recreate them. Happy bug hunting!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>To read a HAR file that has already been exported, you can just <strong>drag it into the network panel</strong> of your devtools:<div class=center><video autoplay loop muted poster=/images/5-devtools-poster.jpg preload=auto width=100%><source src=/images/5-devtools.mp4 type=video/mp4> <p>Sorry, your browser doesn't support embedded videos, but don't worry, you can <a download href=/images/5-devtools.mp4>download it</a> and watch it with your favourite video player!</p></video></div><p>This will recreate the state of the world when the HAR file was captured.<p>You can also use a tool like the <a rel="noopener nofollow noreferrer" href=https://toolbox.googleapps.com/apps/har_analyzer/ target=_blank>Google Admin Toolbox HAR Analyzer</a> to view HAR files on a webpage:<div class=center><a title="save console output to a file" href=/images/4-devtools.png target=_blank> <img alt="save console output to a file" src=/images/4-devtools.png> </a></div><p>If you want to read more about capturing HAR files, just check out <a rel="noopener nofollow noreferrer" href=https://www.ibm.com/support/pages/how-generate-har-file-troubleshoot-issues target=_blank>this great list of steps on the IBM site</a> - of all places.<h3 id=in-summation>In Summation</h3><p>Hopefully these simple tips help improve your bug reports and make it easier for your team members to report them but also recreate them. Happy bug hunting!</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/add-a-counter-for-duplicate-file-uploads/index.html b/docs/web/add-a-counter-for-duplicate-file-uploads/index.html
index fb597e0..3d5822d 100644
--- a/docs/web/add-a-counter-for-duplicate-file-uploads/index.html
+++ b/docs/web/add-a-counter-for-duplicate-file-uploads/index.html
@@ -2,4 +2,4 @@
 </span><span>1-some-file.jpg
 </span><span>2-some-file.jpg
 </span><span>3-some-file.jpg
-</span></code></pre><p>Well, now you can! I have used this little script a couple times to remove any conflicting filenames when uploading files with the same name.<p>I use this in <a href=https://laravel.com>Laravel</a> (with an instance of <code>Symfony\Component\HttpFoundation\File\UploadedFile</code> which extends <a href=http://php.net/SplFileInfo>SplFileInfo</a>) but it can easily be modified for any other framework or system.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/516483af423d4643ac83.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/516483af423d4643ac83.js src=about:blank></iframe><p>If you are OCD, and wanted to all files to start with a number, just remove the if statement for the <code>$client_name</code>, only leaving the string concatenate line, and it will always add a the counter when the file is new.<p>So give it a shot, and if you modify it for some other framework, post the link in the comments.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Well, now you can! I have used this little script a couple times to remove any conflicting filenames when uploading files with the same name.<p>I use this in <a rel="noopener nofollow noreferrer" href=https://laravel.com target=_blank>Laravel</a> (with an instance of <code>Symfony\Component\HttpFoundation\File\UploadedFile</code> which extends <a rel="noopener nofollow noreferrer" href=http://php.net/SplFileInfo target=_blank>SplFileInfo</a>) but it can easily be modified for any other framework or system.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/516483af423d4643ac83.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/516483af423d4643ac83.js src=about:blank></iframe><p>If you are OCD, and wanted to all files to start with a number, just remove the if statement for the <code>$client_name</code>, only leaving the string concatenate line, and it will always add a the counter when the file is new.<p>So give it a shot, and if you modify it for some other framework, post the link in the comments.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/add-getstylesheet-to-jquery/index.html b/docs/web/add-getstylesheet-to-jquery/index.html
index 5135f44..ec70423 100644
--- a/docs/web/add-getstylesheet-to-jquery/index.html
+++ b/docs/web/add-getstylesheet-to-jquery/index.html
@@ -4,4 +4,4 @@
 </span><span>}, </span><span style=color:#b48ead>function </span><span>() {
 </span><span>  </span><span style=color:#ebcb8b>console</span><span>.</span><span style=color:#96b5b4>log</span><span>('</span><span style=color:#a3be8c>an error occurred somewhere</span><span>');
 </span><span>});
-</span></code></pre><p>Well, now you can! I have created an alternative to <code>$.getScript</code> that handles stylesheets. I called it <a href=https://gist.github.com/james2doyle/9456c3e145f8d0afbe25>$.getStylesheet</a> for obvious reasons.<p>It implements the <a href=https://api.jquery.com/jQuery.Deferred/>$.Deferred</a> object, which allows for chaining and pseudo-promises-style code. Just like <code>$.ajax</code>, <code>$.post</code>, and <code>$.get</code>. This also means you would have access to all the other methods on that object too, this means: <code>.then()</code>, <code>.always()</code>, <code>.done()</code>, and <code>.fail()</code>.<p>Here is the little function for <a href=https://gist.github.com/james2doyle/9456c3e145f8d0afbe25>$.getStylesheet</a>. It is just hosted on Github gist, so I can update it if I need to:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/9456c3e145f8d0afbe25.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/9456c3e145f8d0afbe25.js src=about:blank></iframe><p>You can see this is pretty simple. Just add the function after your jQuery script, or somewhere in your main script file.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Well, now you can! I have created an alternative to <code>$.getScript</code> that handles stylesheets. I called it <a rel="noopener nofollow noreferrer" href=https://gist.github.com/james2doyle/9456c3e145f8d0afbe25 target=_blank>$.getStylesheet</a> for obvious reasons.<p>It implements the <a rel="noopener nofollow noreferrer" href=https://api.jquery.com/jQuery.Deferred/ target=_blank>$.Deferred</a> object, which allows for chaining and pseudo-promises-style code. Just like <code>$.ajax</code>, <code>$.post</code>, and <code>$.get</code>. This also means you would have access to all the other methods on that object too, this means: <code>.then()</code>, <code>.always()</code>, <code>.done()</code>, and <code>.fail()</code>.<p>Here is the little function for <a rel="noopener nofollow noreferrer" href=https://gist.github.com/james2doyle/9456c3e145f8d0afbe25 target=_blank>$.getStylesheet</a>. It is just hosted on Github gist, so I can update it if I need to:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/9456c3e145f8d0afbe25.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/9456c3e145f8d0afbe25.js src=about:blank></iframe><p>You can see this is pretty simple. Just add the function after your jQuery script, or somewhere in your main script file.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/angular-through-iframe/index.html b/docs/web/angular-through-iframe/index.html
index a83fdde..b7478ac 100644
--- a/docs/web/angular-through-iframe/index.html
+++ b/docs/web/angular-through-iframe/index.html
@@ -8,4 +8,4 @@
 </span><span>    </span><span style=color:#bf616a>$scope </span><span>= </span><span style=color:#bf616a>dataFromParent</span><span>;
 </span><span>  });
 </span><span>};
-</span></code></pre><p>As you can see, this is incredibly simple and allows for <em>write-only</em> control of an iframe.<p>What I did to integrate with Angular was use that window function inside the iframes controller to call <code>$scope.$apply</code> with the new data.<p>You can <a href=https://james2doyle.github.io/angular-through-iframe>see a live demo</a> of the technique or <a href=https://github.com/james2doyle/angular-through-iframe>visit the demo project on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>As you can see, this is incredibly simple and allows for <em>write-only</em> control of an iframe.<p>What I did to integrate with Angular was use that window function inside the iframes controller to call <code>$scope.$apply</code> with the new data.<p>You can <a rel="noopener nofollow noreferrer" href=https://james2doyle.github.io/angular-through-iframe target=_blank>see a live demo</a> of the technique or <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/angular-through-iframe target=_blank>visit the demo project on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/angularjs-hangout-promises-promises/index.html b/docs/web/angularjs-hangout-promises-promises/index.html
index 6f40762..6a1592a 100644
--- a/docs/web/angularjs-hangout-promises-promises/index.html
+++ b/docs/web/angularjs-hangout-promises-promises/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>AngularJS Hangout - Promises Promises | OhDoyleRules</title><meta content="AngularJS Hangout - Promises Promises | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="AngularJS Hangout - Promises Promises" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="AngularJS Hangout - Promises Promises" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="AngularJS Hangout - Promises Promises" name=description><meta content="AngularJS Hangout - Promises Promises" itemprop=description><meta content="AngularJS Hangout - Promises Promises" property=og:description><meta content="AngularJS Hangout - Promises Promises" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="AngularJS Hangout - Promises Promises | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="angularjs, hangout, promises, google, youtube" itemprop=keywords><meta content="angularjs, hangout, promises, google, youtube" property=article:tag><meta content="angularjs, hangout, promises, google, youtube" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">AngularJS Hangout - Promises Promises</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I somehow managed to find my way into an <a title="AngularJS Promises" href=https://plus.google.com/u/0/events/cljavmi7kpup1fso43k3fkpk2eg>AngularJS hangout</a>.<p>The hangout is about promises and deffereds. On the google plus <a title="Angularjs Promises Event Page" href=https://plus.google.com/u/0/events/cljavmi7kpup1fso43k3fkpk2eg>event page</a>, there are links to all the plunkrs in the video. Here is the direct <a href="https://www.youtube.com/watch?v=XLaYaaq2Miw" title="Angularjs Promises Youtube">youtube link</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>AngularJS Hangout - Promises Promises | OhDoyleRules</title><meta content="AngularJS Hangout - Promises Promises | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="AngularJS Hangout - Promises Promises" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="AngularJS Hangout - Promises Promises" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="AngularJS Hangout - Promises Promises" name=description><meta content="AngularJS Hangout - Promises Promises" itemprop=description><meta content="AngularJS Hangout - Promises Promises" property=og:description><meta content="AngularJS Hangout - Promises Promises" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="AngularJS Hangout - Promises Promises | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="angularjs, hangout, promises, google, youtube" itemprop=keywords><meta content="angularjs, hangout, promises, google, youtube" property=article:tag><meta content="angularjs, hangout, promises, google, youtube" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">AngularJS Hangout - Promises Promises</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I somehow managed to find my way into an <a rel="noopener nofollow noreferrer" title="AngularJS Promises" href=https://plus.google.com/u/0/events/cljavmi7kpup1fso43k3fkpk2eg target=_blank>AngularJS hangout</a>.<p>The hangout is about promises and deffereds. On the google plus <a rel="noopener nofollow noreferrer" title="Angularjs Promises Event Page" href=https://plus.google.com/u/0/events/cljavmi7kpup1fso43k3fkpk2eg target=_blank>event page</a>, there are links to all the plunkrs in the video. Here is the direct <a href="https://www.youtube.com/watch?v=XLaYaaq2Miw" rel="noopener nofollow noreferrer" title="Angularjs Promises Youtube" target=_blank>youtube link</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/build-a-multi-lingual-laravel-site-with-subdomains/index.html b/docs/web/build-a-multi-lingual-laravel-site-with-subdomains/index.html
index 4f759c1..fcb207d 100644
--- a/docs/web/build-a-multi-lingual-laravel-site-with-subdomains/index.html
+++ b/docs/web/build-a-multi-lingual-laravel-site-with-subdomains/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Build A Multi-lingual Laravel Site With Subdomains | OhDoyleRules</title><meta content="Build A Multi-lingual Laravel Site With Subdomains | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Build A Multi-lingual Laravel Site With Subdomains" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Build A Multi-lingual Laravel Site With Subdomains" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help." name=description><meta content="Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help." itemprop=description><meta content="Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help." property=og:description><meta content="Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Build A Multi-lingual Laravel Site With Subdomains | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="laravel, php, locale, subdomain, routing, switch, multisite, multilingual, translation" itemprop=keywords><meta content="laravel, php, locale, subdomain, routing, switch, multisite, multilingual, translation" property=article:tag><meta content="laravel, php, locale, subdomain, routing, switch, multisite, multilingual, translation" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Build A Multi-lingual Laravel Site With Subdomains</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 25, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>OK, so you want to make Laravel a multi-lingual (or just multi-functional) site based off the subdomain? Cool. Must be an interesting project.<p>In order to test this on local development, we are going to use <a href=https://laravel.com/docs/5.8/valet>Valet</a>. Let's say our Laravel project folder is in <code>~/Sites/multisite</code>. We can use that as our base path moving forward. With Valet, we can set up subdomains with <code>valet link</code>.<p>I'm going to pretend that we want to add support for a new subdomain for the French version of our site. I'm also going to assume that your valet TLD is <code>.localhost</code> and your project is called <code>multisite.localhost</code>. The domain we are adding in this case, it will be <code>fr.multisite.localhost</code>.<p>So in order to get that subdomain setup locally, we just go to our site folder and run <code>valet link fr.multisite</code>. This will allow <code>fr.multisite.localhost</code> to route to the same Laravel setup as <code>multisite.localhost</code>. Beauty!<p>Well, first things first. Let's make a helper to grab the subdomain from the request. This will come in handy for a lot of the future logic switching or setting application state on a per-request basis.<p>Let's use a <code>macro</code> to add a new method to the <code>Request</code>:<pre class=language-diff data-lang=diff style=background:#2b303b;color:#c0c5ce><code class=language-diff data-lang=diff><span>--- a/app/Providers/AppServiceProvider.php
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Build A Multi-lingual Laravel Site With Subdomains | OhDoyleRules</title><meta content="Build A Multi-lingual Laravel Site With Subdomains | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Build A Multi-lingual Laravel Site With Subdomains" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Build A Multi-lingual Laravel Site With Subdomains" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help." name=description><meta content="Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help." itemprop=description><meta content="Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help." property=og:description><meta content="Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Build A Multi-lingual Laravel Site With Subdomains | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="laravel, php, locale, subdomain, routing, switch, multisite, multilingual, translation" itemprop=keywords><meta content="laravel, php, locale, subdomain, routing, switch, multisite, multilingual, translation" property=article:tag><meta content="laravel, php, locale, subdomain, routing, switch, multisite, multilingual, translation" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Build A Multi-lingual Laravel Site With Subdomains</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 25, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>OK, so you want to make Laravel a multi-lingual (or just multi-functional) site based off the subdomain? Cool. Must be an interesting project.<p>In order to test this on local development, we are going to use <a rel="noopener nofollow noreferrer" href=https://laravel.com/docs/5.8/valet target=_blank>Valet</a>. Let's say our Laravel project folder is in <code>~/Sites/multisite</code>. We can use that as our base path moving forward. With Valet, we can set up subdomains with <code>valet link</code>.<p>I'm going to pretend that we want to add support for a new subdomain for the French version of our site. I'm also going to assume that your valet TLD is <code>.localhost</code> and your project is called <code>multisite.localhost</code>. The domain we are adding in this case, it will be <code>fr.multisite.localhost</code>.<p>So in order to get that subdomain setup locally, we just go to our site folder and run <code>valet link fr.multisite</code>. This will allow <code>fr.multisite.localhost</code> to route to the same Laravel setup as <code>multisite.localhost</code>. Beauty!<p>Well, first things first. Let's make a helper to grab the subdomain from the request. This will come in handy for a lot of the future logic switching or setting application state on a per-request basis.<p>Let's use a <code>macro</code> to add a new method to the <code>Request</code>:<pre class=language-diff data-lang=diff style=background:#2b303b;color:#c0c5ce><code class=language-diff data-lang=diff><span>--- a/app/Providers/AppServiceProvider.php
 </span><span>+++ b/app/Providers/AppServiceProvider.php
 </span><span>@@ -3,6 +3,7 @@
 </span><span> namespace App\Providers;
diff --git a/docs/web/checkboxes-options/index.html b/docs/web/checkboxes-options/index.html
index c89bd54..246db83 100644
--- a/docs/web/checkboxes-options/index.html
+++ b/docs/web/checkboxes-options/index.html
@@ -1,2 +1,2 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Making Checkboxes in WordPress options pages | OhDoyleRules</title><meta content="Making Checkboxes in WordPress options pages | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Making Checkboxes in WordPress options pages" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/checkboxes-options/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/checkboxes-options/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Making Checkboxes in WordPress options pages" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Making Checkboxes in WordPress options pages" name=description><meta content="Making Checkboxes in WordPress options pages" itemprop=description><meta content="Making Checkboxes in WordPress options pages" property=og:description><meta content="Making Checkboxes in WordPress options pages" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Making Checkboxes in WordPress options pages | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="checkbox, checkboxes, checked, HTML, input, options, PHP, WordPress" itemprop=keywords><meta content="checkbox, checkboxes, checked, HTML, input, options, PHP, WordPress" property=article:tag><meta content="checkbox, checkboxes, checked, HTML, input, options, PHP, WordPress" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/checkboxes-options/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Making Checkboxes in WordPress options pages</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 11, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I am in the process of building my first WordPress plugin. Of course I am wildly researching how to do things. One thing that was particularly hard to find was how to use checkboxes in options pages. Here is the solution I used.<p>WordPress has a function called <a title="WordPress Codex For Checked Function" href=http://codex.wordpress.org/Function_Reference/checked>checked()</a>. This basically returns a true checked attribute if the conditions it is passed are met. Here is how I used it:<pre style=background:#2b303b;color:#c0c5ce><code><span>&LTinput type="checkbox" name="my_options" &LT?php checked( get_option('my_option') == 'on',true); ?> />
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Making Checkboxes in WordPress options pages | OhDoyleRules</title><meta content="Making Checkboxes in WordPress options pages | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Making Checkboxes in WordPress options pages" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/checkboxes-options/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/checkboxes-options/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Making Checkboxes in WordPress options pages" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Making Checkboxes in WordPress options pages" name=description><meta content="Making Checkboxes in WordPress options pages" itemprop=description><meta content="Making Checkboxes in WordPress options pages" property=og:description><meta content="Making Checkboxes in WordPress options pages" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Making Checkboxes in WordPress options pages | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="checkbox, checkboxes, checked, HTML, input, options, PHP, WordPress" itemprop=keywords><meta content="checkbox, checkboxes, checked, HTML, input, options, PHP, WordPress" property=article:tag><meta content="checkbox, checkboxes, checked, HTML, input, options, PHP, WordPress" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/checkboxes-options/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Making Checkboxes in WordPress options pages</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 11, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I am in the process of building my first WordPress plugin. Of course I am wildly researching how to do things. One thing that was particularly hard to find was how to use checkboxes in options pages. Here is the solution I used.<p>WordPress has a function called <a rel="noopener nofollow noreferrer" title="WordPress Codex For Checked Function" href=http://codex.wordpress.org/Function_Reference/checked target=_blank>checked()</a>. This basically returns a true checked attribute if the conditions it is passed are met. Here is how I used it:<pre style=background:#2b303b;color:#c0c5ce><code><span>&LTinput type="checkbox" name="my_options" &LT?php checked( get_option('my_option') == 'on',true); ?> />
 </span></code></pre><p>What I found is that when the option was getting updated it was being stored as 'on'. So this little PHP snippet says: "If the option named 'my_option' is equal to 'on' then add a checked="checked" attribute to this input tag." Anyway, I found it quite hard to get a straight up answer to this problem. Since the reason I made this blog is to share my discoveries; here you go.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/cms-watch-list/index.html b/docs/web/cms-watch-list/index.html
index b1a64cd..67faa16 100644
--- a/docs/web/cms-watch-list/index.html
+++ b/docs/web/cms-watch-list/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>CMS Watch List | OhDoyleRules</title><meta content="CMS Watch List | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="CMS Watch List" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/cms-watch-list/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/cms-watch-list/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="CMS Watch List" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="CMS Watch List" name=description><meta content="CMS Watch List" itemprop=description><meta content="CMS Watch List" property=og:description><meta content="CMS Watch List" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="CMS Watch List | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="cms, watch, list, warpaint, media, article" itemprop=keywords><meta content="cms, watch, list, warpaint, media, article" property=article:tag><meta content="cms, watch, list, warpaint, media, article" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/cms-watch-list/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">CMS Watch List</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a new post on WARPAINT about some of the upcoming CMS platforms you may not have heard of.<p><a title="CMS Watch List" href=http://warpaintmedia.ca/blog/2013/07/cms-watch-list>Here is the article</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>CMS Watch List | OhDoyleRules</title><meta content="CMS Watch List | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="CMS Watch List" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/cms-watch-list/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/cms-watch-list/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="CMS Watch List" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="CMS Watch List" name=description><meta content="CMS Watch List" itemprop=description><meta content="CMS Watch List" property=og:description><meta content="CMS Watch List" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="CMS Watch List | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="cms, watch, list, warpaint, media, article" itemprop=keywords><meta content="cms, watch, list, warpaint, media, article" property=article:tag><meta content="cms, watch, list, warpaint, media, article" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/cms-watch-list/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">CMS Watch List</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I created a new post on WARPAINT about some of the upcoming CMS platforms you may not have heard of.<p><a rel="noopener nofollow noreferrer" title="CMS Watch List" href=http://warpaintmedia.ca/blog/2013/07/cms-watch-list target=_blank>Here is the article</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/create-json-sections-in-shopify/index.html b/docs/web/create-json-sections-in-shopify/index.html
index cd066c5..3de3ab8 100644
--- a/docs/web/create-json-sections-in-shopify/index.html
+++ b/docs/web/create-json-sections-in-shopify/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Create JSON Sections In Shopify | OhDoyleRules</title><meta content="Create JSON Sections In Shopify | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Create JSON Sections In Shopify" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/create-json-sections-in-shopify/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/create-json-sections-in-shopify/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Create JSON Sections In Shopify" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A demo on how to create a section in Shopify that returns JSON and HTML" name=description><meta content="A demo on how to create a section in Shopify that returns JSON and HTML" itemprop=description><meta content="A demo on how to create a section in Shopify that returns JSON and HTML" property=og:description><meta content="A demo on how to create a section in Shopify that returns JSON and HTML" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Create JSON Sections In Shopify | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="shopify, theme, editor, builder, section, JSON, render, liquid" itemprop=keywords><meta content="shopify, theme, editor, builder, section, JSON, render, liquid" property=article:tag><meta content="shopify, theme, editor, builder, section, JSON, render, liquid" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/create-json-sections-in-shopify/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Create JSON Sections In Shopify</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 05, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>If you're like me, you're probably constantly running into issues with the flexibility of Shopify themes. There are a lot of issues that come up when trying to squeeze in features and functionality that are "shop-adjacent". Shopify does a good job at running a store but it can be difficult to reach beyond that and make some more interactive experiences.<p>Recently, I wanted to share the content from one section on one page to another section on another page. This isn't really possible using liquid because you can't pass variables to sections. So even including them both on the same page wouldn't work. You also can't include sections in other sections. So that also won't work.<p>So how can you pass data between sections? Well, I managed to get this done by using the <a href=https://help.shopify.com/en/themes/development/sections/section-rendering-api>Section Rendering API</a>. Now, this is not something in liquid, but it can be used as a JS API. Specifically, you can render a section in isolation and without the surrounding page content.<p>Now, since you can call this API in JS, how would you use this content? You can just go ahead and use it as HTML, but I wanted to use it as JSON. How do we do that? How can we make sure the section works normally when rendered on a page but returns "JSON" when rendered through the section API?<p>Well, this is possible by taking advantage of the "page state" when being called via the API.<p>Here is an example of the if statement required:<pre class=language-jinja2 data-lang=jinja2 style=background:#2b303b;color:#c0c5ce><code class=language-jinja2 data-lang=jinja2><span>{% </span><span style=color:#b48ead>comment </span><span>%}https://help.shopify.com/en/themes/development/sections/section-rendering-api{% </span><span style=color:#b48ead>endcomment </span><span>%}
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Create JSON Sections In Shopify | OhDoyleRules</title><meta content="Create JSON Sections In Shopify | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Create JSON Sections In Shopify" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/create-json-sections-in-shopify/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/create-json-sections-in-shopify/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Create JSON Sections In Shopify" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A demo on how to create a section in Shopify that returns JSON and HTML" name=description><meta content="A demo on how to create a section in Shopify that returns JSON and HTML" itemprop=description><meta content="A demo on how to create a section in Shopify that returns JSON and HTML" property=og:description><meta content="A demo on how to create a section in Shopify that returns JSON and HTML" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Create JSON Sections In Shopify | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="shopify, theme, editor, builder, section, JSON, render, liquid" itemprop=keywords><meta content="shopify, theme, editor, builder, section, JSON, render, liquid" property=article:tag><meta content="shopify, theme, editor, builder, section, JSON, render, liquid" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/create-json-sections-in-shopify/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Create JSON Sections In Shopify</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 05, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>If you're like me, you're probably constantly running into issues with the flexibility of Shopify themes. There are a lot of issues that come up when trying to squeeze in features and functionality that are "shop-adjacent". Shopify does a good job at running a store but it can be difficult to reach beyond that and make some more interactive experiences.<p>Recently, I wanted to share the content from one section on one page to another section on another page. This isn't really possible using liquid because you can't pass variables to sections. So even including them both on the same page wouldn't work. You also can't include sections in other sections. So that also won't work.<p>So how can you pass data between sections? Well, I managed to get this done by using the <a rel="noopener nofollow noreferrer" href=https://help.shopify.com/en/themes/development/sections/section-rendering-api target=_blank>Section Rendering API</a>. Now, this is not something in liquid, but it can be used as a JS API. Specifically, you can render a section in isolation and without the surrounding page content.<p>Now, since you can call this API in JS, how would you use this content? You can just go ahead and use it as HTML, but I wanted to use it as JSON. How do we do that? How can we make sure the section works normally when rendered on a page but returns "JSON" when rendered through the section API?<p>Well, this is possible by taking advantage of the "page state" when being called via the API.<p>Here is an example of the if statement required:<pre class=language-jinja2 data-lang=jinja2 style=background:#2b303b;color:#c0c5ce><code class=language-jinja2 data-lang=jinja2><span>{% </span><span style=color:#b48ead>comment </span><span>%}https://help.shopify.com/en/themes/development/sections/section-rendering-api{% </span><span style=color:#b48ead>endcomment </span><span>%}
 </span><span>{% </span><span style=color:#b48ead>comment </span><span>%}request.page_type will be "index" when using the section rendering API{% </span><span style=color:#b48ead>endcomment </span><span>%}
 </span><span>{% </span><span style=color:#b48ead>comment </span><span>%}content_for_header will contain the query string in the request{% </span><span style=color:#b48ead>endcomment </span><span>%}
 </span><span>{%- </span><span style=color:#b48ead>if </span><span style=color:#bf616a>request</span><span>.</span><span style=color:#bf616a>page_type </span><span>== '</span><span style=color:#a3be8c>index</span><span>' </span><span style=color:#b48ead>and </span><span style=color:#bf616a>content_for_header contains </span><span>'</span><span style=color:#a3be8c>section_id</span><span>' -%}
@@ -20,7 +20,7 @@
 </span><span>  "second-block-title": {"title": "Second Block Title", "subtitle": "This is my second subtitle"}
 </span><span>}
 </span><span>&LT/</span><span style=color:#bf616a>div</span><span>>
-</span></code></pre><p>As you can tell, you can't just <code>JSON.parse</code> this. It has text inside that will bust up our JSON parser. How can we confidently parse the content inside the <code>div</code> and get that sweet schema in the center?<p>Let me introduce the <a href=https://developer.mozilla.org/en-US/docs/Web/API/DOMParser>DOMParser API</a>. This is a <a href="https://caniuse.com/#feat=xml-serializer">well-supported</a> API that will allow you to parse different types of structured documents.<p>In this case we are going to treat this content as <code>text/html</code> (which it is) and then use other DOM APIs to extract the JSON from the wrapper <code>div</code> surrounding it.<p>Here is the little function I came up with to fetch the rendered section, parse the content as HTML, extract the JSON inside, and return the object it contains.<p>See below:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#65737e>/**
+</span></code></pre><p>As you can tell, you can't just <code>JSON.parse</code> this. It has text inside that will bust up our JSON parser. How can we confidently parse the content inside the <code>div</code> and get that sweet schema in the center?<p>Let me introduce the <a rel="noopener nofollow noreferrer" href=https://developer.mozilla.org/en-US/docs/Web/API/DOMParser target=_blank>DOMParser API</a>. This is a <a href="https://caniuse.com/#feat=xml-serializer" rel="noopener nofollow noreferrer" target=_blank>well-supported</a> API that will allow you to parse different types of structured documents.<p>In this case we are going to treat this content as <code>text/html</code> (which it is) and then use other DOM APIs to extract the JSON from the wrapper <code>div</code> surrounding it.<p>Here is the little function I came up with to fetch the rendered section, parse the content as HTML, extract the JSON inside, and return the object it contains.<p>See below:<pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#65737e>/**
 </span><span style=color:#65737e> * Get section from the rendering API
 </span><span style=color:#65737e> * </span><span style=color:#b48ead>@see </span><span style=color:#bf616a>https://help.shopify.com/en/themes/development/sections/section-rendering-api
 </span><span style=color:#65737e> *
@@ -56,4 +56,4 @@
 </span><span>.</span><span style=color:#96b5b4>then</span><span>((</span><span style=color:#bf616a>data</span><span>) </span><span style=color:#b48ead>=> </span><span>{
 </span><span>  </span><span style=color:#65737e>// do stuff with the object...
 </span><span>});
-</span></code></pre><p>That is how you use this function. Just pass in the filename of the section template (without the <code>.liquid</code> on the end) and you will get JSON back! The best part about this is that it still works with the normal HTML. So you can use this in both cases without any issues. This whole setup allows website admins to visually design JSON output for your more complex features.<p><em>Side Note</em><p>Shopify likes to change things up every once in a while. They recently <a href=https://developers.shopify.com/changelog/deprecating-the-include-liquid-tag-and-introducing-the-render-tag>deprecated the <code>include</code> tag in favour of a new <code>render</code> tag</a>. So there is no promise this will work forever.<p><em>You have been warned!</em></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>That is how you use this function. Just pass in the filename of the section template (without the <code>.liquid</code> on the end) and you will get JSON back! The best part about this is that it still works with the normal HTML. So you can use this in both cases without any issues. This whole setup allows website admins to visually design JSON output for your more complex features.<p><em>Side Note</em><p>Shopify likes to change things up every once in a while. They recently <a rel="noopener nofollow noreferrer" href=https://developers.shopify.com/changelog/deprecating-the-include-liquid-tag-and-introducing-the-render-tag target=_blank>deprecated the <code>include</code> tag in favour of a new <code>render</code> tag</a>. So there is no promise this will work forever.<p><em>You have been warned!</em></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/css3-badge-logo-in-svg/index.html b/docs/web/css3-badge-logo-in-svg/index.html
index 0ce3946..cbf5ac3 100644
--- a/docs/web/css3-badge-logo-in-svg/index.html
+++ b/docs/web/css3-badge-logo-in-svg/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>CSS3 badge logo in SVG | OhDoyleRules</title><meta content="CSS3 badge logo in SVG | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="CSS3 badge logo in SVG" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/css3-badge-logo-in-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/css3-badge-logo-in-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="CSS3 badge logo in SVG" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="CSS3 badge logo in SVG" name=description><meta content="CSS3 badge logo in SVG" itemprop=description><meta content="CSS3 badge logo in SVG" property=og:description><meta content="CSS3 badge logo in SVG" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="CSS3 badge logo in SVG | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="badge, css3, html5, logo, svg, vector" itemprop=keywords><meta content="badge, css3, html5, logo, svg, vector" property=article:tag><meta content="badge, css3, html5, logo, svg, vector" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">CSS3 badge logo in SVG</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I have been trying to find the CSS3 badge in a SVG format but it wasn’t that easy. The HTML5 one was the first result on Google. Now finally I found one. I am posting it here because now I will never lose it!<div class=center><img alt="HTML5 and CSS3 badges" src=/images/html5css3badges.png></div><p>Here is the CSS3 logo:<div class=center><a title="Download CSS3.svg" href=/images/css3.svg target=_blank><img alt="CSS3 Scalable vector graphic" src=/images/css3.svg></a></div><p>Here is the HTML5 logo in-case you need it:<div class=center><a title="Download HTML5.svg" href=/images/html5.svg target=_blank><img alt="HTML5 Scalable vector graphic" src=/images/html5.svg></a></div><h3 id=references>References</h3><p>I found the logos on <a title="bobby berberyan - html-5-css-3-logos" href=http://www.bobbyberberyan.com/2012/03/html-5-css-3-logos/>this website</a>. They were in one single SVG file and I split them up.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>CSS3 badge logo in SVG | OhDoyleRules</title><meta content="CSS3 badge logo in SVG | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="CSS3 badge logo in SVG" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/css3-badge-logo-in-svg/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/css3-badge-logo-in-svg/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="CSS3 badge logo in SVG" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="CSS3 badge logo in SVG" name=description><meta content="CSS3 badge logo in SVG" itemprop=description><meta content="CSS3 badge logo in SVG" property=og:description><meta content="CSS3 badge logo in SVG" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="CSS3 badge logo in SVG | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="badge, css3, html5, logo, svg, vector" itemprop=keywords><meta content="badge, css3, html5, logo, svg, vector" property=article:tag><meta content="badge, css3, html5, logo, svg, vector" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">CSS3 badge logo in SVG</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I have been trying to find the CSS3 badge in a SVG format but it wasn’t that easy. The HTML5 one was the first result on Google. Now finally I found one. I am posting it here because now I will never lose it!<div class=center><img alt="HTML5 and CSS3 badges" src=/images/html5css3badges.png></div><p>Here is the CSS3 logo:<div class=center><a title="Download CSS3.svg" href=/images/css3.svg target=_blank><img alt="CSS3 Scalable vector graphic" src=/images/css3.svg></a></div><p>Here is the HTML5 logo in-case you need it:<div class=center><a title="Download HTML5.svg" href=/images/html5.svg target=_blank><img alt="HTML5 Scalable vector graphic" src=/images/html5.svg></a></div><h3 id=references>References</h3><p>I found the logos on <a rel="noopener nofollow noreferrer" title="bobby berberyan - html-5-css-3-logos" href=http://www.bobbyberberyan.com/2012/03/html-5-css-3-logos/ target=_blank>this website</a>. They were in one single SVG file and I split them up.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/custom-google-forms/index.html b/docs/web/custom-google-forms/index.html
index d3ffaed..f17ab17 100644
--- a/docs/web/custom-google-forms/index.html
+++ b/docs/web/custom-google-forms/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Custom Google Forms | OhDoyleRules</title><meta content="Custom Google Forms | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Custom Google Forms" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/custom-google-forms/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/custom-google-forms/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Custom Google Forms" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something" name=description><meta content="I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something" itemprop=description><meta content="I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something" property=og:description><meta content="I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Custom Google Forms | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content=2014-09-20 itemprop=dateModified><meta content="CSS, custom, drive, forms, Github, google, less, node, open source, preprocessors" itemprop=keywords><meta content="CSS, custom, drive, forms, Github, google, less, node, open source, preprocessors" property=article:tag><meta content="CSS, custom, drive, forms, Github, google, less, node, open source, preprocessors" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/custom-google-forms/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Custom Google Forms</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 22, 2013</span></span>  <span class=post-date>🕙  <span>Updated: September 20, 2014</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img align=middle alt src=/images/googleforms.png></div><p><strong>Update: Google has added the tools to customize a form with logos, colours, fonts, and backgrounds. Use this guide if you want even more custom styles, or if you want to embed the form within another page.</strong><p>I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something. After a bit of research I have found a way to create custom forms rather easily.<h3 id=how-to-create-a-custom-form>How to create a custom form</h3><p>This is just the normal way to make a new google form. If you have made one before then just skip this.<ul><li>Create a form as normal<li>Click the view live form<li>Copy everything inside the form tag including the form tag itself<li>Create a new blank HTML file<li>Create an empty div with a container class<li>Paste all the form markup inside there<li>Link the style.css stylsheet<li>Test the form and check the response in Google drive</ul><h3 id=hosting-the-form>Hosting the form</h3><p><strong>Edit: This feature is <a href="https://support.google.com/drive/answer/2881970?hl=en">no longer avaliable</a> to the new google drive.</strong><p>Something relatively new to Google drive is the ability to host static HTML pages.<ul><li>Create a public shared folder<li>Upload all your static html files<li>Open the index.html file in drive and click the preview button<li>Copy the link to the page it sends you too<li>Share that link with whoever because you are done!<li>This is how the <a title="Hosted Demo of custom Google Form" href=https://googledrive.com/host/0B3SHb_huRFdyNENfQjVzSGpIOFU/index.html>demo form</a> is hosted.</ul><p>As a starting point I basically just copied the stylesheet from the default Google form page. Then I took all the colors and placed them into variables. The stylesheet needs to be stripped of things not necessary.<h3 id=moving-forward>Moving Forward</h3><p>I do not want to add any extra markup to the pages. The idea hear is to just copy the form mark that Google gives you and then just add a stylesheet that will make it themed.<p><strong>Think themes for bootstrap. Markup stays, stylesheets change.</strong><p>But right now I am just going to try and normalize the current stylsheet into something as default as possible so that I can then create a my-theme-name.css file that contains all the variables to do the styling. I am currently only using the variables in LESS but eventually I will use more of the feaures to get everything nice and themeable.<p>You can check out the <a title="Hosted Demo of custom Google Form" href=https://googledrive.com/host/0B3SHb_huRFdyNENfQjVzSGpIOFU/index.html>Demo form in action</a> or just jump right to the <a href=https://github.com/james2doyle/google-form-styling title=james2doyle/google-form-styling>Github Repo</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Custom Google Forms | OhDoyleRules</title><meta content="Custom Google Forms | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Custom Google Forms" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/custom-google-forms/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/custom-google-forms/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Custom Google Forms" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something" name=description><meta content="I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something" itemprop=description><meta content="I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something" property=og:description><meta content="I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Custom Google Forms | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content=2014-09-20 itemprop=dateModified><meta content="CSS, custom, drive, forms, Github, google, less, node, open source, preprocessors" itemprop=keywords><meta content="CSS, custom, drive, forms, Github, google, less, node, open source, preprocessors" property=article:tag><meta content="CSS, custom, drive, forms, Github, google, less, node, open source, preprocessors" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/custom-google-forms/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Custom Google Forms</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 22, 2013</span></span>  <span class=post-date>🕙  <span>Updated: September 20, 2014</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img align=middle alt src=/images/googleforms.png></div><p><strong>Update: Google has added the tools to customize a form with logos, colours, fonts, and backgrounds. Use this guide if you want even more custom styles, or if you want to embed the form within another page.</strong><p>I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something. After a bit of research I have found a way to create custom forms rather easily.<h3 id=how-to-create-a-custom-form>How to create a custom form</h3><p>This is just the normal way to make a new google form. If you have made one before then just skip this.<ul><li>Create a form as normal<li>Click the view live form<li>Copy everything inside the form tag including the form tag itself<li>Create a new blank HTML file<li>Create an empty div with a container class<li>Paste all the form markup inside there<li>Link the style.css stylsheet<li>Test the form and check the response in Google drive</ul><h3 id=hosting-the-form>Hosting the form</h3><p><strong>Edit: This feature is <a href="https://support.google.com/drive/answer/2881970?hl=en" rel="noopener nofollow noreferrer" target=_blank>no longer avaliable</a> to the new google drive.</strong><p>Something relatively new to Google drive is the ability to host static HTML pages.<ul><li>Create a public shared folder<li>Upload all your static html files<li>Open the index.html file in drive and click the preview button<li>Copy the link to the page it sends you too<li>Share that link with whoever because you are done!<li>This is how the <a rel="noopener nofollow noreferrer" title="Hosted Demo of custom Google Form" href=https://googledrive.com/host/0B3SHb_huRFdyNENfQjVzSGpIOFU/index.html target=_blank>demo form</a> is hosted.</ul><p>As a starting point I basically just copied the stylesheet from the default Google form page. Then I took all the colors and placed them into variables. The stylesheet needs to be stripped of things not necessary.<h3 id=moving-forward>Moving Forward</h3><p>I do not want to add any extra markup to the pages. The idea hear is to just copy the form mark that Google gives you and then just add a stylesheet that will make it themed.<p><strong>Think themes for bootstrap. Markup stays, stylesheets change.</strong><p>But right now I am just going to try and normalize the current stylsheet into something as default as possible so that I can then create a my-theme-name.css file that contains all the variables to do the styling. I am currently only using the variables in LESS but eventually I will use more of the feaures to get everything nice and themeable.<p>You can check out the <a rel="noopener nofollow noreferrer" title="Hosted Demo of custom Google Form" href=https://googledrive.com/host/0B3SHb_huRFdyNENfQjVzSGpIOFU/index.html target=_blank>Demo form in action</a> or just jump right to the <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/google-form-styling target=_blank title=james2doyle/google-form-styling>Github Repo</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/detect-theme-editor-in-shopify-liquid-templates/index.html b/docs/web/detect-theme-editor-in-shopify-liquid-templates/index.html
index a80a985..a4d35df 100644
--- a/docs/web/detect-theme-editor-in-shopify-liquid-templates/index.html
+++ b/docs/web/detect-theme-editor-in-shopify-liquid-templates/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Detect Theme Editor In Shopify Liquid Templates | OhDoyleRules</title><meta content="Detect Theme Editor In Shopify Liquid Templates | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Detect Theme Editor In Shopify Liquid Templates" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Detect Theme Editor In Shopify Liquid Templates" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A demo on how to detect when a template is running in the Shopify theme and section builder" name=description><meta content="A demo on how to detect when a template is running in the Shopify theme and section builder" itemprop=description><meta content="A demo on how to detect when a template is running in the Shopify theme and section builder" property=og:description><meta content="A demo on how to detect when a template is running in the Shopify theme and section builder" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Detect Theme Editor In Shopify Liquid Templates | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="shopify, theme, editor, builder, section, detect, liquid" itemprop=keywords><meta content="shopify, theme, editor, builder, section, detect, liquid" property=article:tag><meta content="shopify, theme, editor, builder, section, detect, liquid" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Detect Theme Editor In Shopify Liquid Templates</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 04, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>So you may already know that you cannot detect if an liquid page is running in the theme editor. You can however, <a href=https://help.shopify.com/en/themes/development/theme-editor/other-theme-files#detecting-the-theme-editor-with-javascript>detect this in Javascript</a>.<p>But what if you want conditional content? What if you want to use this "switch" in a liquid template?<p>There are a couple good reasons to do this. The first one being that sometimes you need to show the content the website admin is editing in a different way.<p>I needed this feature when I had a repeating section of blocks that only showed when certain filters where applied to a form. This made it really hard to edit the content. You couldn't see all the blocks at once while you were editing. I wanted to just show all the blocks, with no filtering applied, but only when the theme editor was being used to create and edit blocks.<p>Shopify says you can't do this though. I'm here to tell you they are incorrect.<p>Before I continue, you will need to understand <a href=http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify>this hack used to detect query strings in liquid</a>. Once read up on that snippet, you'll see how we build on that to detect the theme editor.<pre class=language-jinja2 data-lang=jinja2 style=background:#2b303b;color:#c0c5ce><code class=language-jinja2 data-lang=jinja2><span>{%- </span><span style=color:#b48ead>comment </span><span>-%}
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Detect Theme Editor In Shopify Liquid Templates | OhDoyleRules</title><meta content="Detect Theme Editor In Shopify Liquid Templates | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Detect Theme Editor In Shopify Liquid Templates" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Detect Theme Editor In Shopify Liquid Templates" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A demo on how to detect when a template is running in the Shopify theme and section builder" name=description><meta content="A demo on how to detect when a template is running in the Shopify theme and section builder" itemprop=description><meta content="A demo on how to detect when a template is running in the Shopify theme and section builder" property=og:description><meta content="A demo on how to detect when a template is running in the Shopify theme and section builder" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Detect Theme Editor In Shopify Liquid Templates | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="shopify, theme, editor, builder, section, detect, liquid" itemprop=keywords><meta content="shopify, theme, editor, builder, section, detect, liquid" property=article:tag><meta content="shopify, theme, editor, builder, section, detect, liquid" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Detect Theme Editor In Shopify Liquid Templates</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 04, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>So you may already know that you cannot detect if an liquid page is running in the theme editor. You can however, <a rel="noopener nofollow noreferrer" href=https://help.shopify.com/en/themes/development/theme-editor/other-theme-files#detecting-the-theme-editor-with-javascript target=_blank>detect this in Javascript</a>.<p>But what if you want conditional content? What if you want to use this "switch" in a liquid template?<p>There are a couple good reasons to do this. The first one being that sometimes you need to show the content the website admin is editing in a different way.<p>I needed this feature when I had a repeating section of blocks that only showed when certain filters where applied to a form. This made it really hard to edit the content. You couldn't see all the blocks at once while you were editing. I wanted to just show all the blocks, with no filtering applied, but only when the theme editor was being used to create and edit blocks.<p>Shopify says you can't do this though. I'm here to tell you they are incorrect.<p>Before I continue, you will need to understand <a rel="noopener nofollow noreferrer" href=http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify target=_blank>this hack used to detect query strings in liquid</a>. Once read up on that snippet, you'll see how we build on that to detect the theme editor.<pre class=language-jinja2 data-lang=jinja2 style=background:#2b303b;color:#c0c5ce><code class=language-jinja2 data-lang=jinja2><span>{%- </span><span style=color:#b48ead>comment </span><span>-%}
 </span><span>  http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify
 </span><span>  Capture the content for header containing the tracking data
 </span><span>{%- </span><span style=color:#b48ead>endcomment </span><span>-%}
@@ -15,10 +15,10 @@
 </span><span>  | </span><span style=color:#bf616a>replace</span><span>:'</span><span style=color:#96b5b4>\u0026</span><span>','</span><span style=color:#a3be8c>&</span><span>'
 </span><span>  | </span><span style=color:#bf616a>strip
 </span><span>-%}
-</span></code></pre><p>The code above is a snippet of the <a href=http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify>trick used to detect query strings in liquid</a>. We only need this piece. So let's continue.<pre class=language-jinja2 data-lang=jinja2 style=background:#2b303b;color:#c0c5ce><code class=language-jinja2 data-lang=jinja2><span>{% </span><span style=color:#b48ead>comment </span><span>%}When in the theme editor, the pageUrl variable is malformed/empty{% </span><span style=color:#b48ead>endcomment </span><span>%}
+</span></code></pre><p>The code above is a snippet of the <a rel="noopener nofollow noreferrer" href=http://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify target=_blank>trick used to detect query strings in liquid</a>. We only need this piece. So let's continue.<pre class=language-jinja2 data-lang=jinja2 style=background:#2b303b;color:#c0c5ce><code class=language-jinja2 data-lang=jinja2><span>{% </span><span style=color:#b48ead>comment </span><span>%}When in the theme editor, the pageUrl variable is malformed/empty{% </span><span style=color:#b48ead>endcomment </span><span>%}
 </span><span>{% </span><span style=color:#b48ead>if </span><span style=color:#bf616a>pageUrl contains page</span><span>.</span><span style=color:#bf616a>handle </span><span>%}
 </span><span>  We are in the frontend of the website
 </span><span>{% </span><span style=color:#b48ead>else </span><span>%}
 </span><span>  We are in the theme editor of the website
 </span><span>{% </span><span style=color:#b48ead>endif </span><span>%}
-</span></code></pre><p>That's all we need now. I'll explain what is going on.<p>Basically, when the liquid template is being accessed in the theme editor, the <code>pageUrl</code> variable will not properly formed. Since that is the case, we just compare that value with the value that is in <code>page.handle</code>.<p>When the template is being loaded properly on the frontend of the site, the <code>pageUrl</code> will be equal to the <code>page.handle</code> value.<p>In summation, we can now detect if the theme is running in the section editor! Yay!<p><em>Side Note</em><p>Shopify likes to change things up every once in a while. They recently <a href=https://developers.shopify.com/changelog/deprecating-the-include-liquid-tag-and-introducing-the-render-tag>deprecated the <code>include</code> tag in favour of a new <code>render</code> tag</a>. So there is no promise this will work forever.<p><em>You have been warned!</em></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>That's all we need now. I'll explain what is going on.<p>Basically, when the liquid template is being accessed in the theme editor, the <code>pageUrl</code> variable will not properly formed. Since that is the case, we just compare that value with the value that is in <code>page.handle</code>.<p>When the template is being loaded properly on the frontend of the site, the <code>pageUrl</code> will be equal to the <code>page.handle</code> value.<p>In summation, we can now detect if the theme is running in the section editor! Yay!<p><em>Side Note</em><p>Shopify likes to change things up every once in a while. They recently <a rel="noopener nofollow noreferrer" href=https://developers.shopify.com/changelog/deprecating-the-include-liquid-tag-and-introducing-the-render-tag target=_blank>deprecated the <code>include</code> tag in favour of a new <code>render</code> tag</a>. So there is no promise this will work forever.<p><em>You have been warned!</em></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/flexible-svg-placeholders/index.html b/docs/web/flexible-svg-placeholders/index.html
index a4b4114..70fab00 100644
--- a/docs/web/flexible-svg-placeholders/index.html
+++ b/docs/web/flexible-svg-placeholders/index.html
@@ -1,2 +1,2 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Flexible SVG Placeholder Images | OhDoyleRules</title><meta content="Flexible SVG Placeholder Images | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Flexible SVG Placeholder Images" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/flexible-svg-placeholders/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/flexible-svg-placeholders/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Flexible SVG Placeholder Images" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Replace a service like placehold.it with your own local version that serves SVG images" name=description><meta content="Replace a service like placehold.it with your own local version that serves SVG images" itemprop=description><meta content="Replace a service like placehold.it with your own local version that serves SVG images" property=og:description><meta content="Replace a service like placehold.it with your own local version that serves SVG images" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Flexible SVG Placeholder Images | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, svg, image, placeholder, placehold.it, vector, center, text, server, placekitten" itemprop=keywords><meta content="php, svg, image, placeholder, placehold.it, vector, center, text, server, placekitten" property=article:tag><meta content="php, svg, image, placeholder, placehold.it, vector, center, text, server, placekitten" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/flexible-svg-placeholders/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Flexible SVG Placeholder Images</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 24, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Do you use <a title="Placehold.it Homepage" href=http://placehold.it>placehold.it</a>? It is a great service. The only thing is when you are offline, or you are testing a page that needs a lot of placeholders, it may not be the greatest solution.<p><strong>Enter the SVG placeholder.</strong><p>Here are the properties you can set:<ul><li>width and height<li>background-fill<li>font-color<li>font-family<li>font-size</ul><p>Here is the actual SVG file. As you can see it is a PHP file, but you are serving it as an SVG (see the <code>Content-Type</code> part?). Here we grab the URL arguments and assign them to the SVG.</p><iframe id="https://gist.github.com/3aad1d22163c3c3e5cfd.js?file=placeholder-svg.php" srcdoc="`<script src='https://gist.github.com/3aad1d22163c3c3e5cfd.js?file=placeholder-svg.php'></script>`" class=iframes src=about:blank></iframe><p>If you saved the file as <code>placeholder-svg.php</code> then it would be used like so:<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span><</span><span style=color:#bf616a>img </span><span style=color:#d08770>src</span><span>="</span><span style=color:#a3be8c>placeholder-svg.php?wh=400x400&fill=bada55&color=000000&font=Georgia&size=20</span><span>" />
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Flexible SVG Placeholder Images | OhDoyleRules</title><meta content="Flexible SVG Placeholder Images | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Flexible SVG Placeholder Images" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/flexible-svg-placeholders/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/flexible-svg-placeholders/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Flexible SVG Placeholder Images" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Replace a service like placehold.it with your own local version that serves SVG images" name=description><meta content="Replace a service like placehold.it with your own local version that serves SVG images" itemprop=description><meta content="Replace a service like placehold.it with your own local version that serves SVG images" property=og:description><meta content="Replace a service like placehold.it with your own local version that serves SVG images" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Flexible SVG Placeholder Images | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, svg, image, placeholder, placehold.it, vector, center, text, server, placekitten" itemprop=keywords><meta content="php, svg, image, placeholder, placehold.it, vector, center, text, server, placekitten" property=article:tag><meta content="php, svg, image, placeholder, placehold.it, vector, center, text, server, placekitten" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/flexible-svg-placeholders/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Flexible SVG Placeholder Images</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 24, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Do you use <a rel="noopener nofollow noreferrer" title="Placehold.it Homepage" href=http://placehold.it target=_blank>placehold.it</a>? It is a great service. The only thing is when you are offline, or you are testing a page that needs a lot of placeholders, it may not be the greatest solution.<p><strong>Enter the SVG placeholder.</strong><p>Here are the properties you can set:<ul><li>width and height<li>background-fill<li>font-color<li>font-family<li>font-size</ul><p>Here is the actual SVG file. As you can see it is a PHP file, but you are serving it as an SVG (see the <code>Content-Type</code> part?). Here we grab the URL arguments and assign them to the SVG.</p><iframe id="https://gist.github.com/3aad1d22163c3c3e5cfd.js?file=placeholder-svg.php" srcdoc="`<script src='https://gist.github.com/3aad1d22163c3c3e5cfd.js?file=placeholder-svg.php'></script>`" class=iframes src=about:blank></iframe><p>If you saved the file as <code>placeholder-svg.php</code> then it would be used like so:<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span><</span><span style=color:#bf616a>img </span><span style=color:#d08770>src</span><span>="</span><span style=color:#a3be8c>placeholder-svg.php?wh=400x400&fill=bada55&color=000000&font=Georgia&size=20</span><span>" />
 </span></code></pre><p>This would be the output:<div class=center><img alt="Placeholder Example" src=/images/placeholder.png></div></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/font-awesome-svg-icons/index.html b/docs/web/font-awesome-svg-icons/index.html
index a9524c0..9256272 100644
--- a/docs/web/font-awesome-svg-icons/index.html
+++ b/docs/web/font-awesome-svg-icons/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Font Awesome SVG Icons | OhDoyleRules</title><meta content="Font Awesome SVG Icons | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Font Awesome SVG Icons" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/font-awesome-svg-icons/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/font-awesome-svg-icons/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Font Awesome SVG Icons" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A sprite sheet of all the font-awesome icons from version 4.0.2" name=description><meta content="A sprite sheet of all the font-awesome icons from version 4.0.2" itemprop=description><meta content="A sprite sheet of all the font-awesome icons from version 4.0.2" property=og:description><meta content="A sprite sheet of all the font-awesome icons from version 4.0.2" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Font Awesome SVG Icons | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="font-awesome, font, awesome, vector, logo, svg, eps, icons, sprite, sheet" itemprop=keywords><meta content="font-awesome, font, awesome, vector, logo, svg, eps, icons, sprite, sheet" property=article:tag><meta content="font-awesome, font, awesome, vector, logo, svg, eps, icons, sprite, sheet" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/font-awesome-svg-icons/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Font Awesome SVG Icons</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>This one was kind of annoying. I was looking for all the <a href=http://fontawesome.io/>font-awesome icons</a> in a nice sheet so that <a href=https://ohdoylerules.com/web/font-awesome-svg-icons/warpaintmedia.ca>WARPAINT</a> could design some mockups for a client. Well, of course this sheet doesn't exists.<p>So I used the following code to grab the icons from the <a href=http://fontawesome.io/cheatsheet/>cheatsheet page</a>.<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#b48ead>var </span><span style=color:#bf616a>arr </span><span>= "";
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Font Awesome SVG Icons | OhDoyleRules</title><meta content="Font Awesome SVG Icons | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Font Awesome SVG Icons" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/font-awesome-svg-icons/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/font-awesome-svg-icons/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Font Awesome SVG Icons" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A sprite sheet of all the font-awesome icons from version 4.0.2" name=description><meta content="A sprite sheet of all the font-awesome icons from version 4.0.2" itemprop=description><meta content="A sprite sheet of all the font-awesome icons from version 4.0.2" property=og:description><meta content="A sprite sheet of all the font-awesome icons from version 4.0.2" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Font Awesome SVG Icons | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="font-awesome, font, awesome, vector, logo, svg, eps, icons, sprite, sheet" itemprop=keywords><meta content="font-awesome, font, awesome, vector, logo, svg, eps, icons, sprite, sheet" property=article:tag><meta content="font-awesome, font, awesome, vector, logo, svg, eps, icons, sprite, sheet" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/font-awesome-svg-icons/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Font Awesome SVG Icons</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>This one was kind of annoying. I was looking for all the <a rel="noopener nofollow noreferrer" href=http://fontawesome.io/ target=_blank>font-awesome icons</a> in a nice sheet so that <a href=https://ohdoylerules.com/web/font-awesome-svg-icons/warpaintmedia.ca>WARPAINT</a> could design some mockups for a client. Well, of course this sheet doesn't exists.<p>So I used the following code to grab the icons from the <a rel="noopener nofollow noreferrer" href=http://fontawesome.io/cheatsheet/ target=_blank>cheatsheet page</a>.<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#b48ead>var </span><span style=color:#bf616a>arr </span><span>= "";
 </span><span style=color:#8fa1b3>$</span><span>('</span><span style=color:#a3be8c>.container .col-md-4</span><span>').</span><span style=color:#8fa1b3>each</span><span>(</span><span style=color:#b48ead>function</span><span>(</span><span style=color:#bf616a>i</span><span>, </span><span style=color:#bf616a>e</span><span>) {
 </span><span>  </span><span style=color:#bf616a>arr </span><span>+= </span><span style=color:#bf616a>e</span><span>.</span><span style=color:#bf616a>innerText</span><span>.</span><span style=color:#96b5b4>slice</span><span>(</span><span style=color:#d08770>0</span><span>,</span><span style=color:#d08770>1</span><span>) + '</span><span style=color:#a3be8c>, </span><span>';
 </span><span>});
diff --git a/docs/web/function-currying-to-make-reusable-code/index.html b/docs/web/function-currying-to-make-reusable-code/index.html
index 8092167..39d9763 100644
--- a/docs/web/function-currying-to-make-reusable-code/index.html
+++ b/docs/web/function-currying-to-make-reusable-code/index.html
@@ -113,4 +113,4 @@
 </span><span style=color:#eff1f5>}
 </span><span style=color:#eff1f5>
 </span><span style=color:#eff1f5>ReactDOM.render(&LTForm />, document.body);
-</span></code></pre><p><em><a href=https://6nv8q86yk3.codesandbox.io/>View this example on codesandbox.</a></em><p>This is where I think curried functions really shine. This is a very compact way to support a lot of different form items but they can all use the same function even though they may all be unique items. Obviously, you can use this for any type of event handlers. Hopefully you can see the flexibility here and the potential to make simpler code that is more usable.<h3 id=in-summation>In summation</h3><p>So next time you see some of these patterns pop up in your code (or some smells with global variables and repeated code) maybe reach for a curried function instead. <em>Delicious</em>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p><em><a rel="noopener nofollow noreferrer" href=https://6nv8q86yk3.codesandbox.io/ target=_blank>View this example on codesandbox.</a></em><p>This is where I think curried functions really shine. This is a very compact way to support a lot of different form items but they can all use the same function even though they may all be unique items. Obviously, you can use this for any type of event handlers. Hopefully you can see the flexibility here and the potential to make simpler code that is more usable.<h3 id=in-summation>In summation</h3><p>So next time you see some of these patterns pop up in your code (or some smells with global variables and repeated code) maybe reach for a curried function instead. <em>Delicious</em>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/index.html b/docs/web/index.html
index a1b2057..bc87290 100644
--- a/docs/web/index.html
+++ b/docs/web/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Web | OhDoyleRules</title><meta content="Web | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Web itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Web name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The web category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The web category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The web category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The web category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Build A Multi-lingual Laravel Site With Subdomains" href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/>Build A Multi-lingual Laravel Site With Subdomains</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 25, 2019</span></span><div class=post-intro><p>Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help.<p><a title="Read Build A Multi-lingual Laravel Site With Subdomains" class=read-more href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="SQL As An API" href=https://ohdoylerules.com/web/sql-as-an-api/>SQL As An API</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2019</span></span><div class=post-intro><p>An example of how to use SQL as an API instead of reaching for something like GraphQL<p><a title="Read SQL As An API" class=read-more href=https://ohdoylerules.com/web/sql-as-an-api/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Laravel Valet for WordPress Multisites" href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/>Use Laravel Valet for WordPress Multisites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 01, 2019</span></span><div class=post-intro><p>Use Laravel Valet for developing local WordPress multisites<p><a title="Read Use Laravel Valet for WordPress Multisites" class=read-more href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Add $.getStylesheet To jQuery" href=https://ohdoylerules.com/web/add-getstylesheet-to-jquery/>Add $.getStylesheet To jQuery</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 05, 2016</span></span><div class=post-intro><p>Ever wanted to have a CSS/Stylesheet version of $.getScript? Well now you can with $.getStylesheet<p><a title="Read Add $.getStylesheet To jQuery" class=read-more href=https://ohdoylerules.com/web/add-getstylesheet-to-jquery/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Nginx for A/B Testing" href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/>Use Nginx for A/B Testing</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 28, 2016</span></span><div class=post-intro><p>Use Nginx to set custom headers in your HTTP responses so you can serve conditional content<p><a title="Read Use Nginx for A/B Testing" class=read-more href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="3 Ways A Website Project Falls Apart" href=https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/>3 Ways A Website Project Falls Apart</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 29, 2017</span></span><div class=post-intro><p>Over the last 7 years, I have been a part of hundreds of website projects. Here are some of the most common ways I have seen a project fail.<p><a title="Read 3 Ways A Website Project Falls Apart" class=read-more href=https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WordPress Browser Body Class" href=https://ohdoylerules.com/web/wordpress-browser-body-class/>WordPress Browser Body Class</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 21, 2017</span></span><div class=post-intro><p>A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required.<p><a title="Read WordPress Browser Body Class" class=read-more href=https://ohdoylerules.com/web/wordpress-browser-body-class/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The $100 Website" href=https://ohdoylerules.com/web/the-100-dollar-website/>The $100 Website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 23, 2013</span></span><div class=post-intro><p>I wrote a post on WARPAINT Media about people who ask about getting a website for $100.<p><a title="Read The $100 Website" class=read-more href=https://ohdoylerules.com/web/the-100-dollar-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Laravel Scout Sonic Driver" href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/>Laravel Scout Sonic Driver</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 12, 2019</span></span><div class=post-intro><p>A Laravel Scout driver for the Sonic search tool<p><a title="Read Laravel Scout Sonic Driver" class=read-more href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Detect Theme Editor In Shopify Liquid Templates" href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/>Detect Theme Editor In Shopify Liquid Templates</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 04, 2020</span></span><div class=post-intro><p>A demo on how to detect when a template is running in the Shopify theme and section builder<p><a title="Read Detect Theme Editor In Shopify Liquid Templates" class=read-more href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WordPress Plugin Swipe.js" href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/>WordPress Plugin Swipe.js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2012</span></span><div class=post-intro><p>WordPress Plugin Swipe.js<p><a title="Read WordPress Plugin Swipe.js" class=read-more href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Typeform Vector Logo" href=https://ohdoylerules.com/web/typeform-vector-logo/>Typeform Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 31, 2014</span></span><div class=post-intro><p>Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events, and other general uses.<p><a title="Read Typeform Vector Logo" class=read-more href=https://ohdoylerules.com/web/typeform-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Flexible SVG Placeholder Images" href=https://ohdoylerules.com/web/flexible-svg-placeholders/>Flexible SVG Placeholder Images</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 24, 2014</span></span><div class=post-intro><p>Replace a service like placehold.it with your own local version that serves SVG images<p><a title="Read Flexible SVG Placeholder Images" class=read-more href=https://ohdoylerules.com/web/flexible-svg-placeholders/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Slack Slash Supplier" href=https://ohdoylerules.com/web/simple-slash-commands/>Simple Slack Slash Supplier</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 13, 2019</span></span><div class=post-intro><p>A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses<p><a title="Read Simple Slack Slash Supplier" class=read-more href=https://ohdoylerules.com/web/simple-slash-commands/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Custom Google Forms" href=https://ohdoylerules.com/web/custom-google-forms/>Custom Google Forms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 22, 2013</span></span>  <span class=post-date>🕙  <span>Updated: September 20, 2014</span></span><div class=post-intro><p>I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something<p><a title="Read Custom Google Forms" class=read-more href=https://ohdoylerules.com/web/custom-google-forms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Tips For Using SVGs" href=https://ohdoylerules.com/web/tips-for-using-svgs/>Tips For Using SVGs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 17, 2014</span></span><div class=post-intro><p>I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.<p><a title="Read Tips For Using SVGs" class=read-more href=https://ohdoylerules.com/web/tips-for-using-svgs/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using DigitalOcean Spaces" href=https://ohdoylerules.com/web/using-digitalocean-spaces/>Using DigitalOcean Spaces</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2017</span></span><div class=post-intro><p>An example project for how to use DigitalOcean Spaces with S3 tools<p><a title="Read Using DigitalOcean Spaces" class=read-more href=https://ohdoylerules.com/web/using-digitalocean-spaces/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="When And Where To Compromise Your App Design" href=https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/>When And Where To Compromise Your App Design</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2018</span></span><div class=post-intro><p>When initially developing an application or a new feature we are constantly trying to balance best practices in design with delivering a finished product.<p><a title="Read When And Where To Compromise Your App Design" class=read-more href=https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue Toggle Component" href=https://ohdoylerules.com/web/vue-toggle-component/>Vue Toggle Component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 04, 2020</span></span><div class=post-intro><p>A Vue component that is used to create simple switches, toggles, and show/hide experiences<p><a title="Read Vue Toggle Component" class=read-more href=https://ohdoylerules.com/web/vue-toggle-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue Omnibar Component" href=https://ohdoylerules.com/web/vue-omnibar-component/>Vue Omnibar Component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 05, 2020</span></span><div class=post-intro><p>A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features<p><a title="Read Vue Omnibar Component" class=read-more href=https://ohdoylerules.com/web/vue-omnibar-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CMS Watch List" href=https://ohdoylerules.com/web/cms-watch-list/>CMS Watch List</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div class=post-intro><p>CMS Watch List<p><a title="Read CMS Watch List" class=read-more href=https://ohdoylerules.com/web/cms-watch-list/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Slack Meta Data For URLs and Links" href=https://ohdoylerules.com/web/slack-url-meta-data/>Slack Meta Data For URLs and Links</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2015</span></span><div class=post-intro><p>Tips to get Slack to resolve the correct meta data for your website URL<p><a title="Read Slack Meta Data For URLs and Links" class=read-more href=https://ohdoylerules.com/web/slack-url-meta-data/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Create JSON Sections In Shopify" href=https://ohdoylerules.com/web/create-json-sections-in-shopify/>Create JSON Sections In Shopify</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 05, 2020</span></span><div class=post-intro><p>A demo on how to create a section in Shopify that returns JSON and HTML<p><a title="Read Create JSON Sections In Shopify" class=read-more href=https://ohdoylerules.com/web/create-json-sections-in-shopify/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Benchmarks With Apache AB" href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/>Simple Benchmarks With Apache AB</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 22, 2015</span></span><div class=post-intro><p>a tutorial for generating simple benchmarks using the Apache ab tool<p><a title="Read Simple Benchmarks With Apache AB" class=read-more href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Fixing Wordpress wp-content 500 Errors" href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/>Fixing Wordpress wp-content 500 Errors</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 29, 2015</span></span><div class=post-intro><p>How to fix the issue where Wordpress wp-content assets are throwing 500 errors<p><a title="Read Fixing Wordpress wp-content 500 Errors" class=read-more href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="IICRC Vector Logo" href=https://ohdoylerules.com/web/iicrc-vector-logo/>IICRC Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 18, 2013</span></span><div class=post-intro><p>IICRC Vector Logo<p><a title="Read IICRC Vector Logo" class=read-more href=https://ohdoylerules.com/web/iicrc-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Function Currying To Make Reusable Code" href=https://ohdoylerules.com/web/function-currying-to-make-reusable-code/>Function Currying To Make Reusable Code</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 17, 2019</span></span><div class=post-intro><p>Function currying. If you haven't heard of it before, let me introduce you to this magical pattern that can help reduce duplicate code and improve readability<p><a title="Read Function Currying To Make Reusable Code" class=read-more href=https://ohdoylerules.com/web/function-currying-to-make-reusable-code/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kijiji Vector Logo" href=https://ohdoylerules.com/web/kijiji-vector-logo/>Kijiji Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2014</span></span><div class=post-intro><p>the kijiji logo as a vector svg file<p><a title="Read Kijiji Vector Logo" class=read-more href=https://ohdoylerules.com/web/kijiji-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Angular (v1.x) Through iFrame" href=https://ohdoylerules.com/web/angular-through-iframe/>Angular (v1.x) Through iFrame</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2018</span></span><div class=post-intro><p>How to use angular.js (v1.x) through an iframe when the iframe URL is dynamically swapped<p><a title="Read Angular (v1.x) Through iFrame" class=read-more href=https://ohdoylerules.com/web/angular-through-iframe/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Zapier Webhooks for HTML forms" href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/>Using Zapier Webhooks for HTML forms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 28, 2019</span></span><div class=post-intro><p>You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form<p><a title="Read Using Zapier Webhooks for HTML forms" class=read-more href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="AngularJS Hangout - Promises Promises" href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/>AngularJS Hangout - Promises Promises</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div class=post-intro><p>AngularJS Hangout - Promises Promises<p><a title="Read AngularJS Hangout - Promises Promises" class=read-more href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The Simple Spam Stopper" href=https://ohdoylerules.com/web/simple-spam-stopper/>The Simple Spam Stopper</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2014</span></span><div class=post-intro><p>For the last year at WARPAINT Media, we have been getting assaulted with spam.<p><a title="Read The Simple Spam Stopper" class=read-more href=https://ohdoylerules.com/web/simple-spam-stopper/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Update Laravel Pagination With New Collection" href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/>Update Laravel Pagination With New Collection</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2017</span></span><div class=post-intro><p>Did you know you can update a Laravel pagination with a new collection?<p><a title="Read Update Laravel Pagination With New Collection" class=read-more href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Varnish For Static Sites" href=https://ohdoylerules.com/web/varnish-for-static-sites/>Varnish For Static Sites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2015</span></span><div class=post-intro><p>a small tutorial for how to setup Varnish cache for a flat site running on Apache<p><a title="Read Varnish For Static Sites" class=read-more href=https://ohdoylerules.com/web/varnish-for-static-sites/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Font Awesome SVG Icons" href=https://ohdoylerules.com/web/font-awesome-svg-icons/>Font Awesome SVG Icons</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2014</span></span><div class=post-intro><p>A sprite sheet of all the font-awesome icons from version 4.0.2<p><a title="Read Font Awesome SVG Icons" class=read-more href=https://ohdoylerules.com/web/font-awesome-svg-icons/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Styling radio and checkbox inputs" href=https://ohdoylerules.com/web/radio-checkboxes/>Styling radio and checkbox inputs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 07, 2012</span></span><div class=post-intro><p>Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs<p><a title="Read Styling radio and checkbox inputs" class=read-more href=https://ohdoylerules.com/web/radio-checkboxes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS3 badge logo in SVG" href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/>CSS3 badge logo in SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2013</span></span><div class=post-intro><p>CSS3 badge logo in SVG<p><a title="Read CSS3 badge logo in SVG" class=read-more href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PhalconPHP Completions" href=https://ohdoylerules.com/web/phalconphp-completions/>PhalconPHP Completions</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 20, 2015</span></span><div class=post-intro><p>A PhalconPHP completions and snippets package for Sublime Text<p><a title="Read PhalconPHP Completions" class=read-more href=https://ohdoylerules.com/web/phalconphp-completions/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Source Code Pro on Sublime Text" href=https://ohdoylerules.com/web/source-code-pro-sublime/>Source Code Pro on Sublime Text</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 19, 2012</span></span><div class=post-intro><p>Download and install Source Code Pro on Sublime Text<p><a title="Read Source Code Pro on Sublime Text" class=read-more href=https://ohdoylerules.com/web/source-code-pro-sublime/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Nuxt Firebase Starter" href=https://ohdoylerules.com/web/nuxt-firebase-starter/>Nuxt Firebase Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 21, 2017</span></span><div class=post-intro><p>An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles<p><a title="Read Nuxt Firebase Starter" class=read-more href=https://ohdoylerules.com/web/nuxt-firebase-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="View Folder Tree in MacOSX Terminal" href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/>View Folder Tree in MacOSX Terminal</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2012</span></span><div class=post-intro><p>View Folder Tree in MacOSX Terminal<p><a title="Read View Folder Tree in MacOSX Terminal" class=read-more href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Add A Counter For Duplicate Uploads" href=https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/>Add A Counter For Duplicate Uploads</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 12, 2016</span></span><div class=post-intro><p>A short script to detect if a folder contains a duplicate filename, and if it does, the filename gets a counter prepended to the front of the filename<p><a title="Read Add A Counter For Duplicate Uploads" class=read-more href=https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using slots in Vue js" href=https://ohdoylerules.com/web/using-slots-in-vue-js/>Using slots in Vue js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2020</span></span><div class=post-intro><p>If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components<p><a title="Read Using slots in Vue js" class=read-more href=https://ohdoylerules.com/web/using-slots-in-vue-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Styling Radios and Checkboxes. Redux." href=https://ohdoylerules.com/web/styling-input-redux/>Styling Radios and Checkboxes. Redux.</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 19, 2012</span></span><div class=post-intro><p>Styling Radios and Checkboxes. Redux.<p><a title="Read Styling Radios and Checkboxes. Redux." class=read-more href=https://ohdoylerules.com/web/styling-input-redux/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Making Checkboxes in WordPress options pages" href=https://ohdoylerules.com/web/checkboxes-options/>Making Checkboxes in WordPress options pages</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 11, 2012</span></span><div class=post-intro><p>Making Checkboxes in WordPress options pages<p><a title="Read Making Checkboxes in WordPress options pages" class=read-more href=https://ohdoylerules.com/web/checkboxes-options/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Sqlite As A Cache In Laravel" href=https://ohdoylerules.com/web/laravel-sqlite-cache/>Using Sqlite As A Cache In Laravel</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2018</span></span><div class=post-intro><p>How to use Sqlite as a cache in Laravel<p><a title="Read Using Sqlite As A Cache In Laravel" class=read-more href=https://ohdoylerules.com/web/laravel-sqlite-cache/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Web | OhDoyleRules</title><meta content="Web | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content=Web itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content=Web name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="The web category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=description><meta content="The web category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." itemprop=description><meta content="The web category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." property=og:description><meta content="The web category of the personal blog of James Doyle (james2doyle) Web Developer from Canada." name=twitter:description><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><body><div class="container transition-fade" id=swup><header class="grid center"><p><a title="The personal blog of James Doyle (james2doyle) Web Developer in Canada." class=none href=https://ohdoylerules.com> <svg height=57 width=113 xmlns=http://www.w3.org/2000/svg><title>The personal blog of James Doyle (james2doyle) Web Developer in Canada. Logo</title><path d="M62.781 51.75v4.094h-28.938v-4.094zm-41.094-9.063c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm45.719 0c0-1.396.318-2.453.953-3.172.635-.719 1.547-1.078 2.734-1.078 1.208 0 2.151.359 2.828 1.078.677.719 1.016 1.776 1.016 3.172 0 1.354-.344 2.396-1.031 3.125-.688.729-1.625 1.094-2.813 1.094-1.063 0-1.943-.328-2.641-.984-.698-.656-1.047-1.734-1.047-3.234zm-66.844-14.219c0-5.521.807-10.687 2.422-15.5 1.615-4.813 3.943-9.031 6.984-12.656h5.063c-3 4.021-5.255 8.437-6.766 13.25-1.51 4.813-2.266 9.76-2.266 14.844 0 5 .771 9.885 2.313 14.656 1.542 4.771 3.76 9.125 6.656 13.063h-5c-3.063-3.542-5.396-7.677-7-12.406-1.604-4.729-2.406-9.812-2.406-15.25zm112.125 0c0 5.479-.807 10.583-2.422 15.313-1.615 4.729-3.943 8.844-6.984 12.344h-5c2.896-3.917 5.115-8.266 6.656-13.047 1.542-4.781 2.313-9.672 2.313-14.672 0-5.083-.755-10.031-2.266-14.844-1.51-4.813-3.766-9.229-6.766-13.25h5.063c3.063 3.646 5.396 7.88 7 12.703 1.604 4.823 2.406 9.974 2.406 15.453zm0 0" fill=#eee /></svg> </a></header><div class=the-loop><article><h2><a title="Varnish For Static Sites" href=https://ohdoylerules.com/web/varnish-for-static-sites/>Varnish For Static Sites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2015</span></span><div class=post-intro><p>a small tutorial for how to setup Varnish cache for a flat site running on Apache<p><a title="Read Varnish For Static Sites" class=read-more href=https://ohdoylerules.com/web/varnish-for-static-sites/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Styling radio and checkbox inputs" href=https://ohdoylerules.com/web/radio-checkboxes/>Styling radio and checkbox inputs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 07, 2012</span></span><div class=post-intro><p>Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs<p><a title="Read Styling radio and checkbox inputs" class=read-more href=https://ohdoylerules.com/web/radio-checkboxes/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Create JSON Sections In Shopify" href=https://ohdoylerules.com/web/create-json-sections-in-shopify/>Create JSON Sections In Shopify</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 05, 2020</span></span><div class=post-intro><p>A demo on how to create a section in Shopify that returns JSON and HTML<p><a title="Read Create JSON Sections In Shopify" class=read-more href=https://ohdoylerules.com/web/create-json-sections-in-shopify/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Zapier Webhooks for HTML forms" href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/>Using Zapier Webhooks for HTML forms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 28, 2019</span></span><div class=post-intro><p>You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form<p><a title="Read Using Zapier Webhooks for HTML forms" class=read-more href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Add $.getStylesheet To jQuery" href=https://ohdoylerules.com/web/add-getstylesheet-to-jquery/>Add $.getStylesheet To jQuery</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 05, 2016</span></span><div class=post-intro><p>Ever wanted to have a CSS/Stylesheet version of $.getScript? Well now you can with $.getStylesheet<p><a title="Read Add $.getStylesheet To jQuery" class=read-more href=https://ohdoylerules.com/web/add-getstylesheet-to-jquery/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Nginx for A/B Testing" href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/>Use Nginx for A/B Testing</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 28, 2016</span></span><div class=post-intro><p>Use Nginx to set custom headers in your HTTP responses so you can serve conditional content<p><a title="Read Use Nginx for A/B Testing" class=read-more href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="When And Where To Compromise Your App Design" href=https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/>When And Where To Compromise Your App Design</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 21, 2018</span></span><div class=post-intro><p>When initially developing an application or a new feature we are constantly trying to balance best practices in design with delivering a finished product.<p><a title="Read When And Where To Compromise Your App Design" class=read-more href=https://ohdoylerules.com/web/when-and-where-to-compromise-your-app-design/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using Sqlite As A Cache In Laravel" href=https://ohdoylerules.com/web/laravel-sqlite-cache/>Using Sqlite As A Cache In Laravel</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2018</span></span><div class=post-intro><p>How to use Sqlite as a cache in Laravel<p><a title="Read Using Sqlite As A Cache In Laravel" class=read-more href=https://ohdoylerules.com/web/laravel-sqlite-cache/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The Simple Spam Stopper" href=https://ohdoylerules.com/web/simple-spam-stopper/>The Simple Spam Stopper</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2014</span></span><div class=post-intro><p>For the last year at WARPAINT Media, we have been getting assaulted with spam.<p><a title="Read The Simple Spam Stopper" class=read-more href=https://ohdoylerules.com/web/simple-spam-stopper/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Laravel Scout Sonic Driver" href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/>Laravel Scout Sonic Driver</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 12, 2019</span></span><div class=post-intro><p>A Laravel Scout driver for the Sonic search tool<p><a title="Read Laravel Scout Sonic Driver" class=read-more href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="SQL As An API" href=https://ohdoylerules.com/web/sql-as-an-api/>SQL As An API</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2019</span></span><div class=post-intro><p>An example of how to use SQL as an API instead of reaching for something like GraphQL<p><a title="Read SQL As An API" class=read-more href=https://ohdoylerules.com/web/sql-as-an-api/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Update Laravel Pagination With New Collection" href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/>Update Laravel Pagination With New Collection</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2017</span></span><div class=post-intro><p>Did you know you can update a Laravel pagination with a new collection?<p><a title="Read Update Laravel Pagination With New Collection" class=read-more href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Add A Counter For Duplicate Uploads" href=https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/>Add A Counter For Duplicate Uploads</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 12, 2016</span></span><div class=post-intro><p>A short script to detect if a folder contains a duplicate filename, and if it does, the filename gets a counter prepended to the front of the filename<p><a title="Read Add A Counter For Duplicate Uploads" class=read-more href=https://ohdoylerules.com/web/add-a-counter-for-duplicate-file-uploads/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using DigitalOcean Spaces" href=https://ohdoylerules.com/web/using-digitalocean-spaces/>Using DigitalOcean Spaces</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2017</span></span><div class=post-intro><p>An example project for how to use DigitalOcean Spaces with S3 tools<p><a title="Read Using DigitalOcean Spaces" class=read-more href=https://ohdoylerules.com/web/using-digitalocean-spaces/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Using slots in Vue js" href=https://ohdoylerules.com/web/using-slots-in-vue-js/>Using slots in Vue js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2020</span></span><div class=post-intro><p>If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components<p><a title="Read Using slots in Vue js" class=read-more href=https://ohdoylerules.com/web/using-slots-in-vue-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Styling Radios and Checkboxes. Redux." href=https://ohdoylerules.com/web/styling-input-redux/>Styling Radios and Checkboxes. Redux.</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 19, 2012</span></span><div class=post-intro><p>Styling Radios and Checkboxes. Redux.<p><a title="Read Styling Radios and Checkboxes. Redux." class=read-more href=https://ohdoylerules.com/web/styling-input-redux/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Build A Multi-lingual Laravel Site With Subdomains" href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/>Build A Multi-lingual Laravel Site With Subdomains</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 25, 2019</span></span><div class=post-intro><p>Have you ever wanted to use subdomains in Laravel to control logic, locale, or other functionality? Well, this example might help.<p><a title="Read Build A Multi-lingual Laravel Site With Subdomains" class=read-more href=https://ohdoylerules.com/web/build-a-multi-lingual-laravel-site-with-subdomains/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Slack Meta Data For URLs and Links" href=https://ohdoylerules.com/web/slack-url-meta-data/>Slack Meta Data For URLs and Links</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2015</span></span><div class=post-intro><p>Tips to get Slack to resolve the correct meta data for your website URL<p><a title="Read Slack Meta Data For URLs and Links" class=read-more href=https://ohdoylerules.com/web/slack-url-meta-data/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue Omnibar Component" href=https://ohdoylerules.com/web/vue-omnibar-component/>Vue Omnibar Component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 05, 2020</span></span><div class=post-intro><p>A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features<p><a title="Read Vue Omnibar Component" class=read-more href=https://ohdoylerules.com/web/vue-omnibar-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Source Code Pro on Sublime Text" href=https://ohdoylerules.com/web/source-code-pro-sublime/>Source Code Pro on Sublime Text</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 19, 2012</span></span><div class=post-intro><p>Download and install Source Code Pro on Sublime Text<p><a title="Read Source Code Pro on Sublime Text" class=read-more href=https://ohdoylerules.com/web/source-code-pro-sublime/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Tips For Using SVGs" href=https://ohdoylerules.com/web/tips-for-using-svgs/>Tips For Using SVGs</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 17, 2014</span></span><div class=post-intro><p>I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.<p><a title="Read Tips For Using SVGs" class=read-more href=https://ohdoylerules.com/web/tips-for-using-svgs/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Use Laravel Valet for WordPress Multisites" href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/>Use Laravel Valet for WordPress Multisites</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 01, 2019</span></span><div class=post-intro><p>Use Laravel Valet for developing local WordPress multisites<p><a title="Read Use Laravel Valet for WordPress Multisites" class=read-more href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="AngularJS Hangout - Promises Promises" href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/>AngularJS Hangout - Promises Promises</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 17, 2013</span></span><div class=post-intro><p>AngularJS Hangout - Promises Promises<p><a title="Read AngularJS Hangout - Promises Promises" class=read-more href=https://ohdoylerules.com/web/angularjs-hangout-promises-promises/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Detect Theme Editor In Shopify Liquid Templates" href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/>Detect Theme Editor In Shopify Liquid Templates</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>January 04, 2020</span></span><div class=post-intro><p>A demo on how to detect when a template is running in the Shopify theme and section builder<p><a title="Read Detect Theme Editor In Shopify Liquid Templates" class=read-more href=https://ohdoylerules.com/web/detect-theme-editor-in-shopify-liquid-templates/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Function Currying To Make Reusable Code" href=https://ohdoylerules.com/web/function-currying-to-make-reusable-code/>Function Currying To Make Reusable Code</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 17, 2019</span></span><div class=post-intro><p>Function currying. If you haven't heard of it before, let me introduce you to this magical pattern that can help reduce duplicate code and improve readability<p><a title="Read Function Currying To Make Reusable Code" class=read-more href=https://ohdoylerules.com/web/function-currying-to-make-reusable-code/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Fixing Wordpress wp-content 500 Errors" href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/>Fixing Wordpress wp-content 500 Errors</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 29, 2015</span></span><div class=post-intro><p>How to fix the issue where Wordpress wp-content assets are throwing 500 errors<p><a title="Read Fixing Wordpress wp-content 500 Errors" class=read-more href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Benchmarks With Apache AB" href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/>Simple Benchmarks With Apache AB</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 22, 2015</span></span><div class=post-intro><p>a tutorial for generating simple benchmarks using the Apache ab tool<p><a title="Read Simple Benchmarks With Apache AB" class=read-more href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="View Folder Tree in MacOSX Terminal" href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/>View Folder Tree in MacOSX Terminal</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2012</span></span><div class=post-intro><p>View Folder Tree in MacOSX Terminal<p><a title="Read View Folder Tree in MacOSX Terminal" class=read-more href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Simple Slack Slash Supplier" href=https://ohdoylerules.com/web/simple-slash-commands/>Simple Slack Slash Supplier</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 13, 2019</span></span><div class=post-intro><p>A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses<p><a title="Read Simple Slack Slash Supplier" class=read-more href=https://ohdoylerules.com/web/simple-slash-commands/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Angular (v1.x) Through iFrame" href=https://ohdoylerules.com/web/angular-through-iframe/>Angular (v1.x) Through iFrame</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 29, 2018</span></span><div class=post-intro><p>How to use angular.js (v1.x) through an iframe when the iframe URL is dynamically swapped<p><a title="Read Angular (v1.x) Through iFrame" class=read-more href=https://ohdoylerules.com/web/angular-through-iframe/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Making Checkboxes in WordPress options pages" href=https://ohdoylerules.com/web/checkboxes-options/>Making Checkboxes in WordPress options pages</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 11, 2012</span></span><div class=post-intro><p>Making Checkboxes in WordPress options pages<p><a title="Read Making Checkboxes in WordPress options pages" class=read-more href=https://ohdoylerules.com/web/checkboxes-options/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Vue Toggle Component" href=https://ohdoylerules.com/web/vue-toggle-component/>Vue Toggle Component</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 04, 2020</span></span><div class=post-intro><p>A Vue component that is used to create simple switches, toggles, and show/hide experiences<p><a title="Read Vue Toggle Component" class=read-more href=https://ohdoylerules.com/web/vue-toggle-component/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Typeform Vector Logo" href=https://ohdoylerules.com/web/typeform-vector-logo/>Typeform Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 31, 2014</span></span><div class=post-intro><p>Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events, and other general uses.<p><a title="Read Typeform Vector Logo" class=read-more href=https://ohdoylerules.com/web/typeform-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CMS Watch List" href=https://ohdoylerules.com/web/cms-watch-list/>CMS Watch List</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 26, 2013</span></span><div class=post-intro><p>CMS Watch List<p><a title="Read CMS Watch List" class=read-more href=https://ohdoylerules.com/web/cms-watch-list/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Custom Google Forms" href=https://ohdoylerules.com/web/custom-google-forms/>Custom Google Forms</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 22, 2013</span></span>  <span class=post-date>🕙  <span>Updated: September 20, 2014</span></span><div class=post-intro><p>I have been complaining about the lack of themes for google forms for a while now. I finally decided to stop crying and do something<p><a title="Read Custom Google Forms" class=read-more href=https://ohdoylerules.com/web/custom-google-forms/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="PhalconPHP Completions" href=https://ohdoylerules.com/web/phalconphp-completions/>PhalconPHP Completions</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 20, 2015</span></span><div class=post-intro><p>A PhalconPHP completions and snippets package for Sublime Text<p><a title="Read PhalconPHP Completions" class=read-more href=https://ohdoylerules.com/web/phalconphp-completions/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="The $100 Website" href=https://ohdoylerules.com/web/the-100-dollar-website/>The $100 Website</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 23, 2013</span></span><div class=post-intro><p>I wrote a post on WARPAINT Media about people who ask about getting a website for $100.<p><a title="Read The $100 Website" class=read-more href=https://ohdoylerules.com/web/the-100-dollar-website/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="3 Ways A Website Project Falls Apart" href=https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/>3 Ways A Website Project Falls Apart</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 29, 2017</span></span><div class=post-intro><p>Over the last 7 years, I have been a part of hundreds of website projects. Here are some of the most common ways I have seen a project fail.<p><a title="Read 3 Ways A Website Project Falls Apart" class=read-more href=https://ohdoylerules.com/web/3-ways-a-website-project-falls-apart/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Font Awesome SVG Icons" href=https://ohdoylerules.com/web/font-awesome-svg-icons/>Font Awesome SVG Icons</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>February 06, 2014</span></span><div class=post-intro><p>A sprite sheet of all the font-awesome icons from version 4.0.2<p><a title="Read Font Awesome SVG Icons" class=read-more href=https://ohdoylerules.com/web/font-awesome-svg-icons/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="IICRC Vector Logo" href=https://ohdoylerules.com/web/iicrc-vector-logo/>IICRC Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 18, 2013</span></span><div class=post-intro><p>IICRC Vector Logo<p><a title="Read IICRC Vector Logo" class=read-more href=https://ohdoylerules.com/web/iicrc-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="CSS3 badge logo in SVG" href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/>CSS3 badge logo in SVG</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 21, 2013</span></span><div class=post-intro><p>CSS3 badge logo in SVG<p><a title="Read CSS3 badge logo in SVG" class=read-more href=https://ohdoylerules.com/web/css3-badge-logo-in-svg/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WordPress Plugin Swipe.js" href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/>WordPress Plugin Swipe.js</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2012</span></span><div class=post-intro><p>WordPress Plugin Swipe.js<p><a title="Read WordPress Plugin Swipe.js" class=read-more href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Nuxt Firebase Starter" href=https://ohdoylerules.com/web/nuxt-firebase-starter/>Nuxt Firebase Starter</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 21, 2017</span></span><div class=post-intro><p>An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles<p><a title="Read Nuxt Firebase Starter" class=read-more href=https://ohdoylerules.com/web/nuxt-firebase-starter/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="WordPress Browser Body Class" href=https://ohdoylerules.com/web/wordpress-browser-body-class/>WordPress Browser Body Class</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 21, 2017</span></span><div class=post-intro><p>A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required.<p><a title="Read WordPress Browser Body Class" class=read-more href=https://ohdoylerules.com/web/wordpress-browser-body-class/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Flexible SVG Placeholder Images" href=https://ohdoylerules.com/web/flexible-svg-placeholders/>Flexible SVG Placeholder Images</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 24, 2014</span></span><div class=post-intro><p>Replace a service like placehold.it with your own local version that serves SVG images<p><a title="Read Flexible SVG Placeholder Images" class=read-more href=https://ohdoylerules.com/web/flexible-svg-placeholders/>Read More <i class="icon icon-arrow-right"></i></a></div></article><article><h2><a title="Kijiji Vector Logo" href=https://ohdoylerules.com/web/kijiji-vector-logo/>Kijiji Vector Logo</a></h2><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2014</span></span><div class=post-intro><p>the kijiji logo as a vector svg file<p><a title="Read Kijiji Vector Logo" class=read-more href=https://ohdoylerules.com/web/kijiji-vector-logo/>Read More <i class="icon icon-arrow-right"></i></a></div></article></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/kijiji-vector-logo/index.html b/docs/web/kijiji-vector-logo/index.html
index 039918d..0f80297 100644
--- a/docs/web/kijiji-vector-logo/index.html
+++ b/docs/web/kijiji-vector-logo/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Kijiji Vector Logo | OhDoyleRules</title><meta content="Kijiji Vector Logo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Kijiji Vector Logo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/kijiji-vector-logo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/kijiji-vector-logo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Kijiji Vector Logo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="the kijiji logo as a vector svg file" name=description><meta content="the kijiji logo as a vector svg file" itemprop=description><meta content="the kijiji logo as a vector svg file" property=og:description><meta content="the kijiji logo as a vector svg file" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Kijiji Vector Logo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="kijiji, ebay, vector, logo, svg, eps, download" itemprop=keywords><meta content="kijiji, ebay, vector, logo, svg, eps, download" property=article:tag><meta content="kijiji, ebay, vector, logo, svg, eps, download" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/kijiji-vector-logo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Kijiji Vector Logo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>This logo was not only impossible to find, because searching for "kijiji vector logo" returns nothing but people wanting to sell vector logos <strong>on</strong> Kijiji, but it was difficult to trace as well.<div class=center><a title="kijiji svg vector logo" href=/images/kijiji.svg target=_blank><img alt="kijiji svg vector logo" src=/images/kijiji.svg></a></div><p>The reason I had to find this logo, was that I made a new Chrome app called, "<a title="Kijiji Enhanced on the Chrome Web Store" href=http://goo.gl/8VXrlm>Kijiji Enhanced</a>". It allows you to browse with larger thumbnails, rotate images in the image viewer, and also view inline maps at the bottom of posts.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Kijiji Vector Logo | OhDoyleRules</title><meta content="Kijiji Vector Logo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Kijiji Vector Logo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/kijiji-vector-logo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/kijiji-vector-logo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Kijiji Vector Logo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="the kijiji logo as a vector svg file" name=description><meta content="the kijiji logo as a vector svg file" itemprop=description><meta content="the kijiji logo as a vector svg file" property=og:description><meta content="the kijiji logo as a vector svg file" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Kijiji Vector Logo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="kijiji, ebay, vector, logo, svg, eps, download" itemprop=keywords><meta content="kijiji, ebay, vector, logo, svg, eps, download" property=article:tag><meta content="kijiji, ebay, vector, logo, svg, eps, download" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/kijiji-vector-logo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Kijiji Vector Logo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 14, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>This logo was not only impossible to find, because searching for "kijiji vector logo" returns nothing but people wanting to sell vector logos <strong>on</strong> Kijiji, but it was difficult to trace as well.<div class=center><a title="kijiji svg vector logo" href=/images/kijiji.svg target=_blank><img alt="kijiji svg vector logo" src=/images/kijiji.svg></a></div><p>The reason I had to find this logo, was that I made a new Chrome app called, "<a rel="noopener nofollow noreferrer" title="Kijiji Enhanced on the Chrome Web Store" href=http://goo.gl/8VXrlm target=_blank>Kijiji Enhanced</a>". It allows you to browse with larger thumbnails, rotate images in the image viewer, and also view inline maps at the bottom of posts.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/laravel-scout-sonic-driver/index.html b/docs/web/laravel-scout-sonic-driver/index.html
index 517b9c5..0a14856 100644
--- a/docs/web/laravel-scout-sonic-driver/index.html
+++ b/docs/web/laravel-scout-sonic-driver/index.html
@@ -1,2 +1,2 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Laravel Scout Sonic Driver | OhDoyleRules</title><meta content="Laravel Scout Sonic Driver | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Laravel Scout Sonic Driver" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/laravel-scout-sonic-driver/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/laravel-scout-sonic-driver/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Laravel Scout Sonic Driver" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A Laravel Scout driver for the Sonic search tool" name=description><meta content="A Laravel Scout driver for the Sonic search tool" itemprop=description><meta content="A Laravel Scout driver for the Sonic search tool" property=og:description><meta content="A Laravel Scout driver for the Sonic search tool" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Laravel Scout Sonic Driver | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, laravel, scout, search, sonic, elasticsearch, rust, index" itemprop=keywords><meta content="php, laravel, scout, search, sonic, elasticsearch, rust, index" property=article:tag><meta content="php, laravel, scout, search, sonic, elasticsearch, rust, index" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Laravel Scout Sonic Driver</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 12, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>If you haven't heard about the cool new search indexer <a href=https://github.com/valeriansaliou/sonic>Sonic</a> you must be living under a rock! If you want to read about Sonic directly from the author, <a href=https://journal.valeriansaliou.name/announcing-sonic-a-super-light-alternative-to-elasticsearch/>check out his blog post</a> on why and how they went on building the tool.<p>According to the Sonic page, it is:<blockquote><p>Fast, lightweight & schema-less search backend. An alternative to Elasticsearch that runs on a few MBs of RAM.</blockquote><p>There are some main points on the site that outline some of the main features:<ul><li>Search terms are stored in collections, organized in buckets<li>Search results return object identifiers<li>Search query typos are corrected<li>Insert and remove items in the index at the same time<li>Auto-complete any word in real-time via the suggest operation<li>Full Unicode compatibility on 80+ languages<li>Built as a TCP protocol</ul><p>All these items make this an ideal candidate for the <a href=https://laravel.com/docs/5.8/scout>Laravel Scout search tool</a>. Scout expects your search engine to return IDs that then get mapped to your query builder which will apply further transformations like <code>WHERE</code> clauses and pagination.<p>I took it upon myself to write a driver for Sonic. You can find it on my Github at <a href=https://github.com/james2doyle/laravel-scout-sonic>Laravel Scout Sonic Driver</a> and you can also install it via composer with the following command:<pre style=background:#2b303b;color:#c0c5ce><code><span>composer require james2doyle/laravel-scout-sonic
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Laravel Scout Sonic Driver | OhDoyleRules</title><meta content="Laravel Scout Sonic Driver | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Laravel Scout Sonic Driver" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/laravel-scout-sonic-driver/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/laravel-scout-sonic-driver/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Laravel Scout Sonic Driver" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A Laravel Scout driver for the Sonic search tool" name=description><meta content="A Laravel Scout driver for the Sonic search tool" itemprop=description><meta content="A Laravel Scout driver for the Sonic search tool" property=og:description><meta content="A Laravel Scout driver for the Sonic search tool" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Laravel Scout Sonic Driver | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, laravel, scout, search, sonic, elasticsearch, rust, index" itemprop=keywords><meta content="php, laravel, scout, search, sonic, elasticsearch, rust, index" property=article:tag><meta content="php, laravel, scout, search, sonic, elasticsearch, rust, index" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/laravel-scout-sonic-driver/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Laravel Scout Sonic Driver</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>April 12, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>If you haven't heard about the cool new search indexer <a rel="noopener nofollow noreferrer" href=https://github.com/valeriansaliou/sonic target=_blank>Sonic</a> you must be living under a rock! If you want to read about Sonic directly from the author, <a rel="noopener nofollow noreferrer" href=https://journal.valeriansaliou.name/announcing-sonic-a-super-light-alternative-to-elasticsearch/ target=_blank>check out his blog post</a> on why and how they went on building the tool.<p>According to the Sonic page, it is:<blockquote><p>Fast, lightweight & schema-less search backend. An alternative to Elasticsearch that runs on a few MBs of RAM.</blockquote><p>There are some main points on the site that outline some of the main features:<ul><li>Search terms are stored in collections, organized in buckets<li>Search results return object identifiers<li>Search query typos are corrected<li>Insert and remove items in the index at the same time<li>Auto-complete any word in real-time via the suggest operation<li>Full Unicode compatibility on 80+ languages<li>Built as a TCP protocol</ul><p>All these items make this an ideal candidate for the <a rel="noopener nofollow noreferrer" href=https://laravel.com/docs/5.8/scout target=_blank>Laravel Scout search tool</a>. Scout expects your search engine to return IDs that then get mapped to your query builder which will apply further transformations like <code>WHERE</code> clauses and pagination.<p>I took it upon myself to write a driver for Sonic. You can find it on my Github at <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/laravel-scout-sonic target=_blank>Laravel Scout Sonic Driver</a> and you can also install it via composer with the following command:<pre style=background:#2b303b;color:#c0c5ce><code><span>composer require james2doyle/laravel-scout-sonic
 </span></code></pre><p>You will need to add some extra config information to <code>config/scout.php</code> before you can use everything correctly. Just checkout the <code>README.md</code> because all the instructions are in there.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/laravel-sqlite-cache/index.html b/docs/web/laravel-sqlite-cache/index.html
index 17adda4..de06e38 100644
--- a/docs/web/laravel-sqlite-cache/index.html
+++ b/docs/web/laravel-sqlite-cache/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Sqlite As A Cache In Laravel | OhDoyleRules</title><meta content="Using Sqlite As A Cache In Laravel | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Sqlite As A Cache In Laravel" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/laravel-sqlite-cache/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/laravel-sqlite-cache/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Sqlite As A Cache In Laravel" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use Sqlite as a cache in Laravel" name=description><meta content="How to use Sqlite as a cache in Laravel" itemprop=description><meta content="How to use Sqlite as a cache in Laravel" property=og:description><meta content="How to use Sqlite as a cache in Laravel" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Sqlite As A Cache In Laravel | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="cache, laravel, sqlite, store" itemprop=keywords><meta content="cache, laravel, sqlite, store" property=article:tag><meta content="cache, laravel, sqlite, store" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/laravel-sqlite-cache/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Sqlite As A Cache In Laravel</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2018</span></span><div itemprop="ArticleBody text" class=main-content><p>I was playing with a new project using <a href=https://laravel.com/docs/5.7>Laravel 5.7</a> and I wanted to use <a href=https://www.sqlite.org/index.html>sqlite</a> for the <a href=https://laravel.com/docs/5.7/cache>cache feature</a> that comes with the framework. If you didn't know, Laravel allows you to choose a cache "driver" and Laravel will handle writes, reads, and even locks, using that cache.<p>By default, Laravel includes drivers for "database", "redis", "memcached", "file", and "array". In typical Laravel fashion, you can even <a href=https://laravel.com/docs/5.7/cache#adding-custom-cache-drivers>write your own drivers</a>. All you need to do is implement the <code>Illuminate\Contracts\Cache\Store</code> interface using the technology you wish to turn into a cache driver.<p>To my surprise, the "database" cache driver does not support multiple database connections. Which means whatever <code>DB_CONNECTION</code> you are using is also going to be used for the cache database driver when it is selected. I took a look to see how the "database" driver was implemented (it's in the <code>Illuminate\Cache\DatabaseStore</code> class) to see if there is any way I can make the database driver use a different connection than the one set in <code>DB_CONNECTION</code>. Looking deeper, it turns out that by extending <code>Illuminate\Cache\DatabaseStore</code>, I was able to put together a "sqlite" cache driver really quickly.<p>Before you set this all up, make sure you create the empty database. From the root of your project run: <code>touch database/cache.sqlite</code>. This creates an empty file that sqlite will mount as the database. To learn more about sqlite and how the file works, check out the page at the sqlite site about the <a href=https://www.sqlite.org/onefile.html>Single-file Cross-platform Database</a>.<p>For the next step, you will need to make sure that the <code>sqlite3</code> command line tool is installed. If you need help getting that going, <a href=https://www.sqlite.org/download.html>check out the download page for the tool</a>. Once that is installed, or if you already have it, you can then connect to the database file via the sqlite cli: <code>sqlite3 database/cache.sqlite</code>. If you want more info about the CLI tool, <a href=https://www.sqlite.org/cli.html>check out the sqlite docs</a>.<p>Finally, you need to setup that sqlite database by executing the following SQL statement:<pre class=language-sql data-lang=sql style=background:#2b303b;color:#c0c5ce><code class=language-sql data-lang=sql><span style=color:#b48ead>CREATE TABLE </span><span>`</span><span style=color:#8fa1b3>cache</span><span>` (
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Sqlite As A Cache In Laravel | OhDoyleRules</title><meta content="Using Sqlite As A Cache In Laravel | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Sqlite As A Cache In Laravel" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/laravel-sqlite-cache/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/laravel-sqlite-cache/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Sqlite As A Cache In Laravel" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to use Sqlite as a cache in Laravel" name=description><meta content="How to use Sqlite as a cache in Laravel" itemprop=description><meta content="How to use Sqlite as a cache in Laravel" property=og:description><meta content="How to use Sqlite as a cache in Laravel" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Sqlite As A Cache In Laravel | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="cache, laravel, sqlite, store" itemprop=keywords><meta content="cache, laravel, sqlite, store" property=article:tag><meta content="cache, laravel, sqlite, store" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/laravel-sqlite-cache/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Sqlite As A Cache In Laravel</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 04, 2018</span></span><div itemprop="ArticleBody text" class=main-content><p>I was playing with a new project using <a rel="noopener nofollow noreferrer" href=https://laravel.com/docs/5.7 target=_blank>Laravel 5.7</a> and I wanted to use <a rel="noopener nofollow noreferrer" href=https://www.sqlite.org/index.html target=_blank>sqlite</a> for the <a rel="noopener nofollow noreferrer" href=https://laravel.com/docs/5.7/cache target=_blank>cache feature</a> that comes with the framework. If you didn't know, Laravel allows you to choose a cache "driver" and Laravel will handle writes, reads, and even locks, using that cache.<p>By default, Laravel includes drivers for "database", "redis", "memcached", "file", and "array". In typical Laravel fashion, you can even <a rel="noopener nofollow noreferrer" href=https://laravel.com/docs/5.7/cache#adding-custom-cache-drivers target=_blank>write your own drivers</a>. All you need to do is implement the <code>Illuminate\Contracts\Cache\Store</code> interface using the technology you wish to turn into a cache driver.<p>To my surprise, the "database" cache driver does not support multiple database connections. Which means whatever <code>DB_CONNECTION</code> you are using is also going to be used for the cache database driver when it is selected. I took a look to see how the "database" driver was implemented (it's in the <code>Illuminate\Cache\DatabaseStore</code> class) to see if there is any way I can make the database driver use a different connection than the one set in <code>DB_CONNECTION</code>. Looking deeper, it turns out that by extending <code>Illuminate\Cache\DatabaseStore</code>, I was able to put together a "sqlite" cache driver really quickly.<p>Before you set this all up, make sure you create the empty database. From the root of your project run: <code>touch database/cache.sqlite</code>. This creates an empty file that sqlite will mount as the database. To learn more about sqlite and how the file works, check out the page at the sqlite site about the <a rel="noopener nofollow noreferrer" href=https://www.sqlite.org/onefile.html target=_blank>Single-file Cross-platform Database</a>.<p>For the next step, you will need to make sure that the <code>sqlite3</code> command line tool is installed. If you need help getting that going, <a rel="noopener nofollow noreferrer" href=https://www.sqlite.org/download.html target=_blank>check out the download page for the tool</a>. Once that is installed, or if you already have it, you can then connect to the database file via the sqlite cli: <code>sqlite3 database/cache.sqlite</code>. If you want more info about the CLI tool, <a rel="noopener nofollow noreferrer" href=https://www.sqlite.org/cli.html target=_blank>check out the sqlite docs</a>.<p>Finally, you need to setup that sqlite database by executing the following SQL statement:<pre class=language-sql data-lang=sql style=background:#2b303b;color:#c0c5ce><code class=language-sql data-lang=sql><span style=color:#b48ead>CREATE TABLE </span><span>`</span><span style=color:#8fa1b3>cache</span><span>` (
 </span><span>   `</span><span style=color:#a3be8c>key</span><span>` STRING </span><span style=color:#b48ead>PRIMARY KEY</span><span>,
 </span><span>   `</span><span style=color:#a3be8c>value</span><span>` </span><span style=color:#b48ead>TEXT </span><span>NOT </span><span style=color:#d08770>NULL</span><span>,
 </span><span>   `</span><span style=color:#a3be8c>expiration</span><span>` </span><span style=color:#b48ead>INT DEFAULT </span><span style=color:#d08770>0
diff --git a/docs/web/nuxt-firebase-starter/index.html b/docs/web/nuxt-firebase-starter/index.html
index f5654fd..1ac8dad 100644
--- a/docs/web/nuxt-firebase-starter/index.html
+++ b/docs/web/nuxt-firebase-starter/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Nuxt Firebase Starter | OhDoyleRules</title><meta content="Nuxt Firebase Starter | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Nuxt Firebase Starter" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/nuxt-firebase-starter/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/nuxt-firebase-starter/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Nuxt Firebase Starter" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles" name=description><meta content="An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles" itemprop=description><meta content="An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles" property=og:description><meta content="An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Nuxt Firebase Starter | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="firebase, nuxt, vue, auth, serverless, single page app, spa" itemprop=keywords><meta content="firebase, nuxt, vue, auth, serverless, single page app, spa" property=article:tag><meta content="firebase, nuxt, vue, auth, serverless, single page app, spa" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/nuxt-firebase-starter/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Nuxt Firebase Starter</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 21, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>Over the past few weeks, I have been working on <a href=https://github.com/james2doyle/nuxt-firebase-auth>a boilerplate/starting template for using the Nuxt.js framework with Firebase</a>.<p>I plan to use this boilerplate for easily creating apps that require authentication, real-time feedback from the database (chats, threads, account balances, etc.), and proper modern support for the new PWA (progressive web app) conventions (service worker, offline, code-splitting, etc.) without having to worry too much about laying the ground work each time.<p>If you already know about Nuxt and Firebase, I suggest just checking out the project and playing around with it. By default, I have setup the Nuxt PWA module, social login support for Google and Github, and also setup a database convention called “accounts” where users manage their public profile inside the application.<p>If you are unfamiliar with the tools, keep reading!<p>+++<h3 id=nuxt>Nuxt</h3><p>As you may be able to tell from this post and some of the other posts on this site, I am also a <a href=https://vuejs.org/>Vue.js</a> fan. I have been using it since before version 1 was released.<p>About four months ago, I started using a relatively new framework created on top of Vue.js (and stolen from the <a href=https://github.com/zeit/next.js/>Next.js React project</a>) called <a href=https://nuxtjs.org/>Nuxt.js</a>.<p>Essentially, Nuxt (and Next) setup conventions for routing pages, creating components, adding “stores” (flux, redux, etc.) based on a directory setup.<p>So, for example (these are taken from the Nuxt documentation), you have a structure as follows:<pre style=background:#2b303b;color:#c0c5ce><code><span>pages/
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Nuxt Firebase Starter | OhDoyleRules</title><meta content="Nuxt Firebase Starter | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Nuxt Firebase Starter" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/nuxt-firebase-starter/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/nuxt-firebase-starter/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Nuxt Firebase Starter" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles" name=description><meta content="An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles" itemprop=description><meta content="An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles" property=og:description><meta content="An example project that uses nuxt.js and Firebase for simple auth (social or email/pass) and account profiles" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Nuxt Firebase Starter | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="firebase, nuxt, vue, auth, serverless, single page app, spa" itemprop=keywords><meta content="firebase, nuxt, vue, auth, serverless, single page app, spa" property=article:tag><meta content="firebase, nuxt, vue, auth, serverless, single page app, spa" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/nuxt-firebase-starter/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Nuxt Firebase Starter</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 21, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>Over the past few weeks, I have been working on <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/nuxt-firebase-auth target=_blank>a boilerplate/starting template for using the Nuxt.js framework with Firebase</a>.<p>I plan to use this boilerplate for easily creating apps that require authentication, real-time feedback from the database (chats, threads, account balances, etc.), and proper modern support for the new PWA (progressive web app) conventions (service worker, offline, code-splitting, etc.) without having to worry too much about laying the ground work each time.<p>If you already know about Nuxt and Firebase, I suggest just checking out the project and playing around with it. By default, I have setup the Nuxt PWA module, social login support for Google and Github, and also setup a database convention called “accounts” where users manage their public profile inside the application.<p>If you are unfamiliar with the tools, keep reading!<p>+++<h3 id=nuxt>Nuxt</h3><p>As you may be able to tell from this post and some of the other posts on this site, I am also a <a rel="noopener nofollow noreferrer" href=https://vuejs.org/ target=_blank>Vue.js</a> fan. I have been using it since before version 1 was released.<p>About four months ago, I started using a relatively new framework created on top of Vue.js (and stolen from the <a rel="noopener nofollow noreferrer" href=https://github.com/zeit/next.js/ target=_blank>Next.js React project</a>) called <a rel="noopener nofollow noreferrer" href=https://nuxtjs.org/ target=_blank>Nuxt.js</a>.<p>Essentially, Nuxt (and Next) setup conventions for routing pages, creating components, adding “stores” (flux, redux, etc.) based on a directory setup.<p>So, for example (these are taken from the Nuxt documentation), you have a structure as follows:<pre style=background:#2b303b;color:#c0c5ce><code><span>pages/
 </span><span>--| _slug/
 </span><span>-----| comments.vue
 </span><span>-----| index.vue
@@ -29,4 +29,4 @@
 </span><span>    }
 </span><span>  ]
 </span><span>}
-</span></code></pre><p>You can then call <code>this.$route.params.slug</code> (for slug-comments) or <code>this.$route.params.id</code> (for users-id) inside the components or pages that are on that route.<p>Pretty slick right?<p>So Nuxt is cool. It lets me quickly create an SPA (single-page app) without worrying about setting up an elaborate route object or worrying about how to organize my projects folders and logic. You just toss files in folders, and everything pretty much works.<p>Some people <strong>hate this</strong> but I find the structure liberating. I plan to use that additional time/energy to focus on building my app and not organizing configs or fiddling with route logic.<p>Now onto the Firebase portion of the project:<hr><h3 id=firebase>Firebase</h3><p>If you have some experience with <a href=https://firebase.google.com/>Firebase</a> you probably know that it is an excellent service offering some nice features for dealing with "real-time" data as well as some other features like storage, push notifications, serverless functions, and authentication. The best part is that it is usually free for most small projects as they don't use enough resources to qualify for the paid tiers of service.<p>When I first started using Firebase, I didn't like it. The concept of <code>snapshots</code> and paths was confusing for someone coming from a key-value store or a more traditional relational database. It also lacks higher order sorting and querying. For example, you can query for ranges, but you can't query for <code>LIKE</code> or "matches/patterns”.<p>Queries like that can be limiting, but once you shift your mentality to something more like reducing and filtering, these issues disappear. You also need to be conscious about how you structure your database, <em>but I digress</em>.<p>As I got more comfortable with it, I began to see how powerful and easy it is to build things like chats, threads/commenting systems, atomic counters (“like” systems, ratings, etc.), and even used it to do browser push notifications. I am using it right now to build an API rate limiter!<hr><h3 id=combining-forces>Combining Forces!</h3><p>Using Nuxt and Firebase together has been easy. I was able to create a nice login flow (with support for Google and Github OAuth!) within about a day.<p>I also added support for this convention called “accounts”. When a new user signs up, we create an account on the Firebase database that is read-write for that user. This object contains their display name and profile image path.<p>Since we have a profile image (either pulled from the social login or assigned a default), I figured; <em>why not add support for uploading a new profile image to the Firebase storage?</em><p>So I did! And now you can easily manage a mini-profile on the app without any extra configuration. It is there by default:<div class=center><img alt="nuxt firebase account preview" src=/images/nuxt-firebase-account-preview.gif><p><small>Nuxt Firebase Account Preview</small></div><p>As you can see from the animation above, super simple interface with live updating thanks to the bindings from our application store to the Firebase database!<p>Again, you can check out the project <a href=https://github.com/james2doyle/nuxt-firebase-auth>at the repo on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>You can then call <code>this.$route.params.slug</code> (for slug-comments) or <code>this.$route.params.id</code> (for users-id) inside the components or pages that are on that route.<p>Pretty slick right?<p>So Nuxt is cool. It lets me quickly create an SPA (single-page app) without worrying about setting up an elaborate route object or worrying about how to organize my projects folders and logic. You just toss files in folders, and everything pretty much works.<p>Some people <strong>hate this</strong> but I find the structure liberating. I plan to use that additional time/energy to focus on building my app and not organizing configs or fiddling with route logic.<p>Now onto the Firebase portion of the project:<hr><h3 id=firebase>Firebase</h3><p>If you have some experience with <a rel="noopener nofollow noreferrer" href=https://firebase.google.com/ target=_blank>Firebase</a> you probably know that it is an excellent service offering some nice features for dealing with "real-time" data as well as some other features like storage, push notifications, serverless functions, and authentication. The best part is that it is usually free for most small projects as they don't use enough resources to qualify for the paid tiers of service.<p>When I first started using Firebase, I didn't like it. The concept of <code>snapshots</code> and paths was confusing for someone coming from a key-value store or a more traditional relational database. It also lacks higher order sorting and querying. For example, you can query for ranges, but you can't query for <code>LIKE</code> or "matches/patterns”.<p>Queries like that can be limiting, but once you shift your mentality to something more like reducing and filtering, these issues disappear. You also need to be conscious about how you structure your database, <em>but I digress</em>.<p>As I got more comfortable with it, I began to see how powerful and easy it is to build things like chats, threads/commenting systems, atomic counters (“like” systems, ratings, etc.), and even used it to do browser push notifications. I am using it right now to build an API rate limiter!<hr><h3 id=combining-forces>Combining Forces!</h3><p>Using Nuxt and Firebase together has been easy. I was able to create a nice login flow (with support for Google and Github OAuth!) within about a day.<p>I also added support for this convention called “accounts”. When a new user signs up, we create an account on the Firebase database that is read-write for that user. This object contains their display name and profile image path.<p>Since we have a profile image (either pulled from the social login or assigned a default), I figured; <em>why not add support for uploading a new profile image to the Firebase storage?</em><p>So I did! And now you can easily manage a mini-profile on the app without any extra configuration. It is there by default:<div class=center><img alt="nuxt firebase account preview" src=/images/nuxt-firebase-account-preview.gif><p><small>Nuxt Firebase Account Preview</small></div><p>As you can see from the animation above, super simple interface with live updating thanks to the bindings from our application store to the Firebase database!<p>Again, you can check out the project <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/nuxt-firebase-auth target=_blank>at the repo on Github</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/phalconphp-completions/index.html b/docs/web/phalconphp-completions/index.html
index 58eb394..8e4509b 100644
--- a/docs/web/phalconphp-completions/index.html
+++ b/docs/web/phalconphp-completions/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PhalconPHP Completions | OhDoyleRules</title><meta content="PhalconPHP Completions | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PhalconPHP Completions" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/phalconphp-completions/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/phalconphp-completions/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PhalconPHP Completions" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A PhalconPHP completions and snippets package for Sublime Text" name=description><meta content="A PhalconPHP completions and snippets package for Sublime Text" itemprop=description><meta content="A PhalconPHP completions and snippets package for Sublime Text" property=og:description><meta content="A PhalconPHP completions and snippets package for Sublime Text" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PhalconPHP Completions | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="sublime, phalcon, phalconphp, completions, snippet, package" itemprop=keywords><meta content="sublime, phalcon, phalconphp, completions, snippet, package" property=article:tag><meta content="sublime, phalcon, phalconphp, completions, snippet, package" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/phalconphp-completions/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PhalconPHP Completions</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 20, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>I have created a package of Sublime Text completions for <a href=http://phalconphp.com/en/>Phalcon PHP</a> 1.3.*.<p>There are <strong>414</strong> total right now. This is pretty much a copy-paste from my <a href=https://github.com/james2doyle/sublime-node-snippets>sublime-node-snippets</a> repo.<div class=center><img alt="PhalconPHP Completions in action" src=https://raw.githubusercontent.com/james2doyle/phalconphp-completions/master/testing.gif><p>PhalconPHP Completions in action</div><h2 id=installing>Installing</h2><h4 id=via-package-control>Via Package Control</h4><p>Just look for <code>phalconphp-completions</code> on <a href=https://packagecontrol.io/packages/PhalconPHP%20Completions>Package Control</a>.<h4 id=manually-adding-repo>Manually Adding Repo</h4><ul><li>Open the Commands Palette (command+shift+p)<li>Package Control: Add Repository<li>Past in this repos URL<li>Press Enter<li>Open the palette again<li>press enter on "phalconphp-completions"<li>watch it install</ul><h4 id=by-download>By Download</h4><p>Drop this folder in your Sublime Text packages directory.<h2 id=using>Using</h2><p>Pressing <code>\</code> (backslash) or <code>:</code> will end the snippet lookup.<p>Therefore, you will have better results if you <em>pretend the slashes and colons aren't needed</em>. So if you are looking for <code>Phalcon\Text::increment</code>, you would type <code>phalcontextincrement</code> and you would see the results coming up.<p><em>See the GIF above!</em><h2 id=building>Building</h2><p>I went to each page of the PhalconPHP docs, and copied the functions. Then I wrote a converter to take each function and convert it to a snippet.<p>For Example, this line:<pre style=background:#2b303b;color:#c0c5ce><code><span>Phalcon\Text::endsWith($str, $end, $ignoreCase)
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>PhalconPHP Completions | OhDoyleRules</title><meta content="PhalconPHP Completions | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="PhalconPHP Completions" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/phalconphp-completions/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/phalconphp-completions/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="PhalconPHP Completions" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A PhalconPHP completions and snippets package for Sublime Text" name=description><meta content="A PhalconPHP completions and snippets package for Sublime Text" itemprop=description><meta content="A PhalconPHP completions and snippets package for Sublime Text" property=og:description><meta content="A PhalconPHP completions and snippets package for Sublime Text" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="PhalconPHP Completions | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="sublime, phalcon, phalconphp, completions, snippet, package" itemprop=keywords><meta content="sublime, phalcon, phalconphp, completions, snippet, package" property=article:tag><meta content="sublime, phalcon, phalconphp, completions, snippet, package" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/phalconphp-completions/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">PhalconPHP Completions</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>March 20, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>I have created a package of Sublime Text completions for <a rel="noopener nofollow noreferrer" href=http://phalconphp.com/en/ target=_blank>Phalcon PHP</a> 1.3.*.<p>There are <strong>414</strong> total right now. This is pretty much a copy-paste from my <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/sublime-node-snippets target=_blank>sublime-node-snippets</a> repo.<div class=center><img alt="PhalconPHP Completions in action" src=https://raw.githubusercontent.com/james2doyle/phalconphp-completions/master/testing.gif><p>PhalconPHP Completions in action</div><h2 id=installing>Installing</h2><h4 id=via-package-control>Via Package Control</h4><p>Just look for <code>phalconphp-completions</code> on <a rel="noopener nofollow noreferrer" href=https://packagecontrol.io/packages/PhalconPHP%20Completions target=_blank>Package Control</a>.<h4 id=manually-adding-repo>Manually Adding Repo</h4><ul><li>Open the Commands Palette (command+shift+p)<li>Package Control: Add Repository<li>Past in this repos URL<li>Press Enter<li>Open the palette again<li>press enter on "phalconphp-completions"<li>watch it install</ul><h4 id=by-download>By Download</h4><p>Drop this folder in your Sublime Text packages directory.<h2 id=using>Using</h2><p>Pressing <code>\</code> (backslash) or <code>:</code> will end the snippet lookup.<p>Therefore, you will have better results if you <em>pretend the slashes and colons aren't needed</em>. So if you are looking for <code>Phalcon\Text::increment</code>, you would type <code>phalcontextincrement</code> and you would see the results coming up.<p><em>See the GIF above!</em><h2 id=building>Building</h2><p>I went to each page of the PhalconPHP docs, and copied the functions. Then I wrote a converter to take each function and convert it to a snippet.<p>For Example, this line:<pre style=background:#2b303b;color:#c0c5ce><code><span>Phalcon\Text::endsWith($str, $end, $ignoreCase)
 </span></code></pre><p>Is going to get converted to:<pre style=background:#2b303b;color:#c0c5ce><code><span>Phalcon\\Text::endsWith(\\$${1:str}, \\$${2:end}, \\$${3:ignoreCase});${0}
 </span></code></pre><h2 id=sources-txt>sources.txt</h2><p>This file is cool. It is just a line-by-line output of the Phalcon docs functions. This is the file that is parsed to generate the snippets.<h2 id=running-the-build>Running The Build</h2><p>Just run <code>node build.js</code> and it will rake the <code>sources.txt</code> file and then write the new snippet in the snippets folder.<p>Everything before the first <code>(</code> will be used as the filename.<h2 id=adding-new-snippets>Adding New Snippets</h2><p>Here is how I quickly got all these snippets.<p>First, I went to the docs for the class, and I looked to see what the code examples were wrapped in. For the all the docs pages, the methods and properties are show in a <code>p.method-signature</code> element.<p>So to quickly get the list, I ran the following code:<pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#ebcb8b>Array</span><span>.prototype.</span><span style=color:#bf616a>slice</span><span>.</span><span style=color:#96b5b4>call</span><span>(document.</span><span style=color:#96b5b4>querySelectorAll</span><span>("</span><span style=color:#a3be8c>.method-signature</span><span>"), </span><span style=color:#d08770>0</span><span>).</span><span style=color:#8fa1b3>map</span><span>(</span><span style=color:#b48ead>function</span><span>(</span><span style=color:#bf616a>item</span><span>){
 </span><span>  </span><span style=color:#b48ead>return </span><span style=color:#bf616a>item</span><span>.</span><span style=color:#bf616a>textContent</span><span>.</span><span style=color:#8fa1b3>trim</span><span>();
diff --git a/docs/web/radio-checkboxes/index.html b/docs/web/radio-checkboxes/index.html
index 3f8b1b7..f9133b9 100644
--- a/docs/web/radio-checkboxes/index.html
+++ b/docs/web/radio-checkboxes/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Styling radio and checkbox inputs | OhDoyleRules</title><meta content="Styling radio and checkbox inputs | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Styling radio and checkbox inputs" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/radio-checkboxes/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/radio-checkboxes/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Styling radio and checkbox inputs" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs" name=description><meta content="Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs" itemprop=description><meta content="Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs" property=og:description><meta content="Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Styling radio and checkbox inputs | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="checkbox, CSS, HTML, input, radio, styling" itemprop=keywords><meta content="checkbox, CSS, HTML, input, radio, styling" property=article:tag><meta content="checkbox, CSS, HTML, input, radio, styling" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/radio-checkboxes/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Styling radio and checkbox inputs</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 07, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs. Especially when it comes to radio and checkboxes. I will always prefer using CSS instead of images for obvious reasons. But for radios and checkboxes I normally use images. I usually just make a png sprite and use the :checked selector to move its position.<p>But now, I have discovered a new way! I took the idea from <a href=http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/>CSS Tricks</a>/<a title="WuFoo Forms Example" href=https://examples.wufoo.com/forms/custom-checkboxes-and-radio-buttons/>Wufoo Forms</a>. It basically uses the label as the element. You hide the input tag and then style the label with checked and unchecked states.<div class=center><img alt="End Results" src=/images/radio-checkboxes.png></div><pre style=background:#2b303b;color:#c0c5ce><code><span>/* style this span element so we can display nicely, this styling is not necessary */
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Styling radio and checkbox inputs | OhDoyleRules</title><meta content="Styling radio and checkbox inputs | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Styling radio and checkbox inputs" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/radio-checkboxes/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/radio-checkboxes/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Styling radio and checkbox inputs" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs" name=description><meta content="Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs" itemprop=description><meta content="Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs" property=og:description><meta content="Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Styling radio and checkbox inputs | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="checkbox, CSS, HTML, input, radio, styling" itemprop=keywords><meta content="checkbox, CSS, HTML, input, radio, styling" property=article:tag><meta content="checkbox, CSS, HTML, input, radio, styling" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/radio-checkboxes/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Styling radio and checkbox inputs</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 07, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>Styling inputs can be pretty annoying. I don’t think I really have any consistent way of making custom inputs. Especially when it comes to radio and checkboxes. I will always prefer using CSS instead of images for obvious reasons. But for radios and checkboxes I normally use images. I usually just make a png sprite and use the :checked selector to move its position.<p>But now, I have discovered a new way! I took the idea from <a rel="noopener nofollow noreferrer" href=http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/ target=_blank>CSS Tricks</a>/<a rel="noopener nofollow noreferrer" title="WuFoo Forms Example" href=https://examples.wufoo.com/forms/custom-checkboxes-and-radio-buttons/ target=_blank>Wufoo Forms</a>. It basically uses the label as the element. You hide the input tag and then style the label with checked and unchecked states.<div class=center><img alt="End Results" src=/images/radio-checkboxes.png></div><pre style=background:#2b303b;color:#c0c5ce><code><span>/* style this span element so we can display nicely, this styling is not necessary */
 </span><span>span {
 </span><span>    margin: 10px 0;
 </span><span>    display: block;
@@ -42,4 +42,4 @@
 </span><span>  &LTinput id="Check1" name="Checks" type="checkbox" value="Item 1">
 </span><span>  &LTlabel for="Check1">Item 1&LT/label>
 </span><span>&LT/span>
-</span></code></pre><p>The text inside the label will be the text displayed as your button. You must have the ID and FOR attributes on the input and labels. Removing those will break the functionality. As always I have added a little <a title="Styling radios and checkboxes jsFiddle demo" href=http://jsfiddle.net/james2doyle/YB5c3/>jsFiddle demo</a> into the mix.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>The text inside the label will be the text displayed as your button. You must have the ID and FOR attributes on the input and labels. Removing those will break the functionality. As always I have added a little <a rel="noopener nofollow noreferrer" title="Styling radios and checkboxes jsFiddle demo" href=http://jsfiddle.net/james2doyle/YB5c3/ target=_blank>jsFiddle demo</a> into the mix.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/simple-benchmarks-with-apache-ab/index.html b/docs/web/simple-benchmarks-with-apache-ab/index.html
index 35685e6..de555a0 100644
--- a/docs/web/simple-benchmarks-with-apache-ab/index.html
+++ b/docs/web/simple-benchmarks-with-apache-ab/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Simple Benchmarks With Apache AB | OhDoyleRules</title><meta content="Simple Benchmarks With Apache AB | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Simple Benchmarks With Apache AB" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Simple Benchmarks With Apache AB" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="a tutorial for generating simple benchmarks using the Apache ab tool" name=description><meta content="a tutorial for generating simple benchmarks using the Apache ab tool" itemprop=description><meta content="a tutorial for generating simple benchmarks using the Apache ab tool" property=og:description><meta content="a tutorial for generating simple benchmarks using the Apache ab tool" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Simple Benchmarks With Apache AB | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="ab, apache, bench, load, test, request, mock, performance, response" itemprop=keywords><meta content="ab, apache, bench, load, test, request, mock, performance, response" property=article:tag><meta content="ab, apache, bench, load, test, request, mock, performance, response" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Simple Benchmarks With Apache AB</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 22, 2015</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=why-benchmark>Why Benchmark?</h3><p>Did you know that Apache has a benchmarking tool for testing the HTTP server? It is called <a title="Apache ab" href=http://httpd.apache.org/docs/2.4/programs/ab.html>ab</a>, and it is pretty great!<p>As your site grows in popularity, complexity, or size, you will want to test the site to see how it preforms. Having the site crash or lock up during peak time can be devastating for a small blog or e-commerce site. It means lost revenue, and can leave a visitor with a bad impression of your site. This can drive them to generate a bad referral, or worse, go to your competitor.<p>Users aren't going to care if your site is being bombarded with traffic constantly, they really only care about <em>their own personal experience</em>.<p><a href="https://blog.kissmetrics.com/loading-time/?wide=1" title="Kiss Metrics loading time infographic">Studies and analytics show</a> that the slower your site is, the impact on your sales or target actions is affected exponentially.<h3 id=getting-ab>Getting ab</h3><p>The <code>ab</code> tool can be found in most default Apache (httpd 2.2 and 2.4) setups. If you don't have it, you can install the <code>apache2-utils</code> package and get it from there.<h3 id=testing>Testing</h3><p>I found <a title="Load testing apache with ab apache bench" href=https://www.devside.net/wamp-server/load-testing-apache-with-ab-apache-bench>a great article on this site</a> that explains a lot of details about using ab, setting up Apache, configuring PHP, and information about the results. You should check it out.<p>I used the following script, based on that article above, that tests a site in succession and prints the results to a file.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/1b77386317af93a0e5b2.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/1b77386317af93a0e5b2.js src=about:blank></iframe><p>To run the script, download it and unzip it. Then run <code>chmod +x bench.sh</code> to allow the script to run. Then you can use <code>./bench</code> and the script will begin.<p>The article I linked to above mentioned using a <a title="Load testing apache with ab apache bench" href=https://www.devside.net/wamp-server/load-testing-apache-with-ab-apache-bench>delay of 4 minutes</a> between running <code>ab</code>.<p>Be careful using <code>ab</code>, as it essentially emulates a DDOS attack, in that it generates as many requests as possible as fast as possible. There is no delay option in ab, so there is no way to emulate something like "10 hits every 10 seconds" or anything like that.<h3 id=results>Results</h3><p>Here are the things you are going to want to pay attention to. These definitions are taken from the <a title="Apache ab" href=http://httpd.apache.org/docs/2.4/programs/ab.html>ab site</a>.<ul><li><strong>Failed requests:</strong> The number of requests that were considered a failure. If the number is greater than zero, another line will be printed showing the number of requests that failed due to connecting, reading, incorrect content length, or exceptions.<li><strong>Non-2xx responses:</strong> The number of responses that were not in the 200 series of response codes. If all responses were 200, this field is not printed.<li><strong>Requests per second:</strong> This is the number of requests per second. This value is the result of dividing the number of requests by the total time taken.<li><strong>Time per request:</strong> The average time spent per request. The first value is calculated with the formula (concurrency * timetaken * 1000 / done) while the second value is calculated with the formula (timetaken * 1000 / done).</ul><p>Failures and errors are generally not good. You should check your logs for anything that happened during your requests.<p>For <em>Requests Per Second</em>, this tells you how quickly your site was able to process all those requests. Higher is better because it means that your site was able to serve the content without hiccups.<p>The <em>Time Per Request</em>, although that article says it isn't important in the context of ab, I think it is still important to watch. This metric tells you how long the average request takes. Keep in mind we don't have javascript running, or</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Simple Benchmarks With Apache AB | OhDoyleRules</title><meta content="Simple Benchmarks With Apache AB | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Simple Benchmarks With Apache AB" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Simple Benchmarks With Apache AB" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="a tutorial for generating simple benchmarks using the Apache ab tool" name=description><meta content="a tutorial for generating simple benchmarks using the Apache ab tool" itemprop=description><meta content="a tutorial for generating simple benchmarks using the Apache ab tool" property=og:description><meta content="a tutorial for generating simple benchmarks using the Apache ab tool" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Simple Benchmarks With Apache AB | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="ab, apache, bench, load, test, request, mock, performance, response" itemprop=keywords><meta content="ab, apache, bench, load, test, request, mock, performance, response" property=article:tag><meta content="ab, apache, bench, load, test, request, mock, performance, response" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/simple-benchmarks-with-apache-ab/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Simple Benchmarks With Apache AB</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 22, 2015</span></span><div itemprop="ArticleBody text" class=main-content><h3 id=why-benchmark>Why Benchmark?</h3><p>Did you know that Apache has a benchmarking tool for testing the HTTP server? It is called <a rel="noopener nofollow noreferrer" title="Apache ab" href=http://httpd.apache.org/docs/2.4/programs/ab.html target=_blank>ab</a>, and it is pretty great!<p>As your site grows in popularity, complexity, or size, you will want to test the site to see how it preforms. Having the site crash or lock up during peak time can be devastating for a small blog or e-commerce site. It means lost revenue, and can leave a visitor with a bad impression of your site. This can drive them to generate a bad referral, or worse, go to your competitor.<p>Users aren't going to care if your site is being bombarded with traffic constantly, they really only care about <em>their own personal experience</em>.<p><a href="https://blog.kissmetrics.com/loading-time/?wide=1" rel="noopener nofollow noreferrer" title="Kiss Metrics loading time infographic" target=_blank>Studies and analytics show</a> that the slower your site is, the impact on your sales or target actions is affected exponentially.<h3 id=getting-ab>Getting ab</h3><p>The <code>ab</code> tool can be found in most default Apache (httpd 2.2 and 2.4) setups. If you don't have it, you can install the <code>apache2-utils</code> package and get it from there.<h3 id=testing>Testing</h3><p>I found <a rel="noopener nofollow noreferrer" title="Load testing apache with ab apache bench" href=https://www.devside.net/wamp-server/load-testing-apache-with-ab-apache-bench target=_blank>a great article on this site</a> that explains a lot of details about using ab, setting up Apache, configuring PHP, and information about the results. You should check it out.<p>I used the following script, based on that article above, that tests a site in succession and prints the results to a file.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/1b77386317af93a0e5b2.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/1b77386317af93a0e5b2.js src=about:blank></iframe><p>To run the script, download it and unzip it. Then run <code>chmod +x bench.sh</code> to allow the script to run. Then you can use <code>./bench</code> and the script will begin.<p>The article I linked to above mentioned using a <a rel="noopener nofollow noreferrer" title="Load testing apache with ab apache bench" href=https://www.devside.net/wamp-server/load-testing-apache-with-ab-apache-bench target=_blank>delay of 4 minutes</a> between running <code>ab</code>.<p>Be careful using <code>ab</code>, as it essentially emulates a DDOS attack, in that it generates as many requests as possible as fast as possible. There is no delay option in ab, so there is no way to emulate something like "10 hits every 10 seconds" or anything like that.<h3 id=results>Results</h3><p>Here are the things you are going to want to pay attention to. These definitions are taken from the <a rel="noopener nofollow noreferrer" title="Apache ab" href=http://httpd.apache.org/docs/2.4/programs/ab.html target=_blank>ab site</a>.<ul><li><strong>Failed requests:</strong> The number of requests that were considered a failure. If the number is greater than zero, another line will be printed showing the number of requests that failed due to connecting, reading, incorrect content length, or exceptions.<li><strong>Non-2xx responses:</strong> The number of responses that were not in the 200 series of response codes. If all responses were 200, this field is not printed.<li><strong>Requests per second:</strong> This is the number of requests per second. This value is the result of dividing the number of requests by the total time taken.<li><strong>Time per request:</strong> The average time spent per request. The first value is calculated with the formula (concurrency * timetaken * 1000 / done) while the second value is calculated with the formula (timetaken * 1000 / done).</ul><p>Failures and errors are generally not good. You should check your logs for anything that happened during your requests.<p>For <em>Requests Per Second</em>, this tells you how quickly your site was able to process all those requests. Higher is better because it means that your site was able to serve the content without hiccups.<p>The <em>Time Per Request</em>, although that article says it isn't important in the context of ab, I think it is still important to watch. This metric tells you how long the average request takes. Keep in mind we don't have javascript running, or</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/simple-slash-commands/index.html b/docs/web/simple-slash-commands/index.html
index 9508e28..063e530 100644
--- a/docs/web/simple-slash-commands/index.html
+++ b/docs/web/simple-slash-commands/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Simple Slack Slash Supplier | OhDoyleRules</title><meta content="Simple Slack Slash Supplier | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Simple Slack Slash Supplier" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/simple-slash-commands/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/simple-slash-commands/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Simple Slack Slash Supplier" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses" name=description><meta content="A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses" itemprop=description><meta content="A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses" property=og:description><meta content="A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Simple Slack Slash Supplier | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="slack, slash, commands, node, lambda" itemprop=keywords><meta content="slack, slash, commands, node, lambda" property=article:tag><meta content="slack, slash, commands, node, lambda" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/simple-slash-commands/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Simple Slack Slash Supplier</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 13, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p><em>This is a reprint of the README from my project <a href=https://github.com/james2doyle/simple-slack-slash-supplier>simple-slack-slash-supplier</a>.</em><p>This examples project showcases a simple way to create new slash commands without having to work too hard.<p>This example assumes you have access to <a href=https://aws.amazon.com/lambda/>AWS Lambda</a> as well as have <a href=https://api.slack.com/slash-commands>created a Slash command in Slack</a>.<h3 id=handling-application-x-www-form-urlencoded>Handling <code>application/x-www-form-urlencoded</code></h3><p>Slack sends their <code>POST</code> requests using <code>Content-Type: application/x-www-form-urlencoded</code>. This is not a content type that Lambda supports out-of-the-box. We need to do some legwork in order to map that raw request body to <code>JSON</code> which we can understand more easily in our Node.js handler function.<p>Preliminary setup:<ul><li>You must create a standalone <code>POST</code> resource action<li>Be sure "Integration type" is set to "Lambda Function"<li>Make sure <code>Use Lambda Proxy integration</code> is checked<li>Remove the original <code>ANY</code> resource action to be sure it doesn't conflict</ul><h4 id=mapping-templates>Mapping templates</h4><p>In order to properly handle <code>application/x-www-form-urlencoded</code>, we need to make a mapping template for it.<p>Here are the steps:<ul><li>Click on "Integration Request" when viewing the details of your <code>POST</code> resource action<li>Pop open the "Mapping templates" accordion<li>Click "Add mapping template"<li>Use <code>application/x-www-form-urlencoded</code> in the field that appears<li>Scroll down and see the new form to enter in your template details<li>Select "Method request passthrough" from the "Generate template" dropdown<li>Put the following content in the textarea:</ul><pre style=background:#2b303b;color:#c0c5ce><code><span>##  Ripped from "https://stackoverflow.com/a/52705985/1170664"
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Simple Slack Slash Supplier | OhDoyleRules</title><meta content="Simple Slack Slash Supplier | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Simple Slack Slash Supplier" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/simple-slash-commands/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/simple-slash-commands/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Simple Slack Slash Supplier" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses" name=description><meta content="A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses" itemprop=description><meta content="A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses" property=og:description><meta content="A lambda function that provides a simple mechanism for mapping Slack slash commands to pre-built responses" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Simple Slack Slash Supplier | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="slack, slash, commands, node, lambda" itemprop=keywords><meta content="slack, slash, commands, node, lambda" property=article:tag><meta content="slack, slash, commands, node, lambda" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/simple-slash-commands/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Simple Slack Slash Supplier</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 13, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p><em>This is a reprint of the README from my project <a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/simple-slack-slash-supplier target=_blank>simple-slack-slash-supplier</a>.</em><p>This examples project showcases a simple way to create new slash commands without having to work too hard.<p>This example assumes you have access to <a rel="noopener nofollow noreferrer" href=https://aws.amazon.com/lambda/ target=_blank>AWS Lambda</a> as well as have <a rel="noopener nofollow noreferrer" href=https://api.slack.com/slash-commands target=_blank>created a Slash command in Slack</a>.<h3 id=handling-application-x-www-form-urlencoded>Handling <code>application/x-www-form-urlencoded</code></h3><p>Slack sends their <code>POST</code> requests using <code>Content-Type: application/x-www-form-urlencoded</code>. This is not a content type that Lambda supports out-of-the-box. We need to do some legwork in order to map that raw request body to <code>JSON</code> which we can understand more easily in our Node.js handler function.<p>Preliminary setup:<ul><li>You must create a standalone <code>POST</code> resource action<li>Be sure "Integration type" is set to "Lambda Function"<li>Make sure <code>Use Lambda Proxy integration</code> is checked<li>Remove the original <code>ANY</code> resource action to be sure it doesn't conflict</ul><h4 id=mapping-templates>Mapping templates</h4><p>In order to properly handle <code>application/x-www-form-urlencoded</code>, we need to make a mapping template for it.<p>Here are the steps:<ul><li>Click on "Integration Request" when viewing the details of your <code>POST</code> resource action<li>Pop open the "Mapping templates" accordion<li>Click "Add mapping template"<li>Use <code>application/x-www-form-urlencoded</code> in the field that appears<li>Scroll down and see the new form to enter in your template details<li>Select "Method request passthrough" from the "Generate template" dropdown<li>Put the following content in the textarea:</ul><pre style=background:#2b303b;color:#c0c5ce><code><span>##  Ripped from "https://stackoverflow.com/a/52705985/1170664"
 </span><span>{
 </span><span>    "body-json" : $input.json('$'),
 </span><span>    "params" : {
diff --git a/docs/web/simple-spam-stopper/index.html b/docs/web/simple-spam-stopper/index.html
index d393303..8672f1a 100644
--- a/docs/web/simple-spam-stopper/index.html
+++ b/docs/web/simple-spam-stopper/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>The Simple Spam Stopper | OhDoyleRules</title><meta content="The Simple Spam Stopper | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="The Simple Spam Stopper" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/simple-spam-stopper/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/simple-spam-stopper/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="The Simple Spam Stopper" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="For the last year at WARPAINT Media, we have been getting assaulted with spam." name=description><meta content="For the last year at WARPAINT Media, we have been getting assaulted with spam." itemprop=description><meta content="For the last year at WARPAINT Media, we have been getting assaulted with spam." property=og:description><meta content="For the last year at WARPAINT Media, we have been getting assaulted with spam." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="The Simple Spam Stopper | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="spam, email, contact, form, captcha, recaptcha, fields, validation, honey, pot" itemprop=keywords><meta content="spam, email, contact, form, captcha, recaptcha, fields, validation, honey, pot" property=article:tag><meta content="spam, email, contact, form, captcha, recaptcha, fields, validation, honey, pot" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/simple-spam-stopper/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">The Simple Spam Stopper</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>For the last year at <a href=http://warpaintmedia.ca>WARPAINT Media</a>, we have been getting assaulted with spam. Everything from "Chinese Jerseys" and "Super SEO Ultra Elite Package Extreme" offers.<p>We are using <a href=http://pyrocms.com>PyroCMS</a> for the website. The default contact plugin is pretty awesome. It has some really great features and couldn't be easier to use. There is a little <a href="http://www.sitepoint.com/forums/showthread.php?946120-Spam-Honey-Pot-trap&s=9cfd3419319d5c9bd1f5d597cdfa6113&p=5278832&viewfull=1#post5278832">honeypot</a> for spam bots, but it seems to not be doing a great job, at least for us.<p>The great thing about the Pyro contact form is that it lets the developer define some validation without much work. In the past I have added questions like <em>"what is one plus one? (use a number)"</em>, other times I have tried <em>"are you a human?"</em> with a dropdown. Both seemed fine. But I wanted something a little more transparent and more conventional than strange questions about math or your species.<p>The solution that I came up with was, 2 email fields. That's it. I have one that is called "email" and another field that is called "check". When the user submits the form, the email and check field and validated. The rules for them are that they need to be identical, <em>but</em> they also need to be valid emails.<p>So there is a sort of a double validation going on. They need to be putting in a real email and they need to know that the email needs to match the check field. The label for this second check field is just "Enter Your Email Again". Since it comes after the first field with an Email label, people tend to figure it out.<p>How about the results? Well we used to get about 10-20 spam per day. Now we get about 1-3 a week and none of them are from our websites contact form.<h4 id=tl-dr>Tl;Dr</h4><p>I added a second email input and practically eliminated our spam.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>The Simple Spam Stopper | OhDoyleRules</title><meta content="The Simple Spam Stopper | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="The Simple Spam Stopper" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/simple-spam-stopper/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/simple-spam-stopper/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="The Simple Spam Stopper" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="For the last year at WARPAINT Media, we have been getting assaulted with spam." name=description><meta content="For the last year at WARPAINT Media, we have been getting assaulted with spam." itemprop=description><meta content="For the last year at WARPAINT Media, we have been getting assaulted with spam." property=og:description><meta content="For the last year at WARPAINT Media, we have been getting assaulted with spam." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="The Simple Spam Stopper | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="spam, email, contact, form, captcha, recaptcha, fields, validation, honey, pot" itemprop=keywords><meta content="spam, email, contact, form, captcha, recaptcha, fields, validation, honey, pot" property=article:tag><meta content="spam, email, contact, form, captcha, recaptcha, fields, validation, honey, pot" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/simple-spam-stopper/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">The Simple Spam Stopper</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 27, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>For the last year at <a rel="noopener nofollow noreferrer" href=http://warpaintmedia.ca target=_blank>WARPAINT Media</a>, we have been getting assaulted with spam. Everything from "Chinese Jerseys" and "Super SEO Ultra Elite Package Extreme" offers.<p>We are using <a rel="noopener nofollow noreferrer" href=http://pyrocms.com target=_blank>PyroCMS</a> for the website. The default contact plugin is pretty awesome. It has some really great features and couldn't be easier to use. There is a little <a href="http://www.sitepoint.com/forums/showthread.php?946120-Spam-Honey-Pot-trap&s=9cfd3419319d5c9bd1f5d597cdfa6113&p=5278832&viewfull=1#post5278832" rel="noopener nofollow noreferrer" target=_blank>honeypot</a> for spam bots, but it seems to not be doing a great job, at least for us.<p>The great thing about the Pyro contact form is that it lets the developer define some validation without much work. In the past I have added questions like <em>"what is one plus one? (use a number)"</em>, other times I have tried <em>"are you a human?"</em> with a dropdown. Both seemed fine. But I wanted something a little more transparent and more conventional than strange questions about math or your species.<p>The solution that I came up with was, 2 email fields. That's it. I have one that is called "email" and another field that is called "check". When the user submits the form, the email and check field and validated. The rules for them are that they need to be identical, <em>but</em> they also need to be valid emails.<p>So there is a sort of a double validation going on. They need to be putting in a real email and they need to know that the email needs to match the check field. The label for this second check field is just "Enter Your Email Again". Since it comes after the first field with an Email label, people tend to figure it out.<p>How about the results? Well we used to get about 10-20 spam per day. Now we get about 1-3 a week and none of them are from our websites contact form.<h4 id=tl-dr>Tl;Dr</h4><p>I added a second email input and practically eliminated our spam.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/slack-url-meta-data/index.html b/docs/web/slack-url-meta-data/index.html
index bac3abe..375a74d 100644
--- a/docs/web/slack-url-meta-data/index.html
+++ b/docs/web/slack-url-meta-data/index.html
@@ -1,13 +1,13 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Slack Meta Data For URLs and Links | OhDoyleRules</title><meta content="Slack Meta Data For URLs and Links | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Slack Meta Data For URLs and Links" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/slack-url-meta-data/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/slack-url-meta-data/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Slack Meta Data For URLs and Links" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Tips to get Slack to resolve the correct meta data for your website URL" name=description><meta content="Tips to get Slack to resolve the correct meta data for your website URL" itemprop=description><meta content="Tips to get Slack to resolve the correct meta data for your website URL" property=og:description><meta content="Tips to get Slack to resolve the correct meta data for your website URL" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Slack Meta Data For URLs and Links | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="slack, meta, data, website, tag, url, link, image, issues, fixes, list, test" itemprop=keywords><meta content="slack, meta, data, website, tag, url, link, image, issues, fixes, list, test" property=article:tag><meta content="slack, meta, data, website, tag, url, link, image, issues, fixes, list, test" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/slack-url-meta-data/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Slack Meta Data For URLs and Links</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>If you use <a href=https://slack.com/>Slack</a>, then you have probably noticed the awesome feature they have for generating nice meta data whenever you paste a URL or an image.<div class=center><a title="Slack meta tag fetching example" href=/images/slack-example.png target=_blank><img alt="Slack meta tag fetching example" src=/images/slack-example.png></a></div><p>That is pretty slick! So how does it know what to grab for us?<p>From the Slack website:<blockquote><p>It fetches as little of the page as it can (using HTTP Range headers) to extract meta tags about the content. Specifically, we are looking for <a href=http://oembed.com/ target=_blank>oEmbed</a> and <a href=https://dev.twitter.com/docs/cards target=_blank>Twitter Card</a> / <a href=http://ogp.me/ target=_blank>Open Graph</a> tags. If a page's tags refer to an image, video, or audio file, we will fetch that file as well to check validity and extract other metadata.</blockquote><p>I've never used <em>oEmbed</em>, so I am going to skip that.<p>Let's break down each part of the resulting meta fetch by Slack. Here is what we have, and the order it appears.<ul><li>WARPAINT Media (Site Title)<li>Homepage | WARPAINT Media (Page Title)<li>WARPAINT Media specializes in improving customer experience through marketing, design, analytics, and development. (Meta Description)</ul><p>Now we can look at the Open Graph meta tags that are being used to generate these results:<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>property</span><span>="</span><span style=color:#a3be8c>og:site_name</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>WARPAINT Media</span><span>">
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Slack Meta Data For URLs and Links | OhDoyleRules</title><meta content="Slack Meta Data For URLs and Links | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Slack Meta Data For URLs and Links" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/slack-url-meta-data/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/slack-url-meta-data/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Slack Meta Data For URLs and Links" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Tips to get Slack to resolve the correct meta data for your website URL" name=description><meta content="Tips to get Slack to resolve the correct meta data for your website URL" itemprop=description><meta content="Tips to get Slack to resolve the correct meta data for your website URL" property=og:description><meta content="Tips to get Slack to resolve the correct meta data for your website URL" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Slack Meta Data For URLs and Links | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="slack, meta, data, website, tag, url, link, image, issues, fixes, list, test" itemprop=keywords><meta content="slack, meta, data, website, tag, url, link, image, issues, fixes, list, test" property=article:tag><meta content="slack, meta, data, website, tag, url, link, image, issues, fixes, list, test" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/slack-url-meta-data/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Slack Meta Data For URLs and Links</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 31, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>If you use <a rel="noopener nofollow noreferrer" href=https://slack.com/ target=_blank>Slack</a>, then you have probably noticed the awesome feature they have for generating nice meta data whenever you paste a URL or an image.<div class=center><a title="Slack meta tag fetching example" href=/images/slack-example.png target=_blank><img alt="Slack meta tag fetching example" src=/images/slack-example.png></a></div><p>That is pretty slick! So how does it know what to grab for us?<p>From the Slack website:<blockquote><p>It fetches as little of the page as it can (using HTTP Range headers) to extract meta tags about the content. Specifically, we are looking for <a href=http://oembed.com/ target=_blank>oEmbed</a> and <a href=https://dev.twitter.com/docs/cards target=_blank>Twitter Card</a> / <a href=http://ogp.me/ target=_blank>Open Graph</a> tags. If a page's tags refer to an image, video, or audio file, we will fetch that file as well to check validity and extract other metadata.</blockquote><p>I've never used <em>oEmbed</em>, so I am going to skip that.<p>Let's break down each part of the resulting meta fetch by Slack. Here is what we have, and the order it appears.<ul><li>WARPAINT Media (Site Title)<li>Homepage | WARPAINT Media (Page Title)<li>WARPAINT Media specializes in improving customer experience through marketing, design, analytics, and development. (Meta Description)</ul><p>Now we can look at the Open Graph meta tags that are being used to generate these results:<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>property</span><span>="</span><span style=color:#a3be8c>og:site_name</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>WARPAINT Media</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>property</span><span>="</span><span style=color:#a3be8c>og:title</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>Homepage | WARPAINT Media</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>property</span><span>="</span><span style=color:#a3be8c>og:description</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>WARPAINT Media specializes in improving customer experience through marketing, design, analytics, and development.</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>property</span><span>="</span><span style=color:#a3be8c>og:image</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>http://warpaintmedia.ca/img/meta-image.jpg</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>property</span><span>="</span><span style=color:#a3be8c>og:url</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>http://warpaintmedia.ca</span><span>">
-</span></code></pre><p>Open Graph tags are pretty popular. The biggest user of Open Graph is Facebook. Here is the result when the link is shared on Facebook:<div class=center><a title="Facebook meta tag fetching example" href=/images/warpaint-facebook.png target=_blank><img alt="Facebook meta tag fetching example" src=/images/warpaint-facebook.png></a></div><p>Make sure you test your tags using the <a href=https://developers.facebook.com/tools/debug/og/object/>Facebook Open Graph Object Debugger</a>. This will help you spot errors in your tags. If there are errors, <strong>Slack will not load the content</strong>. You need to have valid tags to make Slack work nicely.<p>How about the <a href=https://dev.twitter.com/cards/overview>Twitter Card</a> meta tags?<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>twitter:card</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>summary_large_image</span><span>">
+</span></code></pre><p>Open Graph tags are pretty popular. The biggest user of Open Graph is Facebook. Here is the result when the link is shared on Facebook:<div class=center><a title="Facebook meta tag fetching example" href=/images/warpaint-facebook.png target=_blank><img alt="Facebook meta tag fetching example" src=/images/warpaint-facebook.png></a></div><p>Make sure you test your tags using the <a rel="noopener nofollow noreferrer" href=https://developers.facebook.com/tools/debug/og/object/ target=_blank>Facebook Open Graph Object Debugger</a>. This will help you spot errors in your tags. If there are errors, <strong>Slack will not load the content</strong>. You need to have valid tags to make Slack work nicely.<p>How about the <a rel="noopener nofollow noreferrer" href=https://dev.twitter.com/cards/overview target=_blank>Twitter Card</a> meta tags?<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>twitter:card</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>summary_large_image</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>twitter:title</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>Homepage | WARPAINT Media</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>twitter:description</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>WARPAINT Media specializes in improving customer experience through marketing, design, analytics, and development.</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>twitter:site</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>@warpaintmedia</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>twitter:creator</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>@warpaintmedia</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>twitter:url</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>http://warpaintmedia.ca</span><span>">
 </span><span><</span><span style=color:#bf616a>meta </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>twitter:image:src</span><span>" </span><span style=color:#d08770>content</span><span>="</span><span style=color:#a3be8c>http://warpaintmedia.ca/img/meta-image.jpg</span><span>">
-</span></code></pre><p>As you noticed, there is no "site title" being set. You can also see in the screenshot that Twitter doesn't really care about the site title, they just show the page title. If that was something you wanted to adjust, then you would tweak the <code>twitter:title</code> tag to reflect what you wanted for a page title.<p>Now you may have copied these Twitter meta tags and pasted them in your site and filled in your information. That <strong>will not work</strong>. You need to use the <a href=https://cards-dev.twitter.com/validator>Twitter Card Validator</a> to test, and then register, your account and URL.<p>When you</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>As you noticed, there is no "site title" being set. You can also see in the screenshot that Twitter doesn't really care about the site title, they just show the page title. If that was something you wanted to adjust, then you would tweak the <code>twitter:title</code> tag to reflect what you wanted for a page title.<p>Now you may have copied these Twitter meta tags and pasted them in your site and filled in your information. That <strong>will not work</strong>. You need to use the <a rel="noopener nofollow noreferrer" href=https://cards-dev.twitter.com/validator target=_blank>Twitter Card Validator</a> to test, and then register, your account and URL.<p>When you</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/source-code-pro-sublime/index.html b/docs/web/source-code-pro-sublime/index.html
index 6088393..f0fca96 100644
--- a/docs/web/source-code-pro-sublime/index.html
+++ b/docs/web/source-code-pro-sublime/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Source Code Pro on Sublime Text | OhDoyleRules</title><meta content="Source Code Pro on Sublime Text | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Source Code Pro on Sublime Text" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/source-code-pro-sublime/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/source-code-pro-sublime/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Source Code Pro on Sublime Text" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Download and install Source Code Pro on Sublime Text" name=description><meta content="Download and install Source Code Pro on Sublime Text" itemprop=description><meta content="Download and install Source Code Pro on Sublime Text" property=og:description><meta content="Download and install Source Code Pro on Sublime Text" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Source Code Pro on Sublime Text | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="adobe, font, source code pro, sublime, syntax, text" itemprop=keywords><meta content="adobe, font, source code pro, sublime, syntax, text" property=article:tag><meta content="adobe, font, source code pro, sublime, syntax, text" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/source-code-pro-sublime/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Source Code Pro on Sublime Text</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 19, 2012</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="Github Gists Logo" src=/images/githubgistlogo.png></div><p>I recently switched my font in sublime text to the new Adobe font, <a title="Adobe Blog - Source Code Pro" href=http://blogs.adobe.com/typblography/2012/09/source-code-pro.html>Source Code Pro</a>.<div class=center><img alt="Source Code Pro sublime text 2 screenshot" src=/images/sourcecodepro.png></div><p>It looks fantastic! It is so smooth and crisp. To switch to it as your main font, first download the font. Then add the line “font_face”: “Source Code Pro” in your Preferences->User Settings(keyboard shortcut command+comma to open the settings) and that’s it! Pretty fly.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Source Code Pro on Sublime Text | OhDoyleRules</title><meta content="Source Code Pro on Sublime Text | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Source Code Pro on Sublime Text" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/source-code-pro-sublime/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/source-code-pro-sublime/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Source Code Pro on Sublime Text" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Download and install Source Code Pro on Sublime Text" name=description><meta content="Download and install Source Code Pro on Sublime Text" itemprop=description><meta content="Download and install Source Code Pro on Sublime Text" property=og:description><meta content="Download and install Source Code Pro on Sublime Text" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Source Code Pro on Sublime Text | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="adobe, font, source code pro, sublime, syntax, text" itemprop=keywords><meta content="adobe, font, source code pro, sublime, syntax, text" property=article:tag><meta content="adobe, font, source code pro, sublime, syntax, text" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/source-code-pro-sublime/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Source Code Pro on Sublime Text</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>October 19, 2012</span></span><div itemprop="ArticleBody text" class=main-content><div class=center><img alt="Github Gists Logo" src=/images/githubgistlogo.png></div><p>I recently switched my font in sublime text to the new Adobe font, <a rel="noopener nofollow noreferrer" title="Adobe Blog - Source Code Pro" href=http://blogs.adobe.com/typblography/2012/09/source-code-pro.html target=_blank>Source Code Pro</a>.<div class=center><img alt="Source Code Pro sublime text 2 screenshot" src=/images/sourcecodepro.png></div><p>It looks fantastic! It is so smooth and crisp. To switch to it as your main font, first download the font. Then add the line “font_face”: “Source Code Pro” in your Preferences->User Settings(keyboard shortcut command+comma to open the settings) and that’s it! Pretty fly.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/sql-as-an-api/index.html b/docs/web/sql-as-an-api/index.html
index 3df86e1..212af64 100644
--- a/docs/web/sql-as-an-api/index.html
+++ b/docs/web/sql-as-an-api/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>SQL As An API | OhDoyleRules</title><meta content="SQL As An API | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="SQL As An API" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/sql-as-an-api/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/sql-as-an-api/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="SQL As An API" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An example of how to use SQL as an API instead of reaching for something like GraphQL" name=description><meta content="An example of how to use SQL as an API instead of reaching for something like GraphQL" itemprop=description><meta content="An example of how to use SQL as an API instead of reaching for something like GraphQL" property=og:description><meta content="An example of how to use SQL as an API instead of reaching for something like GraphQL" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="SQL As An API | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="sql, graphql, api, sqlite, json, query, php" itemprop=keywords><meta content="sql, graphql, api, sqlite, json, query, php" property=article:tag><meta content="sql, graphql, api, sqlite, json, query, php" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/sql-as-an-api/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">SQL As An API</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>There has been a lot of fanfare around the idea of <a href=https://graphql.org/>GraphQL</a> lately. For good reason in my opinion.<p>GraphQL allows you to essentially define your API with your query. For example, if you want to only include a single field then you can do that. If you want to nest related items, or not, you can do that as well.<p>If you take a quick look at the GraphQL website (as it is today) you can see how they lay this out:<pre style=background:#2b303b;color:#c0c5ce><code><span># Describe your data
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>SQL As An API | OhDoyleRules</title><meta content="SQL As An API | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="SQL As An API" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/sql-as-an-api/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/sql-as-an-api/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="SQL As An API" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An example of how to use SQL as an API instead of reaching for something like GraphQL" name=description><meta content="An example of how to use SQL as an API instead of reaching for something like GraphQL" itemprop=description><meta content="An example of how to use SQL as an API instead of reaching for something like GraphQL" property=og:description><meta content="An example of how to use SQL as an API instead of reaching for something like GraphQL" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="SQL As An API | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="sql, graphql, api, sqlite, json, query, php" itemprop=keywords><meta content="sql, graphql, api, sqlite, json, query, php" property=article:tag><meta content="sql, graphql, api, sqlite, json, query, php" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/sql-as-an-api/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">SQL As An API</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 12, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>There has been a lot of fanfare around the idea of <a rel="noopener nofollow noreferrer" href=https://graphql.org/ target=_blank>GraphQL</a> lately. For good reason in my opinion.<p>GraphQL allows you to essentially define your API with your query. For example, if you want to only include a single field then you can do that. If you want to nest related items, or not, you can do that as well.<p>If you take a quick look at the GraphQL website (as it is today) you can see how they lay this out:<pre style=background:#2b303b;color:#c0c5ce><code><span># Describe your data
 </span><span>type Project {
 </span><span>  name: String
 </span><span>  tagline: String
@@ -35,7 +35,7 @@
 </span><span>    "tagline": "A query language for APIs"
 </span><span>  }
 </span><span>]
-</span></code></pre><p>So this really is just another way to store and query your data. We describe the structure, query it using the specified query language with our expected structure, and print out the results.<blockquote><p>So can we create a GraphQL experience using just SQL?</blockquote><p>So can we create a GraphQL experience using just SQL? Short answer, yes. This isn't a new concept though. There is a tool called <a href=https://simonwillison.net/2017/Nov/13/datasette/#Arbitrary_SQL_55>datasette</a> that does just this.<p>So where do we start? Well, we don't want users to be able to modify our database. We want to safely expose SQL to the internet. Crazy idea but it just might work.<p>So what we want to do is open a Sqlite database using the "ro" (read only) mode (see <a href=http://www.sqlite.org/draft/c3ref/open.html>mode details here</a>). This mode means that you <em>cannot modify the database</em>. You can only run queries that are reads. This is a great feature as we need to expose this database to the public internet if we are going to use it as an API.<p>Once we have a mounted sqlite database that is set to "read only" mode, we can then pass queries right to it and return the results.<h3 id=basic-example>Basic Example</h3><p>We are going to whip up this example using PHP and the <code>chinook</code> database <a href=http://www.sqlitetutorial.net/sqlite-sample-database/>from this site</a>. It is insanely easy to get this working using the <code>SQLite3</code> class and a single <code>json_encode</code> call.<p>Let's see how to get this done:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span style=color:#ab7967>&LT?php
+</span></code></pre><p>So this really is just another way to store and query your data. We describe the structure, query it using the specified query language with our expected structure, and print out the results.<blockquote><p>So can we create a GraphQL experience using just SQL?</blockquote><p>So can we create a GraphQL experience using just SQL? Short answer, yes. This isn't a new concept though. There is a tool called <a rel="noopener nofollow noreferrer" href=https://simonwillison.net/2017/Nov/13/datasette/#Arbitrary_SQL_55 target=_blank>datasette</a> that does just this.<p>So where do we start? Well, we don't want users to be able to modify our database. We want to safely expose SQL to the internet. Crazy idea but it just might work.<p>So what we want to do is open a Sqlite database using the "ro" (read only) mode (see <a rel="noopener nofollow noreferrer" href=http://www.sqlite.org/draft/c3ref/open.html target=_blank>mode details here</a>). This mode means that you <em>cannot modify the database</em>. You can only run queries that are reads. This is a great feature as we need to expose this database to the public internet if we are going to use it as an API.<p>Once we have a mounted sqlite database that is set to "read only" mode, we can then pass queries right to it and return the results.<h3 id=basic-example>Basic Example</h3><p>We are going to whip up this example using PHP and the <code>chinook</code> database <a rel="noopener nofollow noreferrer" href=http://www.sqlitetutorial.net/sqlite-sample-database/ target=_blank>from this site</a>. It is insanely easy to get this working using the <code>SQLite3</code> class and a single <code>json_encode</code> call.<p>Let's see how to get this done:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span style=color:#ab7967>&LT?php
 </span><span style=color:#65737e>// be sure to open with `SQLITE3_OPEN_READONLY`
 </span><span>$</span><span style=color:#bf616a>db </span><span>= </span><span style=color:#b48ead>new </span><span style=color:#ebcb8b>SQLite3</span><span>('</span><span style=color:#a3be8c>chinook.sqlite</span><span>', SQLITE3_OPEN_READONLY);
 </span><span style=color:#65737e>// pull out the query from the POST request
@@ -214,4 +214,4 @@
 </span><span>    "</span><span style=color:#a3be8c>total</span><span>": </span><span style=color:#d08770>8
 </span><span>  }
 </span><span>}
-</span></code></pre><p>So there you go. A pretty robust solution that has excellent performance, a simple and well-known query language, and supports almost any combination of data.<h3 id=in-summation>In summation</h3><p>So this could be a great option for a lot of applications. You can quickly imagine how this could be used for something like a simple search API. You could have an application hook to add data to this special database when your data is changed. Sqlite is a really viable option for a lot of things as it can grow to 140 TB, supports <a href=https://www.sqlite.org/json1.html><code>json_</code> functions</a>, and even <a href=https://effbot.org/zone/sqlite-blob.htm>binary data</a>.<p>Keep in mind that you can't really nest the same way you can in GraphQL. But you might be ok with that depending on your use case.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>So there you go. A pretty robust solution that has excellent performance, a simple and well-known query language, and supports almost any combination of data.<h3 id=in-summation>In summation</h3><p>So this could be a great option for a lot of applications. You can quickly imagine how this could be used for something like a simple search API. You could have an application hook to add data to this special database when your data is changed. Sqlite is a really viable option for a lot of things as it can grow to 140 TB, supports <a rel="noopener nofollow noreferrer" href=https://www.sqlite.org/json1.html target=_blank><code>json_</code> functions</a>, and even <a rel="noopener nofollow noreferrer" href=https://effbot.org/zone/sqlite-blob.htm target=_blank>binary data</a>.<p>Keep in mind that you can't really nest the same way you can in GraphQL. But you might be ok with that depending on your use case.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/styling-input-redux/index.html b/docs/web/styling-input-redux/index.html
index 967c927..4fa07e4 100644
--- a/docs/web/styling-input-redux/index.html
+++ b/docs/web/styling-input-redux/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Styling Radios and Checkboxes. Redux. | OhDoyleRules</title><meta content="Styling Radios and Checkboxes. Redux. | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Styling Radios and Checkboxes. Redux." itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/styling-input-redux/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/styling-input-redux/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Styling Radios and Checkboxes. Redux." name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Styling Radios and Checkboxes. Redux." name=description><meta content="Styling Radios and Checkboxes. Redux." itemprop=description><meta content="Styling Radios and Checkboxes. Redux." property=og:description><meta content="Styling Radios and Checkboxes. Redux." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Styling Radios and Checkboxes. Redux. | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="checkbox, codepen, CSS, HTML, input, radio" itemprop=keywords><meta content="checkbox, codepen, CSS, HTML, input, radio" property=article:tag><meta content="checkbox, codepen, CSS, HTML, input, radio" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/styling-input-redux/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Styling Radios and Checkboxes. Redux.</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 19, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>A few weeks ago, or something like that, I made a post about <a title="Styling radio and checkbox inputs" href=https://ohdoylerules.com/web/radio-checkboxes/>styling your labels to act as checkboxes/radios</a>. I recently saw <a href=http://dribbble.com/shots/693245-Untitled-iPhone-synth-app-waveforms title=iPhone-synth-app-waveforms>a post on Dribbble by Mikael Eidenberg</a> which inspired me to make some nicely styled examples of that method in action.<div class=center><img alt="Synth App Buttons in pure CSS" src=/images/synthappbuttons.png></div><p><a title="Synth App Buttons" href=http://codepen.io/james2doyle/pen/AKblD>Here is the pen on Codepen.io</a>. I usually use jsFidddle but I decided to change it up this time. Maybe my next post will be hosted on tinker.io or dabblet… although tinker does not have accounts like the others.<p>This is the exact same method as my <a title="Styling radio and checkbox inputs" href=https://ohdoylerules.com/web/radio-checkboxes/>previous article</a>, only there is a lot more css.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Styling Radios and Checkboxes. Redux. | OhDoyleRules</title><meta content="Styling Radios and Checkboxes. Redux. | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Styling Radios and Checkboxes. Redux." itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/styling-input-redux/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/styling-input-redux/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Styling Radios and Checkboxes. Redux." name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Styling Radios and Checkboxes. Redux." name=description><meta content="Styling Radios and Checkboxes. Redux." itemprop=description><meta content="Styling Radios and Checkboxes. Redux." property=og:description><meta content="Styling Radios and Checkboxes. Redux." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Styling Radios and Checkboxes. Redux. | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="checkbox, codepen, CSS, HTML, input, radio" itemprop=keywords><meta content="checkbox, codepen, CSS, HTML, input, radio" property=article:tag><meta content="checkbox, codepen, CSS, HTML, input, radio" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/styling-input-redux/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Styling Radios and Checkboxes. Redux.</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 19, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>A few weeks ago, or something like that, I made a post about <a rel="noopener nofollow noreferrer" title="Styling radio and checkbox inputs" href=https://ohdoylerules.com/web/radio-checkboxes/ target=_blank>styling your labels to act as checkboxes/radios</a>. I recently saw <a rel="noopener nofollow noreferrer" href=http://dribbble.com/shots/693245-Untitled-iPhone-synth-app-waveforms target=_blank title=iPhone-synth-app-waveforms>a post on Dribbble by Mikael Eidenberg</a> which inspired me to make some nicely styled examples of that method in action.<div class=center><img alt="Synth App Buttons in pure CSS" src=/images/synthappbuttons.png></div><p><a rel="noopener nofollow noreferrer" title="Synth App Buttons" href=http://codepen.io/james2doyle/pen/AKblD target=_blank>Here is the pen on Codepen.io</a>. I usually use jsFidddle but I decided to change it up this time. Maybe my next post will be hosted on tinker.io or dabblet… although tinker does not have accounts like the others.<p>This is the exact same method as my <a rel="noopener nofollow noreferrer" title="Styling radio and checkbox inputs" href=https://ohdoylerules.com/web/radio-checkboxes/ target=_blank>previous article</a>, only there is a lot more css.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/the-100-dollar-website/index.html b/docs/web/the-100-dollar-website/index.html
index bd3b2a6..237f6a5 100644
--- a/docs/web/the-100-dollar-website/index.html
+++ b/docs/web/the-100-dollar-website/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>The $100 Website | OhDoyleRules</title><meta content="The $100 Website | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="The $100 Website" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/the-100-dollar-website/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/the-100-dollar-website/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="The $100 Website" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I wrote a post on WARPAINT Media about people who ask about getting a website for $100." name=description><meta content="I wrote a post on WARPAINT Media about people who ask about getting a website for $100." itemprop=description><meta content="I wrote a post on WARPAINT Media about people who ask about getting a website for $100." property=og:description><meta content="I wrote a post on WARPAINT Media about people who ask about getting a website for $100." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="The $100 Website | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="100, dollar, website, warpaint, media" itemprop=keywords><meta content="100, dollar, website, warpaint, media" property=article:tag><meta content="100, dollar, website, warpaint, media" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/the-100-dollar-website/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">The $100 Website</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I wrote a post on WARPAINT Media about people who ask about getting a website for $100. It isn't an angry rant, although there is some frustration. It is more about courtesy.<p>I wouldn't ask you to take $100 for an entire weeks worth of work. So please, don't ask me. <a title="The $100 Website" href=http://warpaintmedia.ca/blog/2013/07/the-100-dollar-website>Here is the article</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>The $100 Website | OhDoyleRules</title><meta content="The $100 Website | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="The $100 Website" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/the-100-dollar-website/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/the-100-dollar-website/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="The $100 Website" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I wrote a post on WARPAINT Media about people who ask about getting a website for $100." name=description><meta content="I wrote a post on WARPAINT Media about people who ask about getting a website for $100." itemprop=description><meta content="I wrote a post on WARPAINT Media about people who ask about getting a website for $100." property=og:description><meta content="I wrote a post on WARPAINT Media about people who ask about getting a website for $100." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="The $100 Website | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="100, dollar, website, warpaint, media" itemprop=keywords><meta content="100, dollar, website, warpaint, media" property=article:tag><meta content="100, dollar, website, warpaint, media" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/the-100-dollar-website/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">The $100 Website</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 23, 2013</span></span><div itemprop="ArticleBody text" class=main-content><p>I wrote a post on WARPAINT Media about people who ask about getting a website for $100. It isn't an angry rant, although there is some frustration. It is more about courtesy.<p>I wouldn't ask you to take $100 for an entire weeks worth of work. So please, don't ask me. <a rel="noopener nofollow noreferrer" title="The $100 Website" href=http://warpaintmedia.ca/blog/2013/07/the-100-dollar-website target=_blank>Here is the article</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/tips-for-using-svgs/index.html b/docs/web/tips-for-using-svgs/index.html
index 6aadc8b..6f9eea5 100644
--- a/docs/web/tips-for-using-svgs/index.html
+++ b/docs/web/tips-for-using-svgs/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Tips For Using SVGs | OhDoyleRules</title><meta content="Tips For Using SVGs | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Tips For Using SVGs" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/tips-for-using-svgs/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/tips-for-using-svgs/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Tips For Using SVGs" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind." name=description><meta content="I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind." itemprop=description><meta content="I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind." property=og:description><meta content="I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Tips For Using SVGs | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="svg, image, pattern, base64, embed, object, safari, issues, viewbox, requestAnimationFrame, mask, animations, transitions" itemprop=keywords><meta content="svg, image, pattern, base64, embed, object, safari, issues, viewbox, requestAnimationFrame, mask, animations, transitions" property=article:tag><meta content="svg, image, pattern, base64, embed, object, safari, issues, viewbox, requestAnimationFrame, mask, animations, transitions" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/tips-for-using-svgs/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Tips For Using SVGs</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 17, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.<h3 id=use-viewbox>Use Viewbox</h3><p>This one is a little gem. The <code>viewBox</code> property allows you to set the dimensions of the image but it will also allow you can have responsive SVGs.<p>They maintain their ratios, but they will scale to 100% width and height. If you have an SVG that is 64 by 64, the syntax for the viewBox property would be <code>viewBox="0 0 64 64"</code>. Pretty simple. Just make sure you remove the width and height on the base SVG tag when using viewBox.<p>If you open an SVG in a new window, like opening a new file in the browser, you will notice that when zooming in, if <code>viewBox</code> property set properly, the image stays the same size. It won't zoom.<h3 id=use-base64-images>Use base64 Images</h3><p>So there are a couple ways you can embed an image in an SVG. I have found that the best way is to use a <a title="embed base64 - easy, client side base64 encoder" href=http://b1nary.ch/base64/>base 64 encoded string</a> as the image href.<pre class=language-xml data-lang=xml style=background:#2b303b;color:#c0c5ce><code class=language-xml data-lang=xml><span><</span><span style=color:#bf616a>svg </span><span style=color:#d08770>viewBox</span><span>="</span><span style=color:#a3be8c>0 0 64 64</span><span>" </span><span style=color:#d08770>xmlns</span><span>="</span><span style=color:#a3be8c>http://www.w3.org/2000/svg</span><span>" </span><span style=color:#d08770>xmlns:svg</span><span>="</span><span style=color:#a3be8c>http://www.w3.org/2000/svg</span><span>" </span><span style=color:#d08770>xmlns:xlink</span><span>="</span><span style=color:#a3be8c>http://www.w3.org/1999/xlink</span><span>">
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Tips For Using SVGs | OhDoyleRules</title><meta content="Tips For Using SVGs | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Tips For Using SVGs" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/tips-for-using-svgs/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/tips-for-using-svgs/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Tips For Using SVGs" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind." name=description><meta content="I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind." itemprop=description><meta content="I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind." property=og:description><meta content="I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Tips For Using SVGs | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="svg, image, pattern, base64, embed, object, safari, issues, viewbox, requestAnimationFrame, mask, animations, transitions" itemprop=keywords><meta content="svg, image, pattern, base64, embed, object, safari, issues, viewbox, requestAnimationFrame, mask, animations, transitions" property=article:tag><meta content="svg, image, pattern, base64, embed, object, safari, issues, viewbox, requestAnimationFrame, mask, animations, transitions" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/tips-for-using-svgs/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Tips For Using SVGs</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 17, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>I found using SVGs can be both amazing and extremely frustrating, so I have to share this information so no one looses their mind.<h3 id=use-viewbox>Use Viewbox</h3><p>This one is a little gem. The <code>viewBox</code> property allows you to set the dimensions of the image but it will also allow you can have responsive SVGs.<p>They maintain their ratios, but they will scale to 100% width and height. If you have an SVG that is 64 by 64, the syntax for the viewBox property would be <code>viewBox="0 0 64 64"</code>. Pretty simple. Just make sure you remove the width and height on the base SVG tag when using viewBox.<p>If you open an SVG in a new window, like opening a new file in the browser, you will notice that when zooming in, if <code>viewBox</code> property set properly, the image stays the same size. It won't zoom.<h3 id=use-base64-images>Use base64 Images</h3><p>So there are a couple ways you can embed an image in an SVG. I have found that the best way is to use a <a rel="noopener nofollow noreferrer" title="embed base64 - easy, client side base64 encoder" href=http://b1nary.ch/base64/ target=_blank>base 64 encoded string</a> as the image href.<pre class=language-xml data-lang=xml style=background:#2b303b;color:#c0c5ce><code class=language-xml data-lang=xml><span><</span><span style=color:#bf616a>svg </span><span style=color:#d08770>viewBox</span><span>="</span><span style=color:#a3be8c>0 0 64 64</span><span>" </span><span style=color:#d08770>xmlns</span><span>="</span><span style=color:#a3be8c>http://www.w3.org/2000/svg</span><span>" </span><span style=color:#d08770>xmlns:svg</span><span>="</span><span style=color:#a3be8c>http://www.w3.org/2000/svg</span><span>" </span><span style=color:#d08770>xmlns:xlink</span><span>="</span><span style=color:#a3be8c>http://www.w3.org/1999/xlink</span><span>">
 </span><span>  <</span><span style=color:#bf616a>defs</span><span>>
 </span><span>    <</span><span style=color:#bf616a>pattern </span><span style=color:#d08770>id</span><span>="</span><span style=color:#a3be8c>background-image</span><span>" </span><span style=color:#d08770>patternUnits</span><span>="</span><span style=color:#a3be8c>userSpaceOnUse</span><span>" </span><span style=color:#d08770>width</span><span>="</span><span style=color:#a3be8c>64</span><span>" </span><span style=color:#d08770>height</span><span>="</span><span style=color:#a3be8c>64</span><span>">
 </span><span>      </span><span style=color:#65737e>&LT!-- the width and height of the image should match the pattern, in most cases -->
diff --git a/docs/web/typeform-vector-logo/index.html b/docs/web/typeform-vector-logo/index.html
index 16ae63d..084c8e6 100644
--- a/docs/web/typeform-vector-logo/index.html
+++ b/docs/web/typeform-vector-logo/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Typeform Vector Logo | OhDoyleRules</title><meta content="Typeform Vector Logo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Typeform Vector Logo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/typeform-vector-logo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/typeform-vector-logo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Typeform Vector Logo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events,…" name=description><meta content="Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events,…" itemprop=description><meta content="Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events,…" property=og:description><meta content="Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events,…" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Typeform Vector Logo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Typeform, vector, logo, svg, eps, black" itemprop=keywords><meta content="Typeform, vector, logo, svg, eps, black" property=article:tag><meta content="Typeform, vector, logo, svg, eps, black" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/typeform-vector-logo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Typeform Vector Logo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 31, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events, and other general uses.<div class=center><a title="typeform svg vector" href=/images/typeform.svg target=_blank><img alt="typeform svg vector" src=/images/typeform.svg></a></div><p>If you are a photoshopper, you can also <a title="typeform eps vector" href=/images/typeform.eps target=_blank>grab the EPS file</a>.<h3 id=update>Update</h3><p>Here is the <a href=http://bit.ly/WPjXfZ>official repository of Typeform branding graphics</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Typeform Vector Logo | OhDoyleRules</title><meta content="Typeform Vector Logo | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Typeform Vector Logo" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/typeform-vector-logo/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/typeform-vector-logo/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Typeform Vector Logo" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events,…" name=description><meta content="Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events,…" itemprop=description><meta content="Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events,…" property=og:description><meta content="Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events,…" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Typeform Vector Logo | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="Typeform, vector, logo, svg, eps, black" itemprop=keywords><meta content="Typeform, vector, logo, svg, eps, black" property=article:tag><meta content="Typeform, vector, logo, svg, eps, black" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/typeform-vector-logo/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Typeform Vector Logo</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>July 31, 2014</span></span><div itemprop="ArticleBody text" class=main-content><p>Another difficult logo to find. This one is for the fun new Typeform service. Typeform allows you to create dynamic and fun forms for clients, events, and other general uses.<div class=center><a title="typeform svg vector" href=/images/typeform.svg target=_blank><img alt="typeform svg vector" src=/images/typeform.svg></a></div><p>If you are a photoshopper, you can also <a title="typeform eps vector" href=/images/typeform.eps target=_blank>grab the EPS file</a>.<h3 id=update>Update</h3><p>Here is the <a rel="noopener nofollow noreferrer" href=http://bit.ly/WPjXfZ target=_blank>official repository of Typeform branding graphics</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/update-laravel-pagination-with-new-collection/index.html b/docs/web/update-laravel-pagination-with-new-collection/index.html
index e6a7b5c..b4bbcaa 100644
--- a/docs/web/update-laravel-pagination-with-new-collection/index.html
+++ b/docs/web/update-laravel-pagination-with-new-collection/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Update Laravel Pagination With New Collection | OhDoyleRules</title><meta content="Update Laravel Pagination With New Collection | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Update Laravel Pagination With New Collection" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Update Laravel Pagination With New Collection" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Did you know you can update a Laravel pagination with a new collection?" name=description><meta content="Did you know you can update a Laravel pagination with a new collection?" itemprop=description><meta content="Did you know you can update a Laravel pagination with a new collection?" property=og:description><meta content="Did you know you can update a Laravel pagination with a new collection?" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Update Laravel Pagination With New Collection | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, laravel, pagination, db, results, database, query, model, hydrate" itemprop=keywords><meta content="php, laravel, pagination, db, results, database, query, model, hydrate" property=article:tag><meta content="php, laravel, pagination, db, results, database, query, model, hydrate" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Update Laravel Pagination With New Collection</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you even done a database search (using the <code>DB</code> facade) and got back an array of results that wasn't wrapped in lovely little Eloquent Models? After some googling, I am sure you probably found out about the <a href=http://commandz.io/create-models-from-query-builder/>hydrate</a> method. Using <code>hydrate</code>, you can turn an array of results from the database into real models from your application. This works phenomenally.<p>But what if you want to return paginated results? How do you used the results after they are already paginated? Well there is a method called <code>setCollection</code> on the <a href=https://laravel.com/api/5.4/Illuminate/Pagination/LengthAwarePaginator.html>LengthAwarePaginator</a> class. What it will let you do actually set the results of the pagination to a new collection.<p>Here is an example of how that works in practice:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span style=color:#ab7967>&LT?php
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Update Laravel Pagination With New Collection | OhDoyleRules</title><meta content="Update Laravel Pagination With New Collection | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Update Laravel Pagination With New Collection" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Update Laravel Pagination With New Collection" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Did you know you can update a Laravel pagination with a new collection?" name=description><meta content="Did you know you can update a Laravel pagination with a new collection?" itemprop=description><meta content="Did you know you can update a Laravel pagination with a new collection?" property=og:description><meta content="Did you know you can update a Laravel pagination with a new collection?" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Update Laravel Pagination With New Collection | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="php, laravel, pagination, db, results, database, query, model, hydrate" itemprop=keywords><meta content="php, laravel, pagination, db, results, database, query, model, hydrate" property=article:tag><meta content="php, laravel, pagination, db, results, database, query, model, hydrate" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/update-laravel-pagination-with-new-collection/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Update Laravel Pagination With New Collection</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 04, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you even done a database search (using the <code>DB</code> facade) and got back an array of results that wasn't wrapped in lovely little Eloquent Models? After some googling, I am sure you probably found out about the <a rel="noopener nofollow noreferrer" href=http://commandz.io/create-models-from-query-builder/ target=_blank>hydrate</a> method. Using <code>hydrate</code>, you can turn an array of results from the database into real models from your application. This works phenomenally.<p>But what if you want to return paginated results? How do you used the results after they are already paginated? Well there is a method called <code>setCollection</code> on the <a rel="noopener nofollow noreferrer" href=https://laravel.com/api/5.4/Illuminate/Pagination/LengthAwarePaginator.html target=_blank>LengthAwarePaginator</a> class. What it will let you do actually set the results of the pagination to a new collection.<p>Here is an example of how that works in practice:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span style=color:#ab7967>&LT?php
 </span><span style=color:#65737e>/**
 </span><span style=color:#65737e> * Hydrates the paginated results for the query
 </span><span style=color:#65737e> */
diff --git a/docs/web/use-laravel-valet-for-wordpress-multisites/index.html b/docs/web/use-laravel-valet-for-wordpress-multisites/index.html
index 14c6f47..4766663 100644
--- a/docs/web/use-laravel-valet-for-wordpress-multisites/index.html
+++ b/docs/web/use-laravel-valet-for-wordpress-multisites/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Use Laravel Valet for WordPress Multisites | OhDoyleRules</title><meta content="Use Laravel Valet for WordPress Multisites | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Use Laravel Valet for WordPress Multisites" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Use Laravel Valet for WordPress Multisites" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Laravel Valet for developing local WordPress multisites" name=description><meta content="Use Laravel Valet for developing local WordPress multisites" itemprop=description><meta content="Use Laravel Valet for developing local WordPress multisites" property=og:description><meta content="Use Laravel Valet for developing local WordPress multisites" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Use Laravel Valet for WordPress Multisites | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="laravel, valet, php, subdomain, wordpress, multisite, setup" itemprop=keywords><meta content="laravel, valet, php, subdomain, wordpress, multisite, setup" property=article:tag><meta content="laravel, valet, php, subdomain, wordpress, multisite, setup" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Use Laravel Valet for WordPress Multisites</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 01, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>Working with WordPress multisites can sometimes be a pain. Especially if you are not using the amazing <a href=https://laravel.com/docs/6.0/valet>Laravel Valet</a> tool to manage your local sites.<p>From the site:<blockquote><p>Valet is a Laravel (or any site really) development environment for Mac minimalists. No Vagrant, no /etc/hosts file.</blockquote><p>I would add that everything can be managed from the command line as well. Very handy.<p>I'm going to make some assumptions for the rest of the post. Firstly, you already have a WordPress multisite setup at <code>~/Sites/my-blog</code> (or wherever your root folder is) that is already resolving with <code>my-blog.localhost</code>. The TLD (in my case <code>.localhost</code>) is not important either. Just imagine yours there instead.<p>We are going to want to add a new domain name that resolves to the exact same folder as our current blog setup. We can do that with <code>valet link</code>.<p>So let's run some commands:<ul><li><code>cd ~/Sites/my-blog</code><li><code>valet link my-other-blog.localhost</code></ul><p>Now we have 2 domains pointing to the same folder:<ul><li><code>my-blog.localhost</code><li><code>my-other-blog.localhost</code></ul><p>They are both going to resolve to the same site right now. That's OK. We need to tweak our <code>wp-config.php</code> to work properly with the requests.<p>If we have multisite already setup, we should see some sites in the <code>wp_blogs</code> table of our database. We want each of these "sites" to reflect the domains on our system. You can update those now and make sure that the domains match the ones we are setting up.<p>Then we need to update our <code>wp-config.php</code> with some changes:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span style=color:#ab7967>&LT?php
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Use Laravel Valet for WordPress Multisites | OhDoyleRules</title><meta content="Use Laravel Valet for WordPress Multisites | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Use Laravel Valet for WordPress Multisites" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Use Laravel Valet for WordPress Multisites" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Laravel Valet for developing local WordPress multisites" name=description><meta content="Use Laravel Valet for developing local WordPress multisites" itemprop=description><meta content="Use Laravel Valet for developing local WordPress multisites" property=og:description><meta content="Use Laravel Valet for developing local WordPress multisites" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Use Laravel Valet for WordPress Multisites | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="laravel, valet, php, subdomain, wordpress, multisite, setup" itemprop=keywords><meta content="laravel, valet, php, subdomain, wordpress, multisite, setup" property=article:tag><meta content="laravel, valet, php, subdomain, wordpress, multisite, setup" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/use-laravel-valet-for-wordpress-multisites/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Use Laravel Valet for WordPress Multisites</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 01, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>Working with WordPress multisites can sometimes be a pain. Especially if you are not using the amazing <a rel="noopener nofollow noreferrer" href=https://laravel.com/docs/6.0/valet target=_blank>Laravel Valet</a> tool to manage your local sites.<p>From the site:<blockquote><p>Valet is a Laravel (or any site really) development environment for Mac minimalists. No Vagrant, no /etc/hosts file.</blockquote><p>I would add that everything can be managed from the command line as well. Very handy.<p>I'm going to make some assumptions for the rest of the post. Firstly, you already have a WordPress multisite setup at <code>~/Sites/my-blog</code> (or wherever your root folder is) that is already resolving with <code>my-blog.localhost</code>. The TLD (in my case <code>.localhost</code>) is not important either. Just imagine yours there instead.<p>We are going to want to add a new domain name that resolves to the exact same folder as our current blog setup. We can do that with <code>valet link</code>.<p>So let's run some commands:<ul><li><code>cd ~/Sites/my-blog</code><li><code>valet link my-other-blog.localhost</code></ul><p>Now we have 2 domains pointing to the same folder:<ul><li><code>my-blog.localhost</code><li><code>my-other-blog.localhost</code></ul><p>They are both going to resolve to the same site right now. That's OK. We need to tweak our <code>wp-config.php</code> to work properly with the requests.<p>If we have multisite already setup, we should see some sites in the <code>wp_blogs</code> table of our database. We want each of these "sites" to reflect the domains on our system. You can update those now and make sure that the domains match the ones we are setting up.<p>Then we need to update our <code>wp-config.php</code> with some changes:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span style=color:#ab7967>&LT?php
 </span><span style=color:#65737e>// wp-config.php
 </span><span>
 </span><span style=color:#65737e>// ... there is going to be other stuff in here at the top...
diff --git a/docs/web/use-nginx-for-a-b-testing/index.html b/docs/web/use-nginx-for-a-b-testing/index.html
index 22d5eae..e1c9ecc 100644
--- a/docs/web/use-nginx-for-a-b-testing/index.html
+++ b/docs/web/use-nginx-for-a-b-testing/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Use Nginx for A/B Testing | OhDoyleRules</title><meta content="Use Nginx for A/B Testing | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Use Nginx for A/B Testing" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Use Nginx for A/B Testing" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Nginx to set custom headers in your HTTP responses so you can serve conditional content" name=description><meta content="Use Nginx to set custom headers in your HTTP responses so you can serve conditional content" itemprop=description><meta content="Use Nginx to set custom headers in your HTTP responses so you can serve conditional content" property=og:description><meta content="Use Nginx to set custom headers in your HTTP responses so you can serve conditional content" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Use Nginx for A/B Testing | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="nginx, server, middleware, a, b, test, content, conditional, header, marketing" itemprop=keywords><meta content="nginx, server, middleware, a, b, test, content, conditional, header, marketing" property=article:tag><meta content="nginx, server, middleware, a, b, test, content, conditional, header, marketing" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Use Nginx for A/B Testing</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 28, 2016</span></span><div itemprop="ArticleBody text" class=main-content><p>I was starting a new project the other day that had a heavy marketing influence. The team was wondering about possibly A/B testing the main content section of the website.<p>It got me thinking about doing A/B test with content and how that works.<p>There are a couple of ways that A/B testing can be accomplished. After some quick Google-ing, I found this cool feature of Nginx called <code>split_clients</code>.<p>Here is a little breakdown of that module:<blockquote><p>The <code>ngx_http_split_clients_module</code> module creates variables suitable for A/B testing, also known as split testing.</blockquote><p>There is a <a href=https://www.digitalocean.com/community/tutorials/how-to-target-your-users-with-nginx-analytics-and-a-b-testing>great article at DigitalOcean</a> about getting <code>split_clients</code> setup.<p>Nginx will allow you to apply certain variables to a segment of your traffic. For example:<pre style=background:#2b303b;color:#c0c5ce><code><span>http {
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Use Nginx for A/B Testing | OhDoyleRules</title><meta content="Use Nginx for A/B Testing | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Use Nginx for A/B Testing" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Use Nginx for A/B Testing" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="Use Nginx to set custom headers in your HTTP responses so you can serve conditional content" name=description><meta content="Use Nginx to set custom headers in your HTTP responses so you can serve conditional content" itemprop=description><meta content="Use Nginx to set custom headers in your HTTP responses so you can serve conditional content" property=og:description><meta content="Use Nginx to set custom headers in your HTTP responses so you can serve conditional content" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Use Nginx for A/B Testing | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="nginx, server, middleware, a, b, test, content, conditional, header, marketing" itemprop=keywords><meta content="nginx, server, middleware, a, b, test, content, conditional, header, marketing" property=article:tag><meta content="nginx, server, middleware, a, b, test, content, conditional, header, marketing" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/use-nginx-for-a-b-testing/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Use Nginx for A/B Testing</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 28, 2016</span></span><div itemprop="ArticleBody text" class=main-content><p>I was starting a new project the other day that had a heavy marketing influence. The team was wondering about possibly A/B testing the main content section of the website.<p>It got me thinking about doing A/B test with content and how that works.<p>There are a couple of ways that A/B testing can be accomplished. After some quick Google-ing, I found this cool feature of Nginx called <code>split_clients</code>.<p>Here is a little breakdown of that module:<blockquote><p>The <code>ngx_http_split_clients_module</code> module creates variables suitable for A/B testing, also known as split testing.</blockquote><p>There is a <a rel="noopener nofollow noreferrer" href=https://www.digitalocean.com/community/tutorials/how-to-target-your-users-with-nginx-analytics-and-a-b-testing target=_blank>great article at DigitalOcean</a> about getting <code>split_clients</code> setup.<p>Nginx will allow you to apply certain variables to a segment of your traffic. For example:<pre style=background:#2b303b;color:#c0c5ce><code><span>http {
 </span><span>    split_clients "${remote_addr}" $variant {
 </span><span>            0.5%    .one;
 </span><span>            2.0%    .two;
diff --git a/docs/web/using-digitalocean-spaces/index.html b/docs/web/using-digitalocean-spaces/index.html
index 3cf7e57..4927203 100644
--- a/docs/web/using-digitalocean-spaces/index.html
+++ b/docs/web/using-digitalocean-spaces/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using DigitalOcean Spaces | OhDoyleRules</title><meta content="Using DigitalOcean Spaces | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using DigitalOcean Spaces" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/using-digitalocean-spaces/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/using-digitalocean-spaces/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using DigitalOcean Spaces" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An example project for how to use DigitalOcean Spaces with S3 tools" name=description><meta content="An example project for how to use DigitalOcean Spaces with S3 tools" itemprop=description><meta content="An example project for how to use DigitalOcean Spaces with S3 tools" property=og:description><meta content="An example project for how to use DigitalOcean Spaces with S3 tools" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using DigitalOcean Spaces | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="digitalocean, spaces, s3, aws, object store" itemprop=keywords><meta content="digitalocean, spaces, s3, aws, object store" property=article:tag><meta content="digitalocean, spaces, s3, aws, object store" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/using-digitalocean-spaces/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using DigitalOcean Spaces</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>If you are a fan of <a href=https://m.do.co/c/802f151adea5>DigitalOcean</a>, or you keep an eye on DevOps news, then you probably heard about the new <a href=https://www.digitalocean.com/products/object-storage/>DigitalOcean Spaces</a> offering.<p>Spaces is essentially an AWS S3-compatible service but with that special DigitalOcean touch.<p>Now Spaces is not a 1:1 replacement for S3. There are quite a few features that have not yet been implemented. They also don't have any GUI interfaces for things like managing bucket policies or CORS configurations.<p>I made an example project for how to use Spaces with an S3 node module (<a href=https://github.com/james2doyle/digitalocean-spaces-example>which you can find here</a>) to see what the differences were when actually using the service.<p>I was really surprised to find that it was almost identical.<p>Here is an example of how you might tweak your config from an S3 project:<pre class=language-json data-lang=json style=background:#2b303b;color:#c0c5ce><code class=language-json data-lang=json><span>{
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using DigitalOcean Spaces | OhDoyleRules</title><meta content="Using DigitalOcean Spaces | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using DigitalOcean Spaces" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/using-digitalocean-spaces/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/using-digitalocean-spaces/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using DigitalOcean Spaces" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="An example project for how to use DigitalOcean Spaces with S3 tools" name=description><meta content="An example project for how to use DigitalOcean Spaces with S3 tools" itemprop=description><meta content="An example project for how to use DigitalOcean Spaces with S3 tools" property=og:description><meta content="An example project for how to use DigitalOcean Spaces with S3 tools" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using DigitalOcean Spaces | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="digitalocean, spaces, s3, aws, object store" itemprop=keywords><meta content="digitalocean, spaces, s3, aws, object store" property=article:tag><meta content="digitalocean, spaces, s3, aws, object store" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/using-digitalocean-spaces/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using DigitalOcean Spaces</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 18, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>If you are a fan of <a rel="noopener nofollow noreferrer" href=https://m.do.co/c/802f151adea5 target=_blank>DigitalOcean</a>, or you keep an eye on DevOps news, then you probably heard about the new <a rel="noopener nofollow noreferrer" href=https://www.digitalocean.com/products/object-storage/ target=_blank>DigitalOcean Spaces</a> offering.<p>Spaces is essentially an AWS S3-compatible service but with that special DigitalOcean touch.<p>Now Spaces is not a 1:1 replacement for S3. There are quite a few features that have not yet been implemented. They also don't have any GUI interfaces for things like managing bucket policies or CORS configurations.<p>I made an example project for how to use Spaces with an S3 node module (<a rel="noopener nofollow noreferrer" href=https://github.com/james2doyle/digitalocean-spaces-example target=_blank>which you can find here</a>) to see what the differences were when actually using the service.<p>I was really surprised to find that it was almost identical.<p>Here is an example of how you might tweak your config from an S3 project:<pre class=language-json data-lang=json style=background:#2b303b;color:#c0c5ce><code class=language-json data-lang=json><span>{
 </span><span>  </span><span style=background:#bf616a;color:#2b303b>region</span><span>: </span><span style=background:#bf616a;color:#2b303b>'nyc3',</span><span> </span><span style=color:#65737e>// very familiar setting
 </span><span>  </span><span style=background:#bf616a;color:#2b303b>endpoint</span><span>: </span><span style=background:#bf616a;color:#2b303b>'https</span><span>:</span><span style=color:#65737e>//nyc3.digitaloceanspaces.com', // something you probably ignored before
 </span><span>  </span><span style=background:#bf616a;color:#2b303b>signatureVersion</span><span>: </span><span style=background:#bf616a;color:#2b303b>'v4',</span><span> </span><span style=color:#65737e>// spaces supports the V4 API
diff --git a/docs/web/using-slots-in-vue-js/index.html b/docs/web/using-slots-in-vue-js/index.html
index 7b1fa19..fba23a0 100644
--- a/docs/web/using-slots-in-vue-js/index.html
+++ b/docs/web/using-slots-in-vue-js/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using slots in Vue js | OhDoyleRules</title><meta content="Using slots in Vue js | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using slots in Vue js" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/using-slots-in-vue-js/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/using-slots-in-vue-js/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using slots in Vue js" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components" name=description><meta content="If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components" itemprop=description><meta content="If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components" property=og:description><meta content="If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using slots in Vue js | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, slots, server, rendered, reusable, flexible, components, liquid, blade" itemprop=keywords><meta content="vue, slots, server, rendered, reusable, flexible, components, liquid, blade" property=article:tag><meta content="vue, slots, server, rendered, reusable, flexible, components, liquid, blade" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/using-slots-in-vue-js/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using slots in Vue js</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>If you are working with server-rendered apps (your view is compiled on the server down to HTML), and you are a <a href=https://vuejs.org/>Vue.js</a> user, then you should definitely learn to use a <a href=https://vuejs.org/v2/guide/components-slots.html>Vue feature called slots</a>! Not only will it allow you to make more reusable and flexible components, but you will also improve the rendering performance of your apps as well.<h2 id=basic-example>Basic Example</h2><p>Here is the example we will be refactoring later. It is a "profile list" which takes in an array of users from a prop, and then creates "profile cards" for each one. Finally, it adds a button in each card that emits an event with the user data when someone clicks on it.<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span style=color:#65737e>&LT!--
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using slots in Vue js | OhDoyleRules</title><meta content="Using slots in Vue js | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using slots in Vue js" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/using-slots-in-vue-js/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/using-slots-in-vue-js/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using slots in Vue js" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components" name=description><meta content="If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components" itemprop=description><meta content="If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components" property=og:description><meta content="If you are working with server-rendered apps, using Vue slots can help you create more reusable and flexible components" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using slots in Vue js | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, slots, server, rendered, reusable, flexible, components, liquid, blade" itemprop=keywords><meta content="vue, slots, server, rendered, reusable, flexible, components, liquid, blade" property=article:tag><meta content="vue, slots, server, rendered, reusable, flexible, components, liquid, blade" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/using-slots-in-vue-js/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using slots in Vue js</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>May 18, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>If you are working with server-rendered apps (your view is compiled on the server down to HTML), and you are a <a rel="noopener nofollow noreferrer" href=https://vuejs.org/ target=_blank>Vue.js</a> user, then you should definitely learn to use a <a rel="noopener nofollow noreferrer" href=https://vuejs.org/v2/guide/components-slots.html target=_blank>Vue feature called slots</a>! Not only will it allow you to make more reusable and flexible components, but you will also improve the rendering performance of your apps as well.<h2 id=basic-example>Basic Example</h2><p>Here is the example we will be refactoring later. It is a "profile list" which takes in an array of users from a prop, and then creates "profile cards" for each one. Finally, it adds a button in each card that emits an event with the user data when someone clicks on it.<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span style=color:#65737e>&LT!--
 </span><span style=color:#65737e>  This is the way you might typically build a component like this
 </span><span style=color:#65737e> -->
 </span><span><</span><span style=color:#bf616a>template</span><span>>
@@ -40,7 +40,7 @@
 </span><span><</span><span style=color:#bf616a>profile-list </span><span style=color:#d08770>v-bind:users</span><span>="</span><span style=color:#a3be8c>&LT?= htmlspecialchars(json_encode($users), ENT_QUOTES, 'UTF-8') ?></span><span>">&LT/</span><span style=color:#bf616a>profile-list</span><span>>
 </span><span style=color:#65737e>&LT!-- laravel blade example, note single quotes -->
 </span><span><</span><span style=color:#bf616a>profile-list </span><span style=color:#d08770>v-bind:users</span><span>='</span><span style=color:#a3be8c>@json($users)</span><span>'>&LT/</span><span style=color:#bf616a>profile-list</span><span>>
-</span></code></pre><p>As you can see the main approach here is to encode the users as JSON and pass them to the components <code>users</code> prop. This can create quite a mess of JSON if you look at the source of your pages if you have lots of components that do this.<h2 id=why-use-slots>Why Use Slots?</h2><p>As I mentioned, with slots you can create more reusable and flexible components and improve the rendering performance of your apps. I'll outline some of the details below.<h4 id=on-reusability-and-flexibility>On Reusability and Flexibility</h4><p>Normally, you would send data to your Vue component using props, events, or a store. But using slots, you can essentially skip a rendering step and send your pre-compiled Vue into your Vue components template. This allows you to create components with <em>flexible templates</em> instead of adding tons of props and lots of switches in the templates.<p>What I've typically seen in the past with larger apps, developers end up creating super-components with tons and tons of props. The reason this happens is usually because the components require flexibility. If you have lots of props, that is <a href=https://en.wikipedia.org/wiki/Code_smell>probably a code smell</a>. A way to reduce the number of props is to use events, new components, and of course, slots, to split things up!<h4 id=on-passing-data>On Passing Data</h4><p>Since a slot is rendered on the server, you can also do some handy things with the template. Say you want to show or hide different content based on whether the user is authenticated. Well, this is super easy when working in server-rendered templates since the session is so easy to access. You might even have entire blocks of the UI that are not shown if the user is not logged in or is logged out.<p>This can help to dramatically reduce the work you need to do on your frontend to access data or building token-based APIs.<h4 id=on-rendering>On Rendering</h4><p>Since a slot is prerended HTML, your component ends up changing to really only encapsulating <em>the logic</em> of your component and less "template" of your component. You'll notice that when using slots instead of props, your page with show the content inside the slot even before Vue has finished loading. This is great because it can help reduce <a href=https://en.wikipedia.org/wiki/Flash_of_unstyled_content>flashes of unstyled content</a> that make your app look a little janky.<p>Although <a href=https://developers.google.com/search/docs/guides/javascript-seo-basics>browers will run your javascript</a>, a by-product of using slots is that you could improve the SEO of your site, as you are trying to fill the page with the most HTML possible.<p>Mostly slots are good for making more flexible components. The performance benefit is super helpful though.<h2 id=refactored-to-slots>Refactored to Slots</h2><pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span style=color:#65737e>&LT!--
+</span></code></pre><p>As you can see the main approach here is to encode the users as JSON and pass them to the components <code>users</code> prop. This can create quite a mess of JSON if you look at the source of your pages if you have lots of components that do this.<h2 id=why-use-slots>Why Use Slots?</h2><p>As I mentioned, with slots you can create more reusable and flexible components and improve the rendering performance of your apps. I'll outline some of the details below.<h4 id=on-reusability-and-flexibility>On Reusability and Flexibility</h4><p>Normally, you would send data to your Vue component using props, events, or a store. But using slots, you can essentially skip a rendering step and send your pre-compiled Vue into your Vue components template. This allows you to create components with <em>flexible templates</em> instead of adding tons of props and lots of switches in the templates.<p>What I've typically seen in the past with larger apps, developers end up creating super-components with tons and tons of props. The reason this happens is usually because the components require flexibility. If you have lots of props, that is <a rel="noopener nofollow noreferrer" href=https://en.wikipedia.org/wiki/Code_smell target=_blank>probably a code smell</a>. A way to reduce the number of props is to use events, new components, and of course, slots, to split things up!<h4 id=on-passing-data>On Passing Data</h4><p>Since a slot is rendered on the server, you can also do some handy things with the template. Say you want to show or hide different content based on whether the user is authenticated. Well, this is super easy when working in server-rendered templates since the session is so easy to access. You might even have entire blocks of the UI that are not shown if the user is not logged in or is logged out.<p>This can help to dramatically reduce the work you need to do on your frontend to access data or building token-based APIs.<h4 id=on-rendering>On Rendering</h4><p>Since a slot is prerended HTML, your component ends up changing to really only encapsulating <em>the logic</em> of your component and less "template" of your component. You'll notice that when using slots instead of props, your page with show the content inside the slot even before Vue has finished loading. This is great because it can help reduce <a rel="noopener nofollow noreferrer" href=https://en.wikipedia.org/wiki/Flash_of_unstyled_content target=_blank>flashes of unstyled content</a> that make your app look a little janky.<p>Although <a rel="noopener nofollow noreferrer" href=https://developers.google.com/search/docs/guides/javascript-seo-basics target=_blank>browers will run your javascript</a>, a by-product of using slots is that you could improve the SEO of your site, as you are trying to fill the page with the most HTML possible.<p>Mostly slots are good for making more flexible components. The performance benefit is super helpful though.<h2 id=refactored-to-slots>Refactored to Slots</h2><pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span style=color:#65737e>&LT!--
 </span><span style=color:#65737e>  All we need to do is cut that inside layout and replace it with a "default" slot
 </span><span style=color:#65737e> -->
 </span><span><</span><span style=color:#bf616a>template</span><span>>
diff --git a/docs/web/varnish-for-static-sites/index.html b/docs/web/varnish-for-static-sites/index.html
index 6201648..2336480 100644
--- a/docs/web/varnish-for-static-sites/index.html
+++ b/docs/web/varnish-for-static-sites/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Varnish For Static Sites | OhDoyleRules</title><meta content="Varnish For Static Sites | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Varnish For Static Sites" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/varnish-for-static-sites/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/varnish-for-static-sites/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Varnish For Static Sites" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="a small tutorial for how to setup Varnish cache for a flat site running on Apache" name=description><meta content="a small tutorial for how to setup Varnish cache for a flat site running on Apache" itemprop=description><meta content="a small tutorial for how to setup Varnish cache for a flat site running on Apache" property=og:description><meta content="a small tutorial for how to setup Varnish cache for a flat site running on Apache" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Varnish For Static Sites | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="varnish, flat, file, site, apache, ubuntu, install, setup, config" itemprop=keywords><meta content="varnish, flat, file, site, apache, ubuntu, install, setup, config" property=article:tag><meta content="varnish, flat, file, site, apache, ubuntu, install, setup, config" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/varnish-for-static-sites/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Varnish For Static Sites</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>Recently, <a href=http://warpaintmedia.ca>my company</a> had a request to build a series of sites that could handle huge bursts of traffic. I asked some friends of mine, what a good solution for this would be. All of them said <a href=https://www.varnish-cache.org/>Varnish</a>.<p>If you don't know what Varnish is, check out this definition from their documentation:<blockquote><p>Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy. You install it in front of any server that speaks HTTP and configure it to cache the contents. Varnish Cache is really, really fast. It typically speeds up delivery with a factor of 300 - 1000x, depending on your architecture.</blockquote><p>So you can see that having this tool would be really nice. A simple way to get started with Varnish is to set it up on a flat-file site. Maybe something like <a href=http://philecms.com/>PhileCMS</a> perhaps? Here is <a href=https://www.staticgen.com/>a nice curated list</a> of flat-file site generators.<h3 id=setting-up>Setting Up</h3><p>This tutorial assumes the following:<ul><li>You are using Ubuntu 14.04<li>You have <a href=https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-varnish-with-apache-on-ubuntu-12-04--3>Varnish and Apache installed</a> *</ul><p>* This tutorial is for Ubuntu 12.04. Replace this command: <code>deb http://repo.varnish-cache.org/ubuntu/ lucid varnish-3.0</code> with this one <code>deb http://repo.varnish-cache.org/ubuntu/ trusty varnish-4.0</code><h3 id=apache-setup>Apache Setup</h3><p>First, you will want to serve Apache on a different port, because Varnish is going to act as our "web server" and Apache will only be used if the cache is stale or there is no item in the Varnish cache.<p>We can open <code>/etc/apache2/ports.conf</code> and make the following change:<pre style=background:#2b303b;color:#c0c5ce><code><span># Listen 80
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Varnish For Static Sites | OhDoyleRules</title><meta content="Varnish For Static Sites | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Varnish For Static Sites" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/varnish-for-static-sites/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/varnish-for-static-sites/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Varnish For Static Sites" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="a small tutorial for how to setup Varnish cache for a flat site running on Apache" name=description><meta content="a small tutorial for how to setup Varnish cache for a flat site running on Apache" itemprop=description><meta content="a small tutorial for how to setup Varnish cache for a flat site running on Apache" property=og:description><meta content="a small tutorial for how to setup Varnish cache for a flat site running on Apache" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Varnish For Static Sites | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="varnish, flat, file, site, apache, ubuntu, install, setup, config" itemprop=keywords><meta content="varnish, flat, file, site, apache, ubuntu, install, setup, config" property=article:tag><meta content="varnish, flat, file, site, apache, ubuntu, install, setup, config" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/varnish-for-static-sites/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Varnish For Static Sites</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 20, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>Recently, <a rel="noopener nofollow noreferrer" href=http://warpaintmedia.ca target=_blank>my company</a> had a request to build a series of sites that could handle huge bursts of traffic. I asked some friends of mine, what a good solution for this would be. All of them said <a rel="noopener nofollow noreferrer" href=https://www.varnish-cache.org/ target=_blank>Varnish</a>.<p>If you don't know what Varnish is, check out this definition from their documentation:<blockquote><p>Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy. You install it in front of any server that speaks HTTP and configure it to cache the contents. Varnish Cache is really, really fast. It typically speeds up delivery with a factor of 300 - 1000x, depending on your architecture.</blockquote><p>So you can see that having this tool would be really nice. A simple way to get started with Varnish is to set it up on a flat-file site. Maybe something like <a rel="noopener nofollow noreferrer" href=http://philecms.com/ target=_blank>PhileCMS</a> perhaps? Here is <a rel="noopener nofollow noreferrer" href=https://www.staticgen.com/ target=_blank>a nice curated list</a> of flat-file site generators.<h3 id=setting-up>Setting Up</h3><p>This tutorial assumes the following:<ul><li>You are using Ubuntu 14.04<li>You have <a rel="noopener nofollow noreferrer" href=https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-varnish-with-apache-on-ubuntu-12-04--3 target=_blank>Varnish and Apache installed</a> *</ul><p>* This tutorial is for Ubuntu 12.04. Replace this command: <code>deb http://repo.varnish-cache.org/ubuntu/ lucid varnish-3.0</code> with this one <code>deb http://repo.varnish-cache.org/ubuntu/ trusty varnish-4.0</code><h3 id=apache-setup>Apache Setup</h3><p>First, you will want to serve Apache on a different port, because Varnish is going to act as our "web server" and Apache will only be used if the cache is stale or there is no item in the Varnish cache.<p>We can open <code>/etc/apache2/ports.conf</code> and make the following change:<pre style=background:#2b303b;color:#c0c5ce><code><span># Listen 80
 </span><span>Listen 127.0.0.1:8080
 </span></code></pre><p>We commented out the original listening port, and added our own.<p>If we have any sites setup, we should change their virtual host files as well. These files live in <code>/etc/apache2/sites-available</code> and end in <code>.conf</code>, so this demo file might be called <code>example.com.conf</code><pre style=background:#2b303b;color:#c0c5ce><code><span>&LTVirtualHost *:8080>
 </span><span>  ServerAdmin hello@example.com
@@ -11,4 +11,4 @@
 </span><span>             -f /etc/varnish/default.vcl \
 </span><span>             -S /etc/varnish/secret \
 </span><span>             -s malloc,256m"
-</span></code></pre><p>Most likely, you will only change the <code>-a</code> part to <code>80</code>.<p>Our Varnish configuration for our site lives at <code>/etc/varnish/default.vcl</code>, here is the one I am using:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/0feec6ab77078ad3fdce.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/0feec6ab77078ad3fdce.js src=about:blank></iframe><p>It is very basic. I really only want to cache text files (HTML, CSS, Javascript/JSON) and images.<p>To restart Varnish, use <code>service varnish restart</code>.<h4 id=restarting-varnish>Restarting Varnish</h4><p>If you restart or run out of memory, Varnish will rebuild the cache. This isn't great because you are trying to keep Varnish alive and the cache enabled.<h3 id=testing>Testing</h3><p>At this point we are ready to test.<p>I would suggest running the command <code>vanrnishstat</code> on your remote server so you can see things happening in the Varnish cache. Pressing the arrow keys up and down will give you a description of the item.<p>Then you can go to you site and click around. You should see the Varnish Stat table getting updated. You will want to watch the <em>MAIN.cache_hit</em> and <em>MAIN.cache_miss</em> numbers.<p>You want the <em>MAIN.cache_hit</em> to be as high as possible. This means that your Apache is not getting tapped for information, but Varnish is serving it straight to the client.<p>For the <em>MAIN.cache_miss</em>, you want that to be as low as possible. This number represents the number of times that Varnish had to hit Apache. Having a low <em>MAIN.cache_miss</em> means that we are only tapping Apache when we must.<h4 id=troubleshooting>Troubleshooting</h4><p>Since we added that line in our <code>default.vcl</code> file for <code>X-Cache</code>, we can see which files are being served by Varnish. Using dev tools in Chrome/Safari or Firefox, we can look for a header in our request called <code>X-Cache</code>.<div class=center><a title="Varnish x-cache header example" href=/images/varnish-x-cache.png target=_blank><img alt="Varnish x-cache header example" src=/images/varnish-x-cache.png></a></div><p>You can see that this item was <em>HIT</em>. This means that it will be counted in the <em>MAIN.cache_hit</em> column and not <em>MAIN.cache_miss</em> column. Good!<p>Things that mess up Varnish are headers and cookie headers especially. Sometimes you want or need some headers though. This setup does not allow any cookies to get through. If you had a normal CMS with this setup, you would find you wouldn't be able to log in, or there might be some CSRF Token (Cross Site Request Forgery) issues with form submissions if you use CSRF.<p>Varnish will let you control different areas where cookies or other things can change. You will want to refer to the <a href=https://www.varnish-cache.org/trac/wiki/VCLExampleRemovingSomeCookies>Varnish Documentation</a> for these advanced features.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Most likely, you will only change the <code>-a</code> part to <code>80</code>.<p>Our Varnish configuration for our site lives at <code>/etc/varnish/default.vcl</code>, here is the one I am using:</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/0feec6ab77078ad3fdce.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/0feec6ab77078ad3fdce.js src=about:blank></iframe><p>It is very basic. I really only want to cache text files (HTML, CSS, Javascript/JSON) and images.<p>To restart Varnish, use <code>service varnish restart</code>.<h4 id=restarting-varnish>Restarting Varnish</h4><p>If you restart or run out of memory, Varnish will rebuild the cache. This isn't great because you are trying to keep Varnish alive and the cache enabled.<h3 id=testing>Testing</h3><p>At this point we are ready to test.<p>I would suggest running the command <code>vanrnishstat</code> on your remote server so you can see things happening in the Varnish cache. Pressing the arrow keys up and down will give you a description of the item.<p>Then you can go to you site and click around. You should see the Varnish Stat table getting updated. You will want to watch the <em>MAIN.cache_hit</em> and <em>MAIN.cache_miss</em> numbers.<p>You want the <em>MAIN.cache_hit</em> to be as high as possible. This means that your Apache is not getting tapped for information, but Varnish is serving it straight to the client.<p>For the <em>MAIN.cache_miss</em>, you want that to be as low as possible. This number represents the number of times that Varnish had to hit Apache. Having a low <em>MAIN.cache_miss</em> means that we are only tapping Apache when we must.<h4 id=troubleshooting>Troubleshooting</h4><p>Since we added that line in our <code>default.vcl</code> file for <code>X-Cache</code>, we can see which files are being served by Varnish. Using dev tools in Chrome/Safari or Firefox, we can look for a header in our request called <code>X-Cache</code>.<div class=center><a title="Varnish x-cache header example" href=/images/varnish-x-cache.png target=_blank><img alt="Varnish x-cache header example" src=/images/varnish-x-cache.png></a></div><p>You can see that this item was <em>HIT</em>. This means that it will be counted in the <em>MAIN.cache_hit</em> column and not <em>MAIN.cache_miss</em> column. Good!<p>Things that mess up Varnish are headers and cookie headers especially. Sometimes you want or need some headers though. This setup does not allow any cookies to get through. If you had a normal CMS with this setup, you would find you wouldn't be able to log in, or there might be some CSRF Token (Cross Site Request Forgery) issues with form submissions if you use CSRF.<p>Varnish will let you control different areas where cookies or other things can change. You will want to refer to the <a rel="noopener nofollow noreferrer" href=https://www.varnish-cache.org/trac/wiki/VCLExampleRemovingSomeCookies target=_blank>Varnish Documentation</a> for these advanced features.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/view-folder-tree-in-macosx-terminal/index.html b/docs/web/view-folder-tree-in-macosx-terminal/index.html
index 573f6d8..eb1a52d 100644
--- a/docs/web/view-folder-tree-in-macosx-terminal/index.html
+++ b/docs/web/view-folder-tree-in-macosx-terminal/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>View Folder Tree in MacOSX Terminal | OhDoyleRules</title><meta content="View Folder Tree in MacOSX Terminal | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="View Folder Tree in MacOSX Terminal" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="View Folder Tree in MacOSX Terminal" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="View Folder Tree in MacOSX Terminal" name=description><meta content="View Folder Tree in MacOSX Terminal" itemprop=description><meta content="View Folder Tree in MacOSX Terminal" property=og:description><meta content="View Folder Tree in MacOSX Terminal" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="View Folder Tree in MacOSX Terminal | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="view, folder, tree, macosx, terminal, bash, shell, command" itemprop=keywords><meta content="view, folder, tree, macosx, terminal, bash, shell, command" property=article:tag><meta content="view, folder, tree, macosx, terminal, bash, shell, command" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">View Folder Tree in MacOSX Terminal</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p><a title="terminal tree command" href=https://coderwall.com/p/owb6eg>View Folder Tree in MacOSX Terminal</a><p><a href=/images/Screen-Shot-2012-11-19-at-1.05.22-PM11.png><img alt="zsh tree alias" title="zsh tree alias" src=/images/Screen-Shot-2012-11-19-at-1.05.22-PM11.png></a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>View Folder Tree in MacOSX Terminal | OhDoyleRules</title><meta content="View Folder Tree in MacOSX Terminal | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="View Folder Tree in MacOSX Terminal" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="View Folder Tree in MacOSX Terminal" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="View Folder Tree in MacOSX Terminal" name=description><meta content="View Folder Tree in MacOSX Terminal" itemprop=description><meta content="View Folder Tree in MacOSX Terminal" property=og:description><meta content="View Folder Tree in MacOSX Terminal" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="View Folder Tree in MacOSX Terminal | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="view, folder, tree, macosx, terminal, bash, shell, command" itemprop=keywords><meta content="view, folder, tree, macosx, terminal, bash, shell, command" property=article:tag><meta content="view, folder, tree, macosx, terminal, bash, shell, command" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/view-folder-tree-in-macosx-terminal/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">View Folder Tree in MacOSX Terminal</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>November 19, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p><a rel="noopener nofollow noreferrer" title="terminal tree command" href=https://coderwall.com/p/owb6eg target=_blank>View Folder Tree in MacOSX Terminal</a><p><a href=/images/Screen-Shot-2012-11-19-at-1.05.22-PM11.png><img alt="zsh tree alias" decoding=async loading=lazy src=/images/Screen-Shot-2012-11-19-at-1.05.22-PM11.png title=zsh%20tree%20alias></a></div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/vue-omnibar-component/index.html b/docs/web/vue-omnibar-component/index.html
index 36bb4f1..8a73dcc 100644
--- a/docs/web/vue-omnibar-component/index.html
+++ b/docs/web/vue-omnibar-component/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vue Omnibar Component | OhDoyleRules</title><meta content="Vue Omnibar Component | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vue Omnibar Component" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/vue-omnibar-component/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/vue-omnibar-component/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vue Omnibar Component" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features" name=description><meta content="A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features" itemprop=description><meta content="A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features" property=og:description><meta content="A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vue Omnibar Component | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, component, modal, omnibar, command palette, open anywhere" itemprop=keywords><meta content="vue, component, modal, omnibar, command palette, open anywhere" property=article:tag><meta content="vue, component, modal, omnibar, command palette, open anywhere" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/vue-omnibar-component/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vue Omnibar Component</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 05, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>I'm working on a project right now that requires us to have a search modal. The feature is actually inspired by the <a href=https://www.notion.so/Searching-with-Quick-Find-af945b6e69b64437afba2d143e4b546f>"Quick Search" experience in Notion</a>. I looked around for a component that was already created that would do this for me. I couldn't find one, so I wrote my own!<p>This component allows you to create modal popups that emulate omnibar, command palette, open anywhere, or other "search and act" functions/features. It is really simple and uses slots to make it easier to customize. It comes with some basic styling so you don't have to fight with it too much.<p>One of the cool things about the search box in the modal is that it is using <a href=https://fusejs.io/>Fuse.js</a> for the filtering part. This means you can search complex objects really easy. You can even rank-order properties that are being searched! Pretty slick, right?<h2 id=demo>Demo</h2><div class=center><a title="demo of the omnibar modal" href=https://james2doyle.github.io/vue-omnibar target=_blank><img alt="demo of the omnibar modal" src=https://james2doyle.github.io/vue-omnibar/demo.gif></a></div><p>Check out the <a href=https://james2doyle.github.io/vue-omnibar>website for the component</a> in order to view the demo.<h2 id=features>Features</h2><ul><li><input checked disabled type=checkbox> built-in filtering using <a href=https://fusejs.io/>Fuse.js</a><li><input checked disabled type=checkbox> custom key combo support<li><input checked disabled type=checkbox> listens for <code>esc</code> key<li><input checked disabled type=checkbox> bring your own styling (basic styles included)<li><input checked disabled type=checkbox> arrow key support<li><input checked disabled type=checkbox> uses slots for best flexibility<li><input checked disabled type=checkbox> "off-click" closes the modal</ul><h2 id=installation>Installation</h2><pre class=language-bash data-lang=bash style=background:#2b303b;color:#c0c5ce><code class=language-bash data-lang=bash><span style=color:#bf616a>npm</span><span> install vue-omnibar
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vue Omnibar Component | OhDoyleRules</title><meta content="Vue Omnibar Component | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vue Omnibar Component" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/vue-omnibar-component/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/vue-omnibar-component/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vue Omnibar Component" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features" name=description><meta content="A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features" itemprop=description><meta content="A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features" property=og:description><meta content="A Vue component that is used to create modal popups that emulate omnibar, command palette, open anywhere, or other search functions/features" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vue Omnibar Component | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, component, modal, omnibar, command palette, open anywhere" itemprop=keywords><meta content="vue, component, modal, omnibar, command palette, open anywhere" property=article:tag><meta content="vue, component, modal, omnibar, command palette, open anywhere" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/vue-omnibar-component/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vue Omnibar Component</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 05, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>I'm working on a project right now that requires us to have a search modal. The feature is actually inspired by the <a rel="noopener nofollow noreferrer" href=https://www.notion.so/Searching-with-Quick-Find-af945b6e69b64437afba2d143e4b546f target=_blank>"Quick Search" experience in Notion</a>. I looked around for a component that was already created that would do this for me. I couldn't find one, so I wrote my own!<p>This component allows you to create modal popups that emulate omnibar, command palette, open anywhere, or other "search and act" functions/features. It is really simple and uses slots to make it easier to customize. It comes with some basic styling so you don't have to fight with it too much.<p>One of the cool things about the search box in the modal is that it is using <a rel="noopener nofollow noreferrer" href=https://fusejs.io/ target=_blank>Fuse.js</a> for the filtering part. This means you can search complex objects really easy. You can even rank-order properties that are being searched! Pretty slick, right?<h2 id=demo>Demo</h2><div class=center><a title="demo of the omnibar modal" href=https://james2doyle.github.io/vue-omnibar target=_blank><img alt="demo of the omnibar modal" src=https://james2doyle.github.io/vue-omnibar/demo.gif></a></div><p>Check out the <a rel="noopener nofollow noreferrer" href=https://james2doyle.github.io/vue-omnibar target=_blank>website for the component</a> in order to view the demo.<h2 id=features>Features</h2><ul><li><input checked disabled type=checkbox> built-in filtering using <a rel="noopener nofollow noreferrer" href=https://fusejs.io/ target=_blank>Fuse.js</a><li><input checked disabled type=checkbox> custom key combo support<li><input checked disabled type=checkbox> listens for <code>esc</code> key<li><input checked disabled type=checkbox> bring your own styling (basic styles included)<li><input checked disabled type=checkbox> arrow key support<li><input checked disabled type=checkbox> uses slots for best flexibility<li><input checked disabled type=checkbox> "off-click" closes the modal</ul><h2 id=installation>Installation</h2><pre class=language-bash data-lang=bash style=background:#2b303b;color:#c0c5ce><code class=language-bash data-lang=bash><span style=color:#bf616a>npm</span><span> install vue-omnibar
 </span></code></pre><h3 id=global-usage>Global Usage</h3><pre class=language-js data-lang=js style=background:#2b303b;color:#c0c5ce><code class=language-js data-lang=js><span style=color:#b48ead>import </span><span style=color:#bf616a>Vue </span><span style=color:#b48ead>from </span><span>'</span><span style=color:#a3be8c>vue</span><span>';
 </span><span style=color:#b48ead>import </span><span style=color:#bf616a>Omnibar </span><span style=color:#b48ead>from </span><span>'</span><span style=color:#a3be8c>vue-omnibar</span><span>';
 </span><span>
@@ -12,4 +12,4 @@
 </span><span>  },
 </span><span>  </span><span style=color:#65737e>// ...
 </span><span>};
-</span></code></pre><p>To learn more, check out the <a href=https://james2doyle.github.io/vue-omnibar>website for the component</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>To learn more, check out the <a rel="noopener nofollow noreferrer" href=https://james2doyle.github.io/vue-omnibar target=_blank>website for the component</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/vue-toggle-component/index.html b/docs/web/vue-toggle-component/index.html
index e2ad4db..2492100 100644
--- a/docs/web/vue-toggle-component/index.html
+++ b/docs/web/vue-toggle-component/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vue Toggle Component | OhDoyleRules</title><meta content="Vue Toggle Component | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vue Toggle Component" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/vue-toggle-component/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/vue-toggle-component/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vue Toggle Component" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A Vue component that is used to create simple switches, toggles, and show/hide experiences" name=description><meta content="A Vue component that is used to create simple switches, toggles, and show/hide experiences" itemprop=description><meta content="A Vue component that is used to create simple switches, toggles, and show/hide experiences" property=og:description><meta content="A Vue component that is used to create simple switches, toggles, and show/hide experiences" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vue Toggle Component | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, component, toggle, ui, state, switch" itemprop=keywords><meta content="vue, component, toggle, ui, state, switch" property=article:tag><meta content="vue, component, toggle, ui, state, switch" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/vue-toggle-component/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vue Toggle Component</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 04, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you ever created a switch component that just shows and hides an element? How about an accordion? Or maybe a slider? If you distill down these components into their core offering, it is really just a simple state toggle that is either a <code>boolean</code> or a index/key value that is being used.<p>I created this component because it is something I use all the time. I wanted to share it with other people so I released it as a package. The state can be either a <code>boolean</code> or a <code>string</code>. This means you can use it to create experiences that are not just on/off and show/hide.<p>With a simple toggle, you can build almost any UI experience. Think about experiences like show/hide, accordions, nested menus, and even sliders, they mostly revolve around a single piece of state.<h2 id=demo>Demo</h2><p>Check out <a href=https://james2doyle.github.io/vue-toggle>the website for demos</a>.<h2 id=installation>Installation</h2><pre class=language-bash data-lang=bash style=background:#2b303b;color:#c0c5ce><code class=language-bash data-lang=bash><span style=color:#bf616a>npm</span><span> install</span><span style=color:#bf616a> -S</span><span> vue-ui-toggle
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Vue Toggle Component | OhDoyleRules</title><meta content="Vue Toggle Component | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Vue Toggle Component" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/vue-toggle-component/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/vue-toggle-component/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Vue Toggle Component" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A Vue component that is used to create simple switches, toggles, and show/hide experiences" name=description><meta content="A Vue component that is used to create simple switches, toggles, and show/hide experiences" itemprop=description><meta content="A Vue component that is used to create simple switches, toggles, and show/hide experiences" property=og:description><meta content="A Vue component that is used to create simple switches, toggles, and show/hide experiences" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Vue Toggle Component | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="vue, component, toggle, ui, state, switch" itemprop=keywords><meta content="vue, component, toggle, ui, state, switch" property=article:tag><meta content="vue, component, toggle, ui, state, switch" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/vue-toggle-component/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Vue Toggle Component</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>December 04, 2020</span></span><div itemprop="ArticleBody text" class=main-content><p>Have you ever created a switch component that just shows and hides an element? How about an accordion? Or maybe a slider? If you distill down these components into their core offering, it is really just a simple state toggle that is either a <code>boolean</code> or a index/key value that is being used.<p>I created this component because it is something I use all the time. I wanted to share it with other people so I released it as a package. The state can be either a <code>boolean</code> or a <code>string</code>. This means you can use it to create experiences that are not just on/off and show/hide.<p>With a simple toggle, you can build almost any UI experience. Think about experiences like show/hide, accordions, nested menus, and even sliders, they mostly revolve around a single piece of state.<h2 id=demo>Demo</h2><p>Check out <a rel="noopener nofollow noreferrer" href=https://james2doyle.github.io/vue-toggle target=_blank>the website for demos</a>.<h2 id=installation>Installation</h2><pre class=language-bash data-lang=bash style=background:#2b303b;color:#c0c5ce><code class=language-bash data-lang=bash><span style=color:#bf616a>npm</span><span> install</span><span style=color:#bf616a> -S</span><span> vue-ui-toggle
 </span></code></pre><pre class=language-javascript data-lang=javascript style=background:#2b303b;color:#c0c5ce><code class=language-javascript data-lang=javascript><span style=color:#b48ead>const </span><span style=color:#bf616a>Toggle </span><span>= </span><span style=color:#96b5b4>require</span><span>('</span><span style=color:#a3be8c>vue-ui-toggle</span><span>'); </span><span style=color:#65737e>// es5/node
 </span><span style=color:#65737e>// import Toggle from 'vue-ui-toggle'; // es6
 </span><span>
@@ -12,4 +12,4 @@
 </span><span>  },
 </span><span>  </span><span style=color:#65737e>// ...
 </span><span>};
-</span></code></pre><p>To learn more, check out the <a href=https://james2doyle.github.io/vue-toggle>website for the component</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>To learn more, check out the <a rel="noopener nofollow noreferrer" href=https://james2doyle.github.io/vue-toggle target=_blank>website for the component</a>.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/wordpress-browser-body-class/index.html b/docs/web/wordpress-browser-body-class/index.html
index 5e6eab1..1a4f53e 100644
--- a/docs/web/wordpress-browser-body-class/index.html
+++ b/docs/web/wordpress-browser-body-class/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>WordPress Browser Body Class | OhDoyleRules</title><meta content="WordPress Browser Body Class | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="WordPress Browser Body Class" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/wordpress-browser-body-class/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/wordpress-browser-body-class/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="WordPress Browser Body Class" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required." name=description><meta content="A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required." itemprop=description><meta content="A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required." property=og:description><meta content="A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="WordPress Browser Body Class | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="wordpress, browser, detect, body, class, no plugin" itemprop=keywords><meta content="wordpress, browser, detect, body, class, no plugin" property=article:tag><meta content="wordpress, browser, detect, body, class, no plugin" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/wordpress-browser-body-class/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">WordPress Browser Body Class</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 21, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>Sometimes, browsers just don't behave. While working on a WordPress site, I had a particular styling issue that was affecting Safari. I was wondering what the best way to target the browser was.<p>If you didn't know, there are some primitive <a href=https://codex.wordpress.org/Global_Variables#Browser_Detection_Booleans>browser detection booleans</a> that are built into WordPress.<p>Using those primitives, I was able to whip up a little snippet that adds classes to the body tag depending on the browser - no plugins required.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/979b09fc7c676baf3283bdb113b3db6d.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/979b09fc7c676baf3283bdb113b3db6d.js src=about:blank></iframe><p>As you can see, we simply loop over each one of those browser booleans and append them to the output.<p>Easy, and no plugin needed. Just add that code to your <code>functions.php</code> file.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>WordPress Browser Body Class | OhDoyleRules</title><meta content="WordPress Browser Body Class | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="WordPress Browser Body Class" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/wordpress-browser-body-class/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/wordpress-browser-body-class/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="WordPress Browser Body Class" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required." name=description><meta content="A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required." itemprop=description><meta content="A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required." property=og:description><meta content="A simple WordPress tutorial for adding a class to the body that represents the browser. No plugin required." name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="WordPress Browser Body Class | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="wordpress, browser, detect, body, class, no plugin" itemprop=keywords><meta content="wordpress, browser, detect, body, class, no plugin" property=article:tag><meta content="wordpress, browser, detect, body, class, no plugin" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/wordpress-browser-body-class/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">WordPress Browser Body Class</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>June 21, 2017</span></span><div itemprop="ArticleBody text" class=main-content><p>Sometimes, browsers just don't behave. While working on a WordPress site, I had a particular styling issue that was affecting Safari. I was wondering what the best way to target the browser was.<p>If you didn't know, there are some primitive <a rel="noopener nofollow noreferrer" href=https://codex.wordpress.org/Global_Variables#Browser_Detection_Booleans target=_blank>browser detection booleans</a> that are built into WordPress.<p>Using those primitives, I was able to whip up a little snippet that adds classes to the body tag depending on the browser - no plugins required.</p><iframe srcdoc="`<script src='https://gist.github.com/james2doyle/979b09fc7c676baf3283bdb113b3db6d.js'></script>`" class=iframes id=https://gist.github.com/james2doyle/979b09fc7c676baf3283bdb113b3db6d.js src=about:blank></iframe><p>As you can see, we simply loop over each one of those browser booleans and append them to the output.<p>Easy, and no plugin needed. Just add that code to your <code>functions.php</code> file.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/wordpress-plugin-swipe-js/index.html b/docs/web/wordpress-plugin-swipe-js/index.html
index 05c490d..e15e467 100644
--- a/docs/web/wordpress-plugin-swipe-js/index.html
+++ b/docs/web/wordpress-plugin-swipe-js/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>WordPress Plugin Swipe.js | OhDoyleRules</title><meta content="WordPress Plugin Swipe.js | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="WordPress Plugin Swipe.js" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="WordPress Plugin Swipe.js" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="WordPress Plugin Swipe.js" name=description><meta content="WordPress Plugin Swipe.js" itemprop=description><meta content="WordPress Plugin Swipe.js" property=og:description><meta content="WordPress Plugin Swipe.js" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="WordPress Plugin Swipe.js | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="wordpress, plugin, swipe.js, slider, slideshow, javascript" itemprop=keywords><meta content="wordpress, plugin, swipe.js, slider, slideshow, javascript" property=article:tag><meta content="wordpress, plugin, swipe.js, slider, slideshow, javascript" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">WordPress Plugin Swipe.js</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I have made my first WordPress plugin and github project: <a title="WordPress Plugin: SwipeJS" href=https://github.com/james2doyle/Swipe.js-WordPress-Plugin>A WordPress plugin for Swipe.js</a>.<p>This is my first attempt at a WordPress plugin and a Github project.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>WordPress Plugin Swipe.js | OhDoyleRules</title><meta content="WordPress Plugin Swipe.js | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="WordPress Plugin Swipe.js" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="WordPress Plugin Swipe.js" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="WordPress Plugin Swipe.js" name=description><meta content="WordPress Plugin Swipe.js" itemprop=description><meta content="WordPress Plugin Swipe.js" property=og:description><meta content="WordPress Plugin Swipe.js" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="WordPress Plugin Swipe.js | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="wordpress, plugin, swipe.js, slider, slideshow, javascript" itemprop=keywords><meta content="wordpress, plugin, swipe.js, slider, slideshow, javascript" property=article:tag><meta content="wordpress, plugin, swipe.js, slider, slideshow, javascript" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/wordpress-plugin-swipe-js/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">WordPress Plugin Swipe.js</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>August 14, 2012</span></span><div itemprop="ArticleBody text" class=main-content><p>I have made my first WordPress plugin and github project: <a rel="noopener nofollow noreferrer" title="WordPress Plugin: SwipeJS" href=https://github.com/james2doyle/Swipe.js-WordPress-Plugin target=_blank>A WordPress plugin for Swipe.js</a>.<p>This is my first attempt at a WordPress plugin and a Github project.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/wordpress-wp-content-500-errors/index.html b/docs/web/wordpress-wp-content-500-errors/index.html
index 001c827..cff26e3 100644
--- a/docs/web/wordpress-wp-content-500-errors/index.html
+++ b/docs/web/wordpress-wp-content-500-errors/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Fixing Wordpress wp-content 500 Errors | OhDoyleRules</title><meta content="Fixing Wordpress wp-content 500 Errors | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Fixing Wordpress wp-content 500 Errors" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Fixing Wordpress wp-content 500 Errors" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to fix the issue where Wordpress wp-content assets are throwing 500 errors" name=description><meta content="How to fix the issue where Wordpress wp-content assets are throwing 500 errors" itemprop=description><meta content="How to fix the issue where Wordpress wp-content assets are throwing 500 errors" property=og:description><meta content="How to fix the issue where Wordpress wp-content assets are throwing 500 errors" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Fixing Wordpress wp-content 500 Errors | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="wordpress, wp, content, error, 500, misconfigure, hack, upload, index, htaccess, apache" itemprop=keywords><meta content="wordpress, wp, content, error, 500, misconfigure, hack, upload, index, htaccess, apache" property=article:tag><meta content="wordpress, wp, content, error, 500, misconfigure, hack, upload, index, htaccess, apache" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Fixing Wordpress wp-content 500 Errors</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 29, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>Yesterday, a friend emailed me about her Wordpress site acting crazy. For some reason all the site assets weren't loading and were returning 500 errors.<h4 id=troubleshooting>Troubleshooting</h4><p>I had her check the usual things: <code>.htaccess</code> is there, the asset actually existed, some plugin wasn't busting the site. Each one was throwing a 500 error, so it was something else.<p>Eventually she gave me her log in, which had a <em>super simple password</em>, and I logged in to see what was up. Nothing seemed to be wrong, no crazy plugins or weird issues.<p>I then logged into the FTP server to sniff around. Checked the <code>.htaccess</code>, nothing was wrong. I checked the <code>index.php</code>, didn't see anything weird.<p>I opened the <code>wp-config.php</code> and added all the <a href=https://codex.wordpress.org/Debugging_in_WordPress#Example_wp-config.php_for_Debugging>debugging constants</a>, here there are for laziness:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>// Enable WP_DEBUG mode
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Fixing Wordpress wp-content 500 Errors | OhDoyleRules</title><meta content="Fixing Wordpress wp-content 500 Errors | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Fixing Wordpress wp-content 500 Errors" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Fixing Wordpress wp-content 500 Errors" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="How to fix the issue where Wordpress wp-content assets are throwing 500 errors" name=description><meta content="How to fix the issue where Wordpress wp-content assets are throwing 500 errors" itemprop=description><meta content="How to fix the issue where Wordpress wp-content assets are throwing 500 errors" property=og:description><meta content="How to fix the issue where Wordpress wp-content assets are throwing 500 errors" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Fixing Wordpress wp-content 500 Errors | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="wordpress, wp, content, error, 500, misconfigure, hack, upload, index, htaccess, apache" itemprop=keywords><meta content="wordpress, wp, content, error, 500, misconfigure, hack, upload, index, htaccess, apache" property=article:tag><meta content="wordpress, wp, content, error, 500, misconfigure, hack, upload, index, htaccess, apache" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/wordpress-wp-content-500-errors/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Fixing Wordpress wp-content 500 Errors</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 29, 2015</span></span><div itemprop="ArticleBody text" class=main-content><p>Yesterday, a friend emailed me about her Wordpress site acting crazy. For some reason all the site assets weren't loading and were returning 500 errors.<h4 id=troubleshooting>Troubleshooting</h4><p>I had her check the usual things: <code>.htaccess</code> is there, the asset actually existed, some plugin wasn't busting the site. Each one was throwing a 500 error, so it was something else.<p>Eventually she gave me her log in, which had a <em>super simple password</em>, and I logged in to see what was up. Nothing seemed to be wrong, no crazy plugins or weird issues.<p>I then logged into the FTP server to sniff around. Checked the <code>.htaccess</code>, nothing was wrong. I checked the <code>index.php</code>, didn't see anything weird.<p>I opened the <code>wp-config.php</code> and added all the <a rel="noopener nofollow noreferrer" href=https://codex.wordpress.org/Debugging_in_WordPress#Example_wp-config.php_for_Debugging target=_blank>debugging constants</a>, here there are for laziness:<pre class=language-php data-lang=php style=background:#2b303b;color:#c0c5ce><code class=language-php data-lang=php><span>// Enable WP_DEBUG mode
 </span><span>define('WP_DEBUG', true);
 </span><span>
 </span><span>// Enable Debug logging to the /wp-content/debug.log file
@@ -10,4 +10,4 @@
 </span><span>
 </span><span>// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
 </span><span>define('SCRIPT_DEBUG', true);
-</span></code></pre><p>I then navigated around the site. The content (text, database data) was loading fine, but all the assets were busted. There was a map plugin that was hitting Google Maps and that loaded fine. I then knew it was this specific site.<p>After poking around some more, I noticed an <code>index.php</code> and a <code>.htaccess</code> in the root of <code>/wp-content</code>.<h4 id=the-fix>The Fix</h4><p>Well, I have come across this problem before. <strong>Wordpress was hacked</strong>. Hacked might be a strong word, since the password was really weak. A bot probably had that password in it's script and guessed it without issue.<p>The "hacker" then uploaded a file to <code>/wp-content/.htaccess</code> and <code>/wp-content/index.php</code>. These files were intercepting request to the <code>wp-content</code> folder.<p>When I removed the files, the site came back to life!<p>So if your Wordpress site is suddenly getting 500 errors, check for rogue <code>index.php</code> or <code>.htaccess</code> files.<h4 id=create-a-better-password>Create A Better Password</h4><p>If you are looking to create a strong (but human readable) password, you should take a look at <a href=https://en.wikipedia.org/wiki/Diceware>Diceware</a>. In short, it is a huge list of uncommon words that get randomly combined to give you a strong password you can read.<p>Here is the definition from Wikipedia:<blockquote><p>Diceware is a method for creating passphrases, passwords, and other cryptographic variables using an ordinary die from a pair of dice as a hardware random number generator. For each word in the passphrase, five rolls of the dice are required. The numbers from 1 to 6 that come up in the rolls are assembled as a five-digit number, e.g. 43146. That number is then used to look up a word in a word list.</blockquote><p>Here is an <a href=http://www.ethanresnick.com/diceware/>online tool that can generate passwords for you</a>. This site has the default set to word count set to <em>5</em>. As of today, you should probably use <em>6</em> words to generate your password.<h4 id=has-your-wordpress-been-hacked>Has Your Wordpress Been Hacked?</h4><p>Do you know any common Wordpress hacks that occur?</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>I then navigated around the site. The content (text, database data) was loading fine, but all the assets were busted. There was a map plugin that was hitting Google Maps and that loaded fine. I then knew it was this specific site.<p>After poking around some more, I noticed an <code>index.php</code> and a <code>.htaccess</code> in the root of <code>/wp-content</code>.<h4 id=the-fix>The Fix</h4><p>Well, I have come across this problem before. <strong>Wordpress was hacked</strong>. Hacked might be a strong word, since the password was really weak. A bot probably had that password in it's script and guessed it without issue.<p>The "hacker" then uploaded a file to <code>/wp-content/.htaccess</code> and <code>/wp-content/index.php</code>. These files were intercepting request to the <code>wp-content</code> folder.<p>When I removed the files, the site came back to life!<p>So if your Wordpress site is suddenly getting 500 errors, check for rogue <code>index.php</code> or <code>.htaccess</code> files.<h4 id=create-a-better-password>Create A Better Password</h4><p>If you are looking to create a strong (but human readable) password, you should take a look at <a rel="noopener nofollow noreferrer" href=https://en.wikipedia.org/wiki/Diceware target=_blank>Diceware</a>. In short, it is a huge list of uncommon words that get randomly combined to give you a strong password you can read.<p>Here is the definition from Wikipedia:<blockquote><p>Diceware is a method for creating passphrases, passwords, and other cryptographic variables using an ordinary die from a pair of dice as a hardware random number generator. For each word in the passphrase, five rolls of the dice are required. The numbers from 1 to 6 that come up in the rolls are assembled as a five-digit number, e.g. 43146. That number is then used to look up a word in a word list.</blockquote><p>Here is an <a rel="noopener nofollow noreferrer" href=http://www.ethanresnick.com/diceware/ target=_blank>online tool that can generate passwords for you</a>. This site has the default set to word count set to <em>5</em>. As of today, you should probably use <em>6</em> words to generate your password.<h4 id=has-your-wordpress-been-hacked>Has Your Wordpress Been Hacked?</h4><p>Do you know any common Wordpress hacks that occur?</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
diff --git a/docs/web/zapier-webhooks-for-html-forms/index.html b/docs/web/zapier-webhooks-for-html-forms/index.html
index 7d04ab7..1823daa 100644
--- a/docs/web/zapier-webhooks-for-html-forms/index.html
+++ b/docs/web/zapier-webhooks-for-html-forms/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Zapier Webhooks for HTML forms | OhDoyleRules</title><meta content="Using Zapier Webhooks for HTML forms | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Zapier Webhooks for HTML forms" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Zapier Webhooks for HTML forms" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form" name=description><meta content="You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form" itemprop=description><meta content="You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form" property=og:description><meta content="You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Zapier Webhooks for HTML forms | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="zapier, webhook, html, form, post, hook, submit, static, headless" itemprop=keywords><meta content="zapier, webhook, html, form, post, hook, submit, static, headless" property=article:tag><meta content="zapier, webhook, html, form, post, hook, submit, static, headless" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Zapier Webhooks for HTML forms</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 28, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>If you don't know about <a href=https://zapier.com/>Zapier</a>, it's a service that allows you to "automate everything". I've been using it for over 4 years to automate tons of different things like posting daily Trello tasks to Slack, activity in Intercom to Emails, and even a custom scheduled job that gives me task information for the current day.<p>One of the best built-in zaps (that's what they call the tasks) is the <a href=https://zapier.com/app-directory/webhook/integrations>webhook zap</a> which let's you send a <code>POST</code> request to Zapier and then connect that with the 100s of other integrations. You can use this for all types of things. One thing I have found it to be good for is handling form submissions on static sites.<p>As the concept of static sites and "serverless" keeps getting more and more popular, so do the services surrounding those concepts. But if you know where to look, and how to set things up, most of those "services" that supplement static sites can be replace with some savvy Zapier setups.<p>There are tons of "form" apps out there to allow you to create endpoints for your site to submit to. A lot of them even suggest using Zapier to handle the post-submission step. It's funny, because you can get a pretty robust setup just using Zapier on it's own and not having to use these services. Also, Zapier supports file uploads! So you can even handle attachments in your forms or <code>POST</code> request. Handy!<p>Anyway, on to the form. Here is an example of an HTML form that will successfully:<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span><</span><span style=color:#bf616a>form </span><span style=color:#d08770>action</span><span>="</span><span style=color:#a3be8c>https://hooks.zapier.com/hooks/catch/1234567/abcd123/</span><span>"
+<!doctype html><html lang=en><head><meta charset=utf-8><meta content=public http-equiv=Cache-control><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1,maximum-scale=5" name=viewport><title>Using Zapier Webhooks for HTML forms | OhDoyleRules</title><meta content="Using Zapier Webhooks for HTML forms | OhDoyleRules" name=twitter:title><meta content=KM-5h_iJ7JJsGeUp4ncEoYCBKft1ko1A4gBpjIzT0p4 name=google-site-verification><meta content="Using Zapier Webhooks for HTML forms" itemprop=name><meta content=OhDoyleRules property=og:site_name><meta content=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/ itemprop=url><meta content=james2doyle@gmail.com itemprop=email><meta content=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/ property=og:url><meta itemprop="image logo" content=/icons/logo.png><meta content=/icons/logo.png property=og:image><link href=/icons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/icons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/icons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/site.webmanifest rel=manifest><link color=#333333 href=/icons/safari-pinned-tab.svg rel=mask-icon><link href=/icons/favicon.ico rel=icon sizes=any><link href=/icons/favicon.svg rel=icon type=image/svg+xml><meta content=/browserconfig.xml name=msapplication-config><meta content=#ffffff name=msapplication-TileColor><meta content=#ffffff name=theme-color><meta content=summary name=twitter:card><meta content=@james2doyle name=twitter:site><meta content="Using Zapier Webhooks for HTML forms" name=twitter:title><meta content=@james2doyle name=twitter:creator><meta content=/icons/logo.png name=twitter:image><meta content=/ name=twitter:domain><link href=/icons/logo.svg rel=icon><meta content="You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form" name=description><meta content="You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form" itemprop=description><meta content="You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form" property=og:description><meta content="You can use Zapier webhooks to handle HTML form submissions - if you know how to set up your form" name=twitter:description><link href=https://c.disquscdn.com rel=dns-prefetch><meta content=article property=og:type><meta content="Using Zapier Webhooks for HTML forms | OhDoyleRules" property=og:title><meta content="james2doyle@gmail.com James Doyle" property=article:author><meta content="zapier, webhook, html, form, post, hook, submit, static, headless" itemprop=keywords><meta content="zapier, webhook, html, form, post, hook, submit, static, headless" property=article:tag><meta content="zapier, webhook, html, form, post, hook, submit, static, headless" property=og:keywords><link href=https://www.google-analytics.com rel=dns-prefetch><link rel="shortcut icon" href=/favicon.ico><link href=https://ohdoylerules.com/web/zapier-webhooks-for-html-forms/ rel=canonical><link href=https://ohdoylerules.com/atom.xml rel=alternate title=atom type=application/atom+xml><style>body{font-feature-settings:'lnum' 1;font-variant-numeric:slashed-zero;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.post-info{margin-bottom:1rem}a.none{color:inherit;border:none;opacity:1}a.none:hover {background:none;opacity:.6}.center{text-align:center}.center img{max-width:100%;height:auto}pre{color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4}pre code.language-diff span:nth-child(1n + 7){color:#50fa7b}body.dark table.highlight tr:nth-child(even){background-color:#f6f8fa}body.dark table.highlight td,body.dark table.highlight th{border-color:rgba(27,31,35,.3)}html.is-changing .transition-fade{view-transition-name:main}:view-transition-old(main){animation:fade .25s ease-in-out both}:view-transition-new(main){animation:fade .25s ease-in-out both reverse}@keyframes fade{from{opacity:1}to{opacity:0}}html.is-changing:not(.swup-native) .transition-fade {will-change:opacity;transition:.25s opacity;opacity:1}html.is-animating:not(.swup-native) .transition-fade {opacity:0}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}@media (prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}:selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0px - (50vw - 50%)) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}header>:last-child{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{cursor:not-allowed;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{background:var(--nc-lk-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono)}code,kbd,pre,samp{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:700}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd:before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:700;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%}iframe{border:0;width:100%;height:100%;min-height:300px}</style><style media=screen>body .gist table.highlight tr:nth-child(even){background-color:inherit}.gist{font-size:18px}.clone-url-button > .clone-url-link,.gist-file,.gist-meta,.octotree_toggle,a.button,a.minibutton,button.button,button.minibutton,span.button,span.minibutton,ul.comparison-list > li.title{background:linear-gradient(#202020,#181818)!important;border-color:#383838!important;border-radius:0 0 3px 3px!important;text-shadow:none!important;color:#b5b5b5!important}#facebox pre,#notebook .input_area,.CodeMirror,.api code,.api pre,.blob-code-context,.blob-expanded,.copyable-terminal,.highlight,.markdown-body .highlight pre,.markdown-body pre,.markdown-format .highlight pre,.markdown-format code,.markdown-format pre,.terminal,body.blog pre,body.blog pre > code{background-color:#1d1f21!important;color:#c5c8c6!important}.gist .blob-code{padding:1px 10px!important;text-align:left;background:#000;border:0}:selection{background:#24890d;color:#fff;text-shadow:none}:-moz-selection{background:#24890d;color:#fff;text-shadow:none}.blob-num{padding:10px 8px 9px;text-align:right;color:#6b6b6b!important;border:0}.blob-code,.blob-code-inner{color:#c5c8c6!important}.pl-c,.pl-c span{color:#969896!important;font-style:italic!important}.pl-c1{color:#de935f!important}.pl-cce{color:#de935f!important}.pl-cn{color:#de935f!important}.pl-coc{color:#de935f!important}.pl-cos{color:#b5bd68!important}.pl-e{color:#f0c674!important}.pl-ef{color:#f0c674!important}.pl-en{color:#f0c674!important}.pl-enc{color:#de935f!important}.pl-enf{color:#f0c674!important}.pl-enm{color:#f0c674!important}.pl-ens{color:#de935f!important}.pl-ent{color:#b294bb!important}.pl-entc{color:#f0c674!important}.pl-enti{color:#f0c674!important;font-weight:700!important}.pl-entm{color:#c66!important}.pl-eoa{color:#b294bb!important}.pl-eoac{color:#c66!important}.pl-eoac .pl-pde{color:#c66!important}.pl-eoai{color:#b294bb!important}.pl-eoai .pl-pde{color:#b294bb!important}.pl-eoi{color:#f0c674!important}.pl-k{color:#b294bb!important}.pl-ko{color:#b294bb!important}.pl-kolp{color:#b294bb!important}.pl-kos{color:#de935f!important}.pl-kou{color:#de935f!important}.pl-mai .pl-sf{color:#c66!important}.pl-mb{color:#b5bd68!important;font-weight:700!important}.pl-mc{color:#b294bb!important}.pl-mh .pl-pdh{color:#de935f!important}.pl-mi{color:#b294bb!important;font-style:italic!important}.pl-ml{color:#b5bd68!important}.pl-mm{color:#c66!important}.pl-mp{color:#81a2be!important}.pl-mp1 .pl-sf{color:#81a2be!important}.pl-mq{color:#de935f!important}.pl-mr{color:#b294bb!important}.pl-ms{color:#b294bb!important}.pl-pdb{color:#b5bd68!important;font-weight:700!important}.pl-pdc{color:#969896!important;font-style:italic!important}.pl-pdc1{color:#de935f!important}.pl-pde{color:#de935f!important}.pl-pdi{color:#b294bb!important;font-style:italic!important}.pl-pds{color:#b5bd68!important}.pl-pdv{color:#c66!important}.pl-pse{color:#de935f!important}.pl-pse .pl-s2{color:#de935f!important}.pl-s{color:#b294bb!important}.pl-s1{color:#b5bd68!important}.pl-s2{color:#c5c8c6!important}.pl-mp .pl-s3{color:#b294bb!important}.pl-s3{color:#81a2be!important}.pl-sc{color:#c5c8c6!important}.pl-scp{color:#de935f!important}.pl-sf{color:#dad085!important}.pl-smc{color:#f0c674!important}.pl-smi{color:#c5c8c6!important}.pl-smp{color:#c5c8c6!important}.pl-sok{color:#b294bb!important}.pl-sol{color:#b5bd68!important}.pl-som{color:#c66!important}.pl-sr{color:#c66!important}.pl-sra{color:#b294bb!important}.pl-src{color:#b294bb!important}.pl-sre{color:#b294bb!important}.pl-st{color:#b294bb!important}.pl-stj{color:#c5c8c6!important}.pl-stp{color:#de935f!important}.pl-sv{color:#de935f!important}.pl-v{color:#de935f!important}.pl-vi{color:#de935f!important}.pl-vo{color:#c66!important}.pl-vpf{color:#de935f!important}.pl-mi1{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-mdht{color:#8f9d6a!important;background:rgba(0,64,0,.5)!important}.pl-md{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdhf{color:#c66!important;background:rgba(64,0,0,.5)!important}.pl-mdr{color:#de935f!important;font-weight:400!important}.pl-mdh{color:#c66!important;font-weight:400!important}.pl-mdi{color:#c66!important;font-weight:400!important}.pl-ib{background-color:#c66!important}.pl-id{background-color:#c66!important;color:#fff!important}.pl-ii{background-color:#c66!important;color:#fff!important}.pl-iu{background-color:#c66!important}.pl-mo{color:#c5c8c6!important}.pl-mri{color:#de935f!important}.pl-ms1{background-color:#c5c8c6!important}.pl-va{color:#de935f!important}.pl-vpu{color:#de935f!important}.pl-entl{color:#c5c8c6!important}.CodeMirror-gutters{background:#222!important;border-right:1px solid #484848!important}.CodeMirror-guttermarker{color:#fff!important}.CodeMirror-guttermarker-subtle{color:#aaa!important}.CodeMirror-linenumber{color:#aaa!important}.CodeMirror-cursor{border-left:1px solid #fff!important}.CodeMirror-activeline-background{background:#27282e!important}.CodeMirror-matchingbracket{outline:1px solid grey!important;color:#fff!important}.cm-keyword{color:#f9ee98!important}.cm-atom{color:#fc0!important}.cm-number{color:#ca7841!important}.cm-def{color:#8da6ce!important}.cm-variable-2,span.cm-tag{color:#607392!important}.cm-variable-3,span.cm-def{color:#607392!important}.cm-operator{color:#cda869!important}.cm-comment{color:#777!important;font-style:italic!important;font-weight:400!important}.cm-string{color:#8f9d6a!important}.cm-string-2{color:#bd6b18!important}.cm-meta{background-color:#141414!important;color:#f7f7f7!important}.cm-builtin{color:#cda869!important}.cm-tag{color:#997643!important}.cm-attribute{color:#d6bb6d!important}.cm-header{color:#ff6400!important}.cm-hr{color:#aeaeae!important}.cm-link{color:#ad9361!important;font-style:italic!important;text-decoration:none!important}.cm-error{border-bottom:1px solid red!important}#notebook .highlight table{background:#1d1f21!important;color:#c5c8c6!important}.highlight .hll{background-color:#373b41!important}.highlight .c{color:#969896!important}.highlight .err{color:#c66!important}.highlight .k{color:#b294bb!important}.highlight .l{color:#de935f!important}.highlight .h,.highlight .n{color:#c5c8c6!important}.highlight .o{color:#8abeb7!important}.highlight .p{color:#c5c8c6!important}.highlight .cm{color:#969896!important}.highlight .cp{color:#969896!important}.highlight .c1{color:#969896!important}.highlight .cs{color:#969896!important}.highlight .gd{color:#c66!important}.highlight .ge{font-style:italic!important}.highlight .gh{color:#c5c8c6!important;font-weight:700!important}.highlight .gi{color:#b5bd68!important}.highlight .gp{color:#969896!important;font-weight:700!important}.highlight .gs{font-weight:700!important}.highlight .gu{color:#8abeb7!important;font-weight:700!important}.highlight .kc{color:#b294bb!important}.highlight .kd{color:#b294bb!important}.highlight .kn{color:#8abeb7!important}.highlight .kp{color:#b294bb!important}.highlight .kr{color:#b294bb!important}.highlight .kt{color:#f0c674!important}.highlight .ld{color:#b5bd68!important}.highlight .m{color:#de935f!important}.highlight .s{color:#b5bd68!important}.highlight .na{color:#81a2be!important}.highlight .nb{color:#c5c8c6!important}.highlight .nc{color:#f0c674!important}.highlight .no{color:#c66!important}.highlight .nd{color:#8abeb7!important}.highlight .ni{color:#c5c8c6!important}.highlight .ne{color:#c66!important}.highlight .nf{color:#81a2be!important}.highlight .nl{color:#c5c8c6!important}.highlight .nn{color:#f0c674!important}.highlight .nx{color:#81a2be!important}.highlight .py{color:#c5c8c6!important}.highlight .nt{color:#8abeb7!important}.highlight .nv{color:#c66!important}.highlight .ow{color:#8abeb7!important}.highlight .w{color:#c5c8c6!important}.highlight .mf{color:#de935f!important}.highlight .mh{color:#de935f!important}.highlight .mi{color:#de935f!important}.highlight .mo{color:#de935f!important}.highlight .sb{color:#b5bd68!important}.highlight .sc{color:#c5c8c6!important}.highlight .sd{color:#969896!important}.highlight .s2{color:#b5bd68!important}.highlight .se{color:#de935f!important}.highlight .sh{color:#b5bd68!important}.highlight .si{color:#de935f!important}.highlight .sx{color:#b5bd68!important}.highlight .sr{color:#b5bd68!important}.highlight .s1{color:#b5bd68!important}.highlight .ss{color:#b5bd68!important}.highlight .bp{color:#c5c8c6!important}.highlight .vc{color:#c66!important}.highlight .vg{color:#c66!important}.highlight .vi{color:#c66!important}.highlight .il{color:#de935f!important}</style><body><div class="container transition-fade" id=swup><div itemscope itemtype=http://schema.org/BlogPosting><div class=container><header class="grid center"><div class="cell menu"><h1 itemprop="name headline">Using Zapier Webhooks for HTML forms</h1></div></header><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><div class=the-loop><p class=post-info><span class=post-date itemprop=datePublished>🕒  <span>September 28, 2019</span></span><div itemprop="ArticleBody text" class=main-content><p>If you don't know about <a rel="noopener nofollow noreferrer" href=https://zapier.com/ target=_blank>Zapier</a>, it's a service that allows you to "automate everything". I've been using it for over 4 years to automate tons of different things like posting daily Trello tasks to Slack, activity in Intercom to Emails, and even a custom scheduled job that gives me task information for the current day.<p>One of the best built-in zaps (that's what they call the tasks) is the <a rel="noopener nofollow noreferrer" href=https://zapier.com/app-directory/webhook/integrations target=_blank>webhook zap</a> which let's you send a <code>POST</code> request to Zapier and then connect that with the 100s of other integrations. You can use this for all types of things. One thing I have found it to be good for is handling form submissions on static sites.<p>As the concept of static sites and "serverless" keeps getting more and more popular, so do the services surrounding those concepts. But if you know where to look, and how to set things up, most of those "services" that supplement static sites can be replace with some savvy Zapier setups.<p>There are tons of "form" apps out there to allow you to create endpoints for your site to submit to. A lot of them even suggest using Zapier to handle the post-submission step. It's funny, because you can get a pretty robust setup just using Zapier on it's own and not having to use these services. Also, Zapier supports file uploads! So you can even handle attachments in your forms or <code>POST</code> request. Handy!<p>Anyway, on to the form. Here is an example of an HTML form that will successfully:<pre class=language-html data-lang=html style=background:#2b303b;color:#c0c5ce><code class=language-html data-lang=html><span><</span><span style=color:#bf616a>form </span><span style=color:#d08770>action</span><span>="</span><span style=color:#a3be8c>https://hooks.zapier.com/hooks/catch/1234567/abcd123/</span><span>"
 </span><span>  </span><span style=color:#d08770>method</span><span>="</span><span style=color:#a3be8c>post</span><span>"
 </span><span>  </span><span style=color:#d08770>enctype</span><span>="</span><span style=color:#a3be8c>multipart/form-data</span><span>">
 </span><span>    <</span><span style=color:#bf616a>label </span><span style=color:#d08770>for</span><span>="</span><span style=color:#a3be8c>name</span><span>">Name:&LT/</span><span style=color:#bf616a>label</span><span>>
@@ -9,4 +9,4 @@
 </span><span>    <</span><span style=color:#bf616a>input </span><span style=color:#d08770>type</span><span>="</span><span style=color:#a3be8c>file</span><span>" </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>attachment</span><span>" </span><span style=color:#8fa1b3>id</span><span>="</span><span style=color:#a3be8c>attachment</span><span>">
 </span><span>    <</span><span style=color:#bf616a>input </span><span style=color:#d08770>type</span><span>="</span><span style=color:#a3be8c>submit</span><span>" </span><span style=color:#d08770>name</span><span>="</span><span style=color:#a3be8c>submit</span><span>" </span><span style=color:#d08770>value</span><span>="</span><span style=color:#a3be8c>Submit</span><span>">
 </span><span>&LT/</span><span style=color:#bf616a>form</span><span>>
-</span></code></pre><p>Let's break down the content above and talk about the details.<h5 id=action>Action</h5><p>Pretty straightforward. This is the URL of your webhook. You get this after you create the zap for the first time.<h5 id=method>Method</h5><p>Obviously, we need this to be a <code>POST</code> since that is what the webhook is expecting. Nothing special here.<h5 id=enctype>Enctype</h5><p>Here is the weird part. If you are familiar with file uploads, you already know that in order to properly handling files, you need to make sure your request is using the correct encoding. Here is a description from the <a href=https://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#adef-enctype>HTML Spec</a>:<blockquote><p>This attribute specifies the content type used to submit the form to the server (when the value of method is "post"). The default value for this attribute is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element, type="file".</blockquote><p>So there you go. Use this for files.<h5 id=caveats>Caveats</h5><p>One thing to keep in mind is, like all forms, the <code>name</code> of each field will be assign that value that was used on submission. So you can't really handle dynamic fields with Zapier. You also don't have any validation other than the HTML validation (or javascript validation, if applied) to rely on. People could submit values you don't expect or mess with the rules and submit other things you aren't expecting.<p>Something to keep in mind. I wouldn't use this method for anything other than simple contact forms that send emails or maybe forms that fill rows in a spreadsheet or something. Basic stuff.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file
+</span></code></pre><p>Let's break down the content above and talk about the details.<h5 id=action>Action</h5><p>Pretty straightforward. This is the URL of your webhook. You get this after you create the zap for the first time.<h5 id=method>Method</h5><p>Obviously, we need this to be a <code>POST</code> since that is what the webhook is expecting. Nothing special here.<h5 id=enctype>Enctype</h5><p>Here is the weird part. If you are familiar with file uploads, you already know that in order to properly handling files, you need to make sure your request is using the correct encoding. Here is a description from the <a rel="noopener nofollow noreferrer" href=https://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#adef-enctype target=_blank>HTML Spec</a>:<blockquote><p>This attribute specifies the content type used to submit the form to the server (when the value of method is "post"). The default value for this attribute is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element, type="file".</blockquote><p>So there you go. Use this for files.<h5 id=caveats>Caveats</h5><p>One thing to keep in mind is, like all forms, the <code>name</code> of each field will be assign that value that was used on submission. So you can't really handle dynamic fields with Zapier. You also don't have any validation other than the HTML validation (or javascript validation, if applied) to rely on. People could submit values you don't expect or mess with the rules and submit other things you aren't expecting.<p>Something to keep in mind. I wouldn't use this method for anything other than simple contact forms that send emails or maybe forms that fill rows in a spreadsheet or something. Basic stuff.</div><p><a title="Go Back Home" href=https://ohdoylerules.com>Go home</a><hr><div class="media grid"><div class=media-left><a class=post-author-link href=https://twitter.com/james2doyle target=_blank> <img alt="James Doyle Profile Picture" src="https://www.gravatar.com/avatar/b7375c88e1864c4ddf0d7bdab58e4cca?s=120&d=mm&r=g" height=120 width=120> </a></div><div class="media-body cell -9of12"><div class=media-heading><h3 itemprop="author publisher creator provider">James Doyle</h3></div><div class=media-content><p>I'm a full-stack developer, co-organizer of <a title="PHP Vancouver" href=https://www.meetup.com/vancouver-php target=_blank>PHP Vancouver</a> meetup, and winner of a <a title="Canadian Developer 30 under 30 award" href=http://www.canadianbusiness.com/innovation/developer-30-under-30-gallery/image/20/ target=_blank>Canadian Developer 30 under 30 award</a>. I'm a huge Open Source advocate and contributor to a lot of projects in my community. When I am not sitting at a computer, I'm trying to perfect some other skill.</div></div></div><hr><div id=disqus_thread itemprop=comment></div><script>(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//ohdoylerules.disqus.com/embed.js';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(a)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript><a class=dsq-brlink href=https://disqus.com>comments powered by <span class=logo-disqus>Disqus</span></a></div></div></div></div><script src=https://unpkg.com/swup@4.6.1/dist/Swup.umd.js></script><script>const swup=new Swup({native:true});function handleGists(){const a=document.querySelectorAll('.iframes');[...a].forEach(function(b){b.onload=function(){b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'};b.style.height=b.contentWindow.document.body.scrollHeight+ 'px'})}document.addEventListener('DOMContentLoaded',handleGists);swup.hooks.on('visit:end',handleGists,{priority:100})</script>
\ No newline at end of file