Created
December 3, 2018 00:27
-
-
Save KyleAMathews/bf5b00fa2c44ed4842f21e6b39851c10 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charSet="utf-8" /> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | |
| <style data-href="/component---src-posts-2018-09-13-why-i-migrated-away-from-medium-mdx.942e966dd04428ca9417.css"> | |
| .body-module--h1--26YIz { | |
| margin-bottom: 2rem; | |
| font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; | |
| font-family: var(--alt-font-family); | |
| font-size: 1.75rem; | |
| font-weight: 900; | |
| line-height: 1.15; | |
| color: #000 | |
| } | |
| @media (min-width:576px) { | |
| .body-module--h1--26YIz { | |
| font-size: 3rem | |
| } | |
| } | |
| .body-module--h2--3idDd { | |
| margin-bottom: 1rem; | |
| font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; | |
| font-family: var(--alt-font-family); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| line-height: 1.25; | |
| color: #000 | |
| } | |
| .body-module--h2--3idDd.hanging-double-quotes { | |
| text-indent: -.525em | |
| } | |
| @media (min-width:576px) { | |
| .body-module--h2--3idDd { | |
| font-size: 2.25rem | |
| } | |
| } | |
| .body-module--h3--PJNTv { | |
| margin-bottom: .75rem; | |
| font-family: Georgia, Times, Times New Roman, serif; | |
| font-family: var(--base-font-family); | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| line-height: 1.25; | |
| font-style: italic; | |
| letter-spacing: 1px; | |
| color: #000 | |
| } | |
| .wf-active .body-module--h3--PJNTv { | |
| font-family: Lora, Georgia, Times, Times New Roman, serif | |
| } | |
| .body-module--h3--PJNTv.hanging-double-quotes { | |
| text-indent: -.5em | |
| } | |
| @media (min-width:576px) { | |
| .body-module--h3--PJNTv { | |
| font-size: 1.5rem | |
| } | |
| } | |
| .body-module--p--lIVCJ { | |
| margin-bottom: 1rem; | |
| margin-bottom: var(--margin-bottom) | |
| } | |
| .body-module--a--1H6lu { | |
| color: #007faa; | |
| color: var(--blue); | |
| text-decoration: underline | |
| } | |
| .body-module--a--1H6lu:focus, | |
| .body-module--a--1H6lu:hover { | |
| color: #000 | |
| } | |
| .body-module--hr--1S8MK { | |
| display: block; | |
| max-width: 25rem; | |
| margin: 2rem auto; | |
| border: 0; | |
| border-bottom: 1px solid rgba(0, 0, 0, .25) | |
| } | |
| .body-module--ol--1v2jS, | |
| .body-module--ul--glC3g { | |
| margin-bottom: 1rem; | |
| padding-left: 2rem | |
| } | |
| .body-module--ul--glC3g { | |
| list-style-type: disc | |
| } | |
| .body-module--li--1O7hT .body-module--p--lIVCJ { | |
| margin-bottom: .5rem | |
| } | |
| @media (min-width:576px) { | |
| .body-module--li--1O7hT .body-module--p--lIVCJ { | |
| margin-bottom: .75rem | |
| } | |
| } | |
| .body-module--blockquote--2Hnmn { | |
| position: relative; | |
| font-style: italic; | |
| font-size: 1.15rem; | |
| font-weight: 300; | |
| color: grey | |
| } | |
| .body-module--blockquote--2Hnmn.hanging-double-quotes { | |
| text-indent: -.35em | |
| } | |
| @media (min-width:576px) { | |
| .body-module--blockquote--2Hnmn { | |
| padding-left: 1rem; | |
| font-size: 1.25rem | |
| } | |
| } | |
| .body-module--inlineCode--3mWyW { | |
| padding: .25rem .35rem; | |
| white-space: nowrap; | |
| background: rgba(0, 0, 0, .05); | |
| border-radius: .5rem; | |
| border-radius: var(--border-radius) | |
| } | |
| .body-module--pre--33msX { | |
| overflow: visible; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| padding: 1rem; | |
| background: rgba(0, 0, 0, .05) | |
| } | |
| .body-module--pre--33msX, | |
| .body-module--pre--33msX[class*=language-] { | |
| margin: 0 -1rem; | |
| margin: 0 calc(var(--site-padding) * -1); | |
| margin-bottom: 1rem; | |
| margin-bottom: var(--margin-bottom); | |
| border-radius: 0 | |
| } | |
| @media (min-width:992px) { | |
| .body-module--pre--33msX, | |
| .body-module--pre--33msX[class*=language-] { | |
| margin-left: 0; | |
| margin-right: 0; | |
| border-radius: .5rem; | |
| border-radius: var(--border-radius) | |
| } | |
| } | |
| .body-module--figure--2fDoC, | |
| .body-module--img--2ZXxv { | |
| display: block; | |
| margin-bottom: 1rem | |
| } | |
| .github-corner-module--githubCorner--39d_- { | |
| display: none | |
| } | |
| @media (min-width:1200px) { | |
| .github-corner-module--githubCorner--39d_- { | |
| display: block; | |
| position: absolute; | |
| z-index: 2; | |
| z-index: var(--z-github-corner); | |
| top: 0; | |
| right: 0; | |
| text-decoration: none | |
| } | |
| } | |
| @-webkit-keyframes github-corner-module--octocatWave--1Y7Xf { | |
| 0%, | |
| to { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0) | |
| } | |
| 20%, | |
| 60% { | |
| -webkit-transform: rotate(-25deg); | |
| transform: rotate(-25deg) | |
| } | |
| 40%, | |
| 80% { | |
| -webkit-transform: rotate(10deg); | |
| transform: rotate(10deg) | |
| } | |
| } | |
| @keyframes github-corner-module--octocatWave--1Y7Xf { | |
| 0%, | |
| to { | |
| -webkit-transform: rotate(0); | |
| transform: rotate(0) | |
| } | |
| 20%, | |
| 60% { | |
| -webkit-transform: rotate(-25deg); | |
| transform: rotate(-25deg) | |
| } | |
| 40%, | |
| 80% { | |
| -webkit-transform: rotate(10deg); | |
| transform: rotate(10deg) | |
| } | |
| } | |
| .github-corner-module--githubCorner--39d_-:focus .github-corner-module--octoArm--G7Uot, | |
| .github-corner-module--githubCorner--39d_-:hover .github-corner-module--octoArm--G7Uot { | |
| -webkit-animation: github-corner-module--octocatWave--1Y7Xf .56s ease-in-out; | |
| animation: github-corner-module--octocatWave--1Y7Xf .56s ease-in-out | |
| } | |
| @media (max-width:500px) { | |
| .github-corner-module--githubCorner--39d_-:focus .github-corner-module--octoArm--G7Uot, | |
| .github-corner-module--githubCorner--39d_-:hover .github-corner-module--octoArm--G7Uot { | |
| -webkit-animation: none; | |
| animation: none | |
| } | |
| .github-corner-module--githubCorner--39d_- .github-corner-module--octoArm--G7Uot { | |
| -webkit-animation: github-corner-module--octocatWave--1Y7Xf .56s ease-in-out; | |
| animation: github-corner-module--octocatWave--1Y7Xf .56s ease-in-out | |
| } | |
| } | |
| :root { | |
| --base-font-family: Lora, Georgia, Times, "Times New Roman", serif; | |
| --alt-font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; | |
| --code-font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier, monospace; | |
| --base-font-size: 18px; | |
| --code-font-size: 16px; | |
| --site-padding: 1rem; | |
| --margin-bottom: 1rem; | |
| --border-radius: 0.5rem; | |
| --z-header: 1; | |
| --z-github-corner: 2; | |
| --logo-width: 2rem; | |
| --logo-height: 2rem; | |
| --beige-light: #faead3; | |
| --beige: #fee2cc; | |
| --red: #ee7266; | |
| --blue: #007faa; | |
| --blue-dark: #33495e; | |
| --grey: #696969 | |
| } | |
| @media (min-width:576px) { | |
| :root { | |
| --base-font-size: 20px; | |
| --code-font-size: 18px; | |
| --margin-bottom: 1.5rem; | |
| --logo-width: 3rem; | |
| --logo-height: 3rem | |
| } | |
| } | |
| /*! | |
| * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/) | |
| * Copyright 2011-2018 The Bootstrap Authors | |
| * Copyright 2011-2018 Twitter, Inc. | |
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
| * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) | |
| */ | |
| *, | |
| :after, | |
| :before { | |
| box-sizing: border-box | |
| } | |
| html { | |
| font-family: sans-serif; | |
| line-height: 1.15; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| -ms-overflow-style: scrollbar; | |
| -webkit-tap-highlight-color: transparent | |
| } | |
| @-ms-viewport { | |
| width: device-width | |
| } | |
| article, | |
| aside, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section { | |
| display: block | |
| } | |
| body { | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; | |
| font-size: 1rem; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| color: #212529; | |
| text-align: left; | |
| background-color: #fff | |
| } | |
| [tabindex="-1"]:focus { | |
| outline: 0 !important | |
| } | |
| hr { | |
| box-sizing: content-box; | |
| height: 0; | |
| overflow: visible | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| margin-top: 0; | |
| margin-bottom: .5rem | |
| } | |
| p { | |
| margin-top: 0; | |
| margin-bottom: 1rem | |
| } | |
| abbr[data-original-title], | |
| abbr[title] { | |
| text-decoration: underline; | |
| -webkit-text-decoration: underline dotted; | |
| text-decoration: underline dotted; | |
| cursor: help; | |
| border-bottom: 0 | |
| } | |
| address { | |
| font-style: normal; | |
| line-height: inherit | |
| } | |
| address, | |
| dl, | |
| ol, | |
| ul { | |
| margin-bottom: 1rem | |
| } | |
| dl, | |
| ol, | |
| ul { | |
| margin-top: 0 | |
| } | |
| ol ol, | |
| ol ul, | |
| ul ol, | |
| ul ul { | |
| margin-bottom: 0 | |
| } | |
| dt { | |
| font-weight: 700 | |
| } | |
| dd { | |
| margin-bottom: .5rem; | |
| margin-left: 0 | |
| } | |
| blockquote { | |
| margin: 0 0 1rem | |
| } | |
| dfn { | |
| font-style: italic | |
| } | |
| b, | |
| strong { | |
| font-weight: bolder | |
| } | |
| small { | |
| font-size: 80% | |
| } | |
| sub, | |
| sup { | |
| position: relative; | |
| font-size: 75%; | |
| line-height: 0; | |
| vertical-align: baseline | |
| } | |
| sub { | |
| bottom: -.25em | |
| } | |
| sup { | |
| top: -.5em | |
| } | |
| a { | |
| color: #007bff; | |
| text-decoration: none; | |
| background-color: transparent; | |
| -webkit-text-decoration-skip: objects | |
| } | |
| a:hover { | |
| color: #0056b3; | |
| text-decoration: underline | |
| } | |
| a:not([href]):not([tabindex]), | |
| a:not([href]):not([tabindex]):focus, | |
| a:not([href]):not([tabindex]):hover { | |
| color: inherit; | |
| text-decoration: none | |
| } | |
| a:not([href]):not([tabindex]):focus { | |
| outline: 0 | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; | |
| font-size: 1em | |
| } | |
| pre { | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| overflow: auto; | |
| -ms-overflow-style: scrollbar | |
| } | |
| figure { | |
| margin: 0 0 1rem | |
| } | |
| img { | |
| border-style: none | |
| } | |
| img, | |
| svg { | |
| vertical-align: middle | |
| } | |
| svg { | |
| overflow: hidden | |
| } | |
| caption { | |
| padding-top: .75rem; | |
| padding-bottom: .75rem; | |
| color: #6c757d; | |
| text-align: left; | |
| caption-side: bottom | |
| } | |
| th { | |
| text-align: inherit | |
| } | |
| label { | |
| display: inline-block; | |
| margin-bottom: .5rem | |
| } | |
| button { | |
| border-radius: 0 | |
| } | |
| button:focus { | |
| outline: 1px dotted; | |
| outline: 5px auto -webkit-focus-ring-color | |
| } | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| margin: 0; | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit | |
| } | |
| button, | |
| input { | |
| overflow: visible | |
| } | |
| button, | |
| select { | |
| text-transform: none | |
| } | |
| [type=reset], | |
| [type=submit], | |
| button, | |
| html [type=button] { | |
| -webkit-appearance: button | |
| } | |
| [type=button]::-moz-focus-inner, | |
| [type=reset]::-moz-focus-inner, | |
| [type=submit]::-moz-focus-inner, | |
| button::-moz-focus-inner { | |
| padding: 0; | |
| border-style: none | |
| } | |
| input[type=checkbox], | |
| input[type=radio] { | |
| box-sizing: border-box; | |
| padding: 0 | |
| } | |
| input[type=date], | |
| input[type=datetime-local], | |
| input[type=month], | |
| input[type=time] { | |
| -webkit-appearance: listbox | |
| } | |
| textarea { | |
| overflow: auto; | |
| resize: vertical | |
| } | |
| fieldset { | |
| min-width: 0; | |
| padding: 0; | |
| margin: 0; | |
| border: 0 | |
| } | |
| legend { | |
| display: block; | |
| width: 100%; | |
| max-width: 100%; | |
| padding: 0; | |
| margin-bottom: .5rem; | |
| font-size: 1.5rem; | |
| line-height: inherit; | |
| color: inherit; | |
| white-space: normal | |
| } | |
| progress { | |
| vertical-align: baseline | |
| } | |
| [type=number]::-webkit-inner-spin-button, | |
| [type=number]::-webkit-outer-spin-button { | |
| height: auto | |
| } | |
| [type=search] { | |
| outline-offset: -2px; | |
| -webkit-appearance: none | |
| } | |
| [type=search]::-webkit-search-cancel-button, | |
| [type=search]::-webkit-search-decoration { | |
| -webkit-appearance: none | |
| } | |
| ::-webkit-file-upload-button { | |
| font: inherit; | |
| -webkit-appearance: button | |
| } | |
| output { | |
| display: inline-block | |
| } | |
| summary { | |
| display: list-item; | |
| cursor: pointer | |
| } | |
| template { | |
| display: none | |
| } | |
| [hidden] { | |
| display: none !important | |
| } | |
| /*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */ | |
| blockquote, | |
| body, | |
| dd, | |
| dl, | |
| dt, | |
| fieldset, | |
| figure, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| hr, | |
| html, | |
| iframe, | |
| legend, | |
| li, | |
| ol, | |
| p, | |
| pre, | |
| textarea, | |
| ul { | |
| margin: 0; | |
| padding: 0 | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-size: 100%; | |
| font-weight: 400 | |
| } | |
| ul { | |
| list-style: none | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| margin: 0 | |
| } | |
| html { | |
| box-sizing: border-box | |
| } | |
| *, | |
| :after, | |
| :before { | |
| box-sizing: inherit | |
| } | |
| audio, | |
| embed, | |
| iframe, | |
| img, | |
| object, | |
| video { | |
| height: auto; | |
| max-width: 100% | |
| } | |
| iframe { | |
| border: 0 | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0 | |
| } | |
| td, | |
| th { | |
| padding: 0; | |
| text-align: left | |
| } | |
| code[class*=language-], | |
| pre[class*=language-] { | |
| color: #c5c8c6; | |
| text-shadow: 0 1px rgba(0, 0, 0, .3); | |
| font-family: Inconsolata, Monaco, Consolas, Courier New, Courier, monospace; | |
| direction: ltr; | |
| text-align: left; | |
| white-space: pre; | |
| word-spacing: normal; | |
| word-break: normal; | |
| line-height: 1.5; | |
| -moz-tab-size: 4; | |
| -o-tab-size: 4; | |
| tab-size: 4; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none | |
| } | |
| pre[class*=language-] { | |
| padding: 1em; | |
| margin: .5em 0; | |
| overflow: auto; | |
| border-radius: .3em | |
| } | |
| :not(pre)>code[class*=language-], | |
| pre[class*=language-] { | |
| background: #1d1f21 | |
| } | |
| :not(pre)>code[class*=language-] { | |
| padding: .1em; | |
| border-radius: .3em | |
| } | |
| .token.cdata, | |
| .token.comment, | |
| .token.doctype, | |
| .token.prolog { | |
| color: #7c7c7c | |
| } | |
| .token.punctuation { | |
| color: #c5c8c6 | |
| } | |
| .namespace { | |
| opacity: .7 | |
| } | |
| .token.keyword, | |
| .token.property, | |
| .token.tag { | |
| color: #96cbfe | |
| } | |
| .token.class-name { | |
| color: #ffffb6; | |
| text-decoration: underline | |
| } | |
| .token.boolean, | |
| .token.constant { | |
| color: #9c9 | |
| } | |
| .token.deleted, | |
| .token.symbol { | |
| color: #f92672 | |
| } | |
| .token.number { | |
| color: #ff73fd | |
| } | |
| .token.attr-name, | |
| .token.builtin, | |
| .token.char, | |
| .token.inserted, | |
| .token.selector, | |
| .token.string { | |
| color: #a8ff60 | |
| } | |
| .token.variable { | |
| color: #c6c5fe | |
| } | |
| .token.operator { | |
| color: #ededed | |
| } | |
| .token.entity { | |
| color: #ffffb6 | |
| } | |
| .token.url { | |
| color: #96cbfe | |
| } | |
| .language-css .token.string, | |
| .style .token.string { | |
| color: #87c38a | |
| } | |
| .token.atrule, | |
| .token.attr-value { | |
| color: #f9ee98 | |
| } | |
| .token.function { | |
| color: #dad085 | |
| } | |
| .token.regex { | |
| color: #e9c062 | |
| } | |
| .token.important { | |
| color: #fd971f | |
| } | |
| .token.bold, | |
| .token.important { | |
| font-weight: 700 | |
| } | |
| .token.italic { | |
| font-style: italic | |
| } | |
| .token.entity { | |
| cursor: help | |
| } | |
| html { | |
| font-size: 18px; | |
| font-size: var(--base-font-size) | |
| } | |
| body { | |
| font-family: Georgia, Times, Times New Roman, serif; | |
| font-family: var(--base-font-family); | |
| line-height: 1.75 | |
| } | |
| .wf-active body { | |
| font-family: Lora, Georgia, Times, Times New Roman, serif | |
| } | |
| code { | |
| font-family: Inconsolata, Monaco, Consolas, Courier New, Courier, monospace; | |
| font-family: var(--code-font-family); | |
| font-size: 16px; | |
| font-size: var(--code-font-size) | |
| } | |
| .spacer-module--spacer--1deMi { | |
| height: 1rem | |
| } | |
| @media (min-width:576px) { | |
| .spacer-module--spacer--1deMi { | |
| height: 2rem | |
| } | |
| } | |
| .container-module--container--3C57J { | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| padding: 0 var(--site-padding) | |
| } | |
| .logo-module--link--3WCak { | |
| display: block; | |
| width: 2rem; | |
| width: var(--logo-width); | |
| height: 2rem; | |
| height: var(--logo-height); | |
| line-height: 0; | |
| border-radius: .5rem; | |
| overflow: hidden | |
| } | |
| .logo-module--link--3WCak svg { | |
| width: 100%; | |
| height: 100% | |
| } | |
| .common-module--visuallyHidden--39qdd { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| -webkit-clip-path: inset(50%); | |
| clip-path: inset(50%); | |
| height: 1px; | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| white-space: nowrap | |
| } | |
| .common-module--card--1V5Hg { | |
| background: #fff | |
| } | |
| .common-module--card1--2PpUr { | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) | |
| } | |
| .common-module--card2--1JPaY { | |
| box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23) | |
| } | |
| .common-module--card3--Lf4Xw { | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23) | |
| } | |
| :root { | |
| --search-transition-duration: 0.3s | |
| } | |
| .search-module--container--Ov97e { | |
| --field-height: 2rem; | |
| --field-bg-color: #f2f2f2; | |
| position: relative; | |
| height: var(--field-height); | |
| font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; | |
| font-family: var(--alt-font-family) | |
| } | |
| @media (min-width:768px) { | |
| .search-module--container--Ov97e { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end | |
| } | |
| } | |
| .search-module--field--Yn8V5 { | |
| position: relative; | |
| width: var(--field-height); | |
| transition: width .3s; | |
| transition: width var(--search-transition-duration) | |
| } | |
| @media (min-width:767px) { | |
| .search-module--field--Yn8V5 { | |
| position: absolute; | |
| top: 50%; | |
| right: 0; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%) | |
| } | |
| } | |
| .search-module--fieldFocused--mSdtQ { | |
| width: calc(100vw - 5rem); | |
| width: calc(100vw - var(--site-padding) * 2 - var(--logo-width) - 1rem) | |
| } | |
| @media (min-width:768px) { | |
| .search-module--fieldFocused--mSdtQ { | |
| width: 100% | |
| } | |
| } | |
| .search-module--label--2iKW2 { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: var(--field-height); | |
| height: var(--field-height); | |
| margin: 0; | |
| padding: 0 .5rem; | |
| color: grey; | |
| cursor: pointer; | |
| line-height: var(--field-height) | |
| } | |
| .search-module--labelIcon--maJA8 { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%) | |
| } | |
| .search-module--input--3VV-L { | |
| display: block; | |
| width: 100%; | |
| height: var(--field-height); | |
| line-height: var(--field-height); | |
| padding-left: var(--field-height); | |
| border: 0; | |
| background: var(--field-bg-color); | |
| border-radius: var(--field-height) | |
| } | |
| .search-module--input--3VV-L::-webkit-input-placeholder { | |
| opacity: 0; | |
| transition: opacity .3s; | |
| transition: opacity var(--search-transition-duration) | |
| } | |
| .search-module--input--3VV-L:-ms-input-placeholder { | |
| opacity: 0; | |
| transition: opacity .3s; | |
| transition: opacity var(--search-transition-duration) | |
| } | |
| .search-module--input--3VV-L::-ms-input-placeholder { | |
| opacity: 0; | |
| transition: opacity .3s; | |
| transition: opacity var(--search-transition-duration) | |
| } | |
| .search-module--input--3VV-L::placeholder { | |
| opacity: 0; | |
| transition: opacity .3s; | |
| transition: opacity var(--search-transition-duration) | |
| } | |
| .search-module--input--3VV-L:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px #fff, 0 0 0 5px #007faa; | |
| box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue) | |
| } | |
| .search-module--input--3VV-L:focus::-webkit-input-placeholder { | |
| opacity: 1 | |
| } | |
| .search-module--input--3VV-L:focus:-ms-input-placeholder { | |
| opacity: 1 | |
| } | |
| .search-module--input--3VV-L:focus::-ms-input-placeholder { | |
| opacity: 1 | |
| } | |
| .search-module--input--3VV-L:focus::placeholder { | |
| opacity: 1 | |
| } | |
| .search-module--menu--3aTbh { | |
| position: absolute; | |
| white-space: nowrap; | |
| top: 100%; | |
| right: calc(50vw - 1rem); | |
| right: calc(50vw - var(--site-padding)); | |
| -webkit-transform: translateX(50%); | |
| transform: translateX(50%); | |
| width: calc(100vw - 2rem); | |
| width: calc(100vw - var(--site-padding) * 2); | |
| margin-top: .75rem; | |
| text-align: left; | |
| font-size: .85rem | |
| } | |
| @media (min-width:576px) { | |
| .search-module--menu--3aTbh { | |
| right: calc(50vw - 2.5rem); | |
| right: calc((100vw - var(--site-padding) * 2 - var(--logo-width) - 1rem) / 2); | |
| width: auto; | |
| min-width: 24em; | |
| max-width: calc(100vw - 2rem); | |
| max-width: calc(100vw - var(--site-padding) * 2) | |
| } | |
| } | |
| @media (min-width:768px) { | |
| .search-module--menu--3aTbh { | |
| right: 0; | |
| -webkit-transform: none; | |
| transform: none | |
| } | |
| } | |
| .search-module--menuOpen--3NU7t { | |
| padding: .5rem 0; | |
| border-top: 1px solid var(--field-bg-color); | |
| border-radius: .5rem; | |
| border-radius: var(--border-radius) | |
| } | |
| .search-module--itemLink--kcJ3L { | |
| display: block; | |
| padding: .25rem .75rem; | |
| color: #4d4d4d; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis | |
| } | |
| .search-module--itemLink--kcJ3L:focus, | |
| .search-module--itemLink--kcJ3L:hover { | |
| color: #000; | |
| text-decoration: none | |
| } | |
| .search-module--itemLinkHighlighted--3HuN5 { | |
| background: var(--field-bg-color) | |
| } | |
| .search-module--hiddenBase--2JDhP { | |
| transition: opacity .3s; | |
| transition: opacity var(--search-transition-duration) | |
| } | |
| @media (min-width:767px) { | |
| .search-module--hidden--3L_CN { | |
| opacity: 0 | |
| } | |
| } | |
| .header-module--header--2Q3RK { | |
| position: relative; | |
| z-index: 1; | |
| z-index: var(--z-header); | |
| text-align: center | |
| } | |
| .header-module--topBar--1sFcO { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| grid-column-gap: 1rem; | |
| align-items: center; | |
| height: 3rem; | |
| margin: 1rem 0 | |
| } | |
| @media (min-width:576px) { | |
| .header-module--topBar--1sFcO { | |
| height: 3.5rem | |
| } | |
| } | |
| .header-module--middle---piQt { | |
| display: flex; | |
| justify-content: center | |
| } | |
| .header-module--middle---piQt>* { | |
| margin: 0 !important | |
| } | |
| .back-link-module--link--6jg7o { | |
| display: flex; | |
| align-items: center; | |
| padding: .5rem 1rem; | |
| border: 1px solid #409fbf; | |
| border-radius: 1rem; | |
| font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; | |
| font-family: var(--alt-font-family); | |
| text-decoration: none; | |
| white-space: nowrap | |
| } | |
| .back-link-module--link--6jg7o:focus, | |
| .back-link-module--link--6jg7o:hover { | |
| text-decoration: none; | |
| background: #e6f2f7; | |
| border-color: #667786 | |
| } | |
| .back-link-module--icon--1H0gf { | |
| margin-right: .5rem | |
| } | |
| .meta-module--meta--1wNkp { | |
| font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; | |
| font-family: var(--alt-font-family); | |
| color: #696969; | |
| color: var(--grey) | |
| } | |
| .date-module--time--1LxQ2 { | |
| display: block | |
| } | |
| .author-module--wrapper--3OQu- { | |
| margin: 2rem 0 3rem; | |
| background: #e6e6e6; | |
| font-family: Georgia, Times, Times New Roman, serif; | |
| font-family: var(--base-font-family); | |
| text-align: center | |
| } | |
| .wf-active .author-module--wrapper--3OQu- { | |
| font-family: Lora, Georgia, Times, Times New Roman, serif | |
| } | |
| @media (min-width:768px) { | |
| .author-module--wrapper--3OQu- { | |
| text-align: left | |
| } | |
| } | |
| @media (min-width:768px) { | |
| .author-module--container--j7ZIf { | |
| display: flex; | |
| align-items: stretch | |
| } | |
| } | |
| .author-module--avatar--1NyhY { | |
| box-sizing: content-box; | |
| width: 128px; | |
| height: 128px; | |
| border-radius: 0 0 .5rem .5rem | |
| } | |
| @media (min-width:768px) { | |
| .author-module--avatar--1NyhY { | |
| width: 256px; | |
| height: 256px; | |
| margin: 0 1rem 0 0; | |
| border-radius: 0 | |
| } | |
| } | |
| .author-module--content--2SsZB { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| position: relative | |
| } | |
| .author-module--contentWithLinks--1mQxR { | |
| padding-top: 1rem; | |
| padding-bottom: 2.5rem | |
| } | |
| .author-module--contentWithoutLinks--R1TqR { | |
| padding-top: 1rem; | |
| padding-bottom: 1.5rem | |
| } | |
| @media (min-width:768px) { | |
| .author-module--contentWithoutLinks--R1TqR { | |
| padding-top: 0; | |
| padding-bottom: 0 | |
| } | |
| } | |
| .author-module--biography--2dssu { | |
| font-style: italic; | |
| font-size: .85rem | |
| } | |
| .author-module--socialContainer--1ZeSO { | |
| display: flex; | |
| align-items: center; | |
| position: absolute; | |
| left: 50%; | |
| bottom: 0; | |
| -webkit-transform: translate(-50%, 50%); | |
| transform: translate(-50%, 50%) | |
| } | |
| @media (min-width:768px) { | |
| .author-module--socialContainer--1ZeSO { | |
| left: auto; | |
| -webkit-transform: translateY(50%); | |
| transform: translateY(50%) | |
| } | |
| } | |
| .author-module--socialLink--17QGC { | |
| display: block; | |
| margin-right: .5rem; | |
| padding: .5rem; | |
| border: .25rem solid #fff; | |
| border-radius: 50%; | |
| background: var(--color); | |
| color: #fff; | |
| line-height: 0 | |
| } | |
| .author-module--socialLink--17QGC:focus, | |
| .author-module--socialLink--17QGC:hover { | |
| background: var(--color-hover); | |
| color: #fff; | |
| text-decoration: none | |
| } | |
| .post-module--title--37tBS { | |
| margin-bottom: 0; | |
| color: #000 | |
| } | |
| .post-module--meta--2zYMp { | |
| margin: .5rem 1rem 1rem; | |
| display: inline-block | |
| } | |
| .post-module--metaRow--1MoSW { | |
| display: flex; | |
| align-items: center | |
| } | |
| .post-module--metaRow--1MoSW>*+* { | |
| margin-left: .5rem | |
| } | |
| .post-module--twitterShare--2PR-m { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 2rem; | |
| line-height: 0 | |
| } | |
| .post-module--nextPost--l6_G6 { | |
| color: #696969; | |
| color: var(--grey) | |
| } | |
| .post-module--disqus--3_jQK { | |
| margin-top: 2rem | |
| } | |
| .intrinsic-ratio-module--container--1Z3Lr { | |
| max-width: 100vw | |
| } | |
| @media (min-width:992px) { | |
| .intrinsic-ratio-module--container--1Z3Lr { | |
| max-width: 100% | |
| } | |
| } | |
| .intrinsic-ratio-module--inner--yZklx { | |
| position: relative; | |
| height: 0 | |
| } | |
| .intrinsic-ratio-module--inner--yZklx iframe, | |
| .intrinsic-ratio-module--inner--yZklx img { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100% | |
| } | |
| .media-module--media--1ql-2 { | |
| display: flex; | |
| justify-content: center; | |
| margin: 0 -1rem; | |
| margin: 0 calc(var(--site-padding) * -1); | |
| margin-bottom: 1rem; | |
| margin-bottom: var(--margin-bottom) | |
| } | |
| @media (min-width:992px) { | |
| .media-module--media--1ql-2 { | |
| margin-left: 0; | |
| margin-right: 0 | |
| } | |
| } | |
| @media (min-width:992px) { | |
| .media-module--inner--1VDE1 { | |
| overflow: hidden | |
| } | |
| } | |
| .media-module--inner--1VDE1 iframe, | |
| .media-module--inner--1VDE1 img { | |
| display: block | |
| } | |
| .media-module--innerRounded--W3TKq { | |
| border-radius: .5rem; | |
| border-radius: var(--border-radius) | |
| } | |
| .media-module--caption--1iBY0 { | |
| max-width: 36rem; | |
| margin: -.5rem auto 1rem; | |
| margin-bottom: var(--margin-bottom); | |
| text-align: center; | |
| font-size: .75rem; | |
| font-style: italic; | |
| color: grey | |
| } | |
| .media-module--tweet--2wIwG { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| margin-bottom: var(--margin-bottom) | |
| } | |
| </style> | |
| <meta name="generator" content="Gatsby 2.0.22" /> | |
| <title data-react-helmet="true">Why I Migrated Away from Medium · Matija Marohnić</title> | |
| <link data-react-helmet="true" rel="icon" href="/favicon.ico" /> | |
| <meta data-react-helmet="true" name="description" content="I used to have my own Jekyll blog, but then I moved completely to Medium. I had my own publication there, I was even a premium member for a…" /> | |
| <meta data-react-helmet="true" itemProp="name" content="Why I Migrated Away from Medium" /> | |
| <meta data-react-helmet="true" itemProp="description" content="I used to have my own Jekyll blog, but then I moved completely to Medium. I had my own publication there, I was even a premium member for a…" /> | |
| <meta data-react-helmet="true" name="twitter:card" content="summary" /> | |
| <meta data-react-helmet="true" name="twitter:title" content="Why I Migrated Away from Medium" /> | |
| <meta data-react-helmet="true" name="twitter:description" content="I used to have my own Jekyll blog, but then I moved completely to Medium. I had my own publication there, I was even a premium member for a…" /> | |
| <meta data-react-helmet="true" name="twitter:creator" content="@silvenon" /> | |
| <meta data-react-helmet="true" property="og:title" content="Why I Migrated Away from Medium" /> | |
| <meta data-react-helmet="true" property="og:url" content="https://silvenon.com/blog/why-i-migrated-away-from-medium" /> | |
| <meta data-react-helmet="true" property="og:type" content="article" /> | |
| <meta data-react-helmet="true" property="article:published_time" content="2018-09-13" /> | |
| <meta data-react-helmet="true" property="article:author" content="Matija Marohnić" /> | |
| <meta data-react-helmet="true" property="og:description" content="I used to have my own Jekyll blog, but then I moved completely to Medium. I had my own publication there, I was even a premium member for a…" /> | |
| <meta data-react-helmet="true" property="og:locale" content="en_US" /> | |
| <meta data-react-helmet="true" property="og:site_name" content="Matija Marohnić" /> | |
| <link rel="sitemap" type="application/xml" href="/sitemap.xml" /> | |
| <link rel="shortcut icon" href="/icons/icon-48x48.png" /> | |
| <link rel="manifest" href="/manifest.webmanifest" /> | |
| <meta name="theme-color" content="#007faa" /> | |
| <link as="script" rel="preload" href="/webpack-runtime-f7a3f3ecc86767a56511.js" /> | |
| <link as="script" rel="preload" href="/app-b3542cd5192beda877bc.js" /> | |
| <link as="script" rel="preload" href="/0-a0850b860b85bc1e65f8.js" /> | |
| <link as="script" rel="preload" href="/1-8c83e97bfed68d91e140.js" /> | |
| <link as="script" rel="preload" href="/2-9511da3017a0bd593a51.js" /> | |
| <link as="script" rel="preload" href="/3-7724846742e0f3706487.js" /> | |
| <link as="script" rel="preload" href="/component---src-posts-2018-09-13-why-i-migrated-away-from-medium-mdx-ba3f69c50c9317ccc0a8.js" /> | |
| <link rel="preload" href="/static/d/277/path---blog-why-i-migrated-away-from-medium-09-e-6b2-IacRYD5rCMvIeiz7xA2Cth9kvs.json" as="fetch" crossOrigin="use-credentials" /> | |
| </head> | |
| <body> | |
| <div id="___gatsby"> | |
| <div style="outline:none" tabindex="-1" role="group"> | |
| <header class="header-module--header--2Q3RK"> | |
| <div style="max-width:992px" class="container-module--container--3C57J"> | |
| <div class="header-module--topBar--1sFcO"> | |
| <div><a href="/" class="link-module--link--2I16u body-module--a--1H6lu logo-module--link--3WCak"><svg width="64" height="64" viewBox="0 0 64 64"><title>Logo</title><clipPath id="topLeft"><path d="M64,0.025l-64,64l0,-64l64,0Z"></path></clipPath><clipPath id="bottomRight"><path d="M0,64l64,-64l0,64l-64,0Z"></path></clipPath><g clip-path="url(#topLeft)"><rect x="0.025" y="0.025" width="64" height="64" fill="#007faa"></rect><path d="M31.989,22.518c-0.031,-4.597 -0.902,-8.134 -2.612,-10.613c-1.71,-2.478 -4.165,-3.717 -7.365,-3.717c-3.2,0 -5.655,1.251 -7.365,3.753c-1.71,2.502 -2.565,6.114 -2.565,10.836l0,6.471c0.063,4.549 0.953,8.043 2.671,10.483c1.718,2.439 4.153,3.659 7.306,3.659c3.185,0 5.636,-1.255 7.354,-3.765c1.717,-2.51 2.576,-6.134 2.576,-10.871l0,-6.236Zm-6.682,7.647c-0.032,2.605 -0.31,4.538 -0.836,5.801c-0.525,1.263 -1.329,1.894 -2.412,1.894c-1.145,0 -1.988,-0.675 -2.529,-2.024c-0.542,-1.349 -0.812,-3.404 -0.812,-6.165l0,-8.541c0.078,-4.942 1.176,-7.413 3.294,-7.413c1.13,0 1.961,0.675 2.494,2.024c0.534,1.349 0.801,3.373 0.801,6.071l0,8.353Z" fill="#fff"></path></g><g clip-path="url(#bottomRight)"><rect x="0.025" y="0.025" width="64" height="64" fill="#33495e"></rect><path d="M44.945,55.261l-6.553,0l0,-25.659l-6.392,2.469l0,-5.446l12.253,-5.007l0.692,0l0,33.643Z" fill="#fff"></path></g></svg></a></div> | |
| <div class="header-module--middle---piQt search-module--hiddenBase--2JDhP"><a href="/blog" class="link-module--link--2I16u body-module--a--1H6lu back-link-module--link--6jg7o"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="back-link-module--icon--1H0gf" height="1em" width="1em"><path d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg><div>All posts</div></a></div> | |
| <div> | |
| <div class="search-module--container--Ov97e" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="downshift-10-label"> | |
| <div class="search-module--field--Yn8V5"><label for="downshift-10-input" id="downshift-10-label" class="search-module--label--2iKW2"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="search-module--labelIcon--maJA8" height="1em" width="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg><span class="search-module--labelText--2GxjC common-module--visuallyHidden--39qdd">Find posts</span></label><input aria-autocomplete="list" aria-labelledby="downshift-10-label" autoComplete="off" value="" id="downshift-10-input" placeholder="Find posts" class="search-module--input--3VV-L" /></div> | |
| <ul role="listbox" aria-labelledby="downshift-10-label" id="downshift-10-menu" class="search-module--menu--3aTbh"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| <h1 class="body-module--h1--26YIz post-module--title--37tBS">Why I Migrated Away from Medium</h1> | |
| <div class="meta-module--meta--1wNkp post-module--meta--2zYMp"> | |
| <div class="post-module--metaRow--1MoSW"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg> | |
| <div>Matija Marohnić</div> | |
| </div> | |
| <div class="post-module--metaRow--1MoSW"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em"><path d="M436 160H12c-6.6 0-12-5.4-12-12v-36c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48v36c0 6.6-5.4 12-12 12zM12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm116 204c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40z"></path></svg><time class="date-module--time--1LxQ2" dateTime="2018-09-13">September 13th, 2018</time></div> | |
| </div> | |
| </div> | |
| </header> | |
| <div style="max-width:992px" class="container-module--container--3C57J"> | |
| <div> | |
| <p class="body-module--p--lIVCJ">I used to have my own Jekyll blog, but then I moved completely to Medium. I had my own publication there, I was even a premium member for a while. Eventually I decided to create my own blog again, much more advanced than the one I previously had, combining features I liked on Medium with the ones I missed.</p> | |
| <h2 class="body-module--h2--3idDd">Posts and comments</h2> | |
| <p class="body-module--p--lIVCJ">On Medium you can follow people you like, that way you receive notifications when they post something new. It even automatically follows people you already follow on Twitter, which is nice. You can also comment, like, highlight text and other fun things.</p> | |
| <p class="body-module--p--lIVCJ">But at certain point it stopped being fun. On Medium, <em>stories</em> are all the posts you’ve ever written, <strong>including comments</strong>. Yep, there’s nothing distinguishing comments from blog posts as far as Medium is concerned. My stories are a flat list of carefully worded blog posts that I’ve been working on for days and comments I wrote in 10 seconds.</p> | |
| <p class="body-module--p--lIVCJ">This decision was probably meant to encourage writing more thoughtful and constructive comments, which is just my guess becuase there’s no official explanation, but instead it discourages me from writing comments at all. And I’m not the only one:</p> | |
| <div class="media-module--tweet--2wIwG"> | |
| <div></div> | |
| </div> | |
| <h2 class="body-module--h2--3idDd">Code blocks</h2> | |
| <p class="body-module--p--lIVCJ">I generally like the writing experience on Medium. It’s very minimalistic and the typography is beautiful. But I’m a developer, I want to write code. There are multiple ways to do this, you can just open a code block, but there won’t be any syntax highlighting. Either for the time being or it will never ever happen, nobody knows, Medium people don’t like talking with the public. Look at how bland this is:</p> | |
| <pre class="body-module--pre--33msX"><code class="body-module--code--1_sea">function boooooring() { | |
| // is this supposed to be a comment? | |
| // I can't tell, it looks like everything else | |
| const iCantEven = 'kill me' | |
| } | |
| </code></pre> | |
| <p class="body-module--p--lIVCJ">Another solution is to embed a GitHub gist or services like CodeSandbox. I don’t know about you, but to me using an <code class="body-module--inlineCode--3mWyW"><iframe></code> just to get some colors is an overkill. If GitHub is down, people won’t be able to read a code block that might be crucial to the blog post. Also, if I accidentally delete that gist or a sandbox at some point in the future, I ruined my blog post.</p> | |
| <p class="body-module--p--lIVCJ">Here I can have all the colors I want without any funny business. Compare the previous code block to this one:</p> | |
| <pre class="body-module--pre--33msX language-js"><code class="body-module--code--1_sea language-js" metastring=""><span class="token keyword">function</span> <span class="token function">lookAtAllTheseColors</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> | |
| <span class="token comment">// just look at how subtle this comment is,</span> | |
| <span class="token comment">// it stays out of the way, but it's here if you need it</span> | |
| <span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token string">'#aaa'</span><span class="token punctuation">;</span> | |
| <span class="token punctuation">}</span> | |
| </code></pre> | |
| <p class="body-module--p--lIVCJ">I can actually read this. ☝️</p> | |
| <h2 class="body-module--h2--3idDd">Custom domain</h2> | |
| <p class="body-module--p--lIVCJ">I bought a custom domain for my publication. It was pretty pricy for just connecting a subdomain that I already owned, but I didn’t want to depend on Medium’s domain in case I want to switch to something else later on. That’s how I managed to add redirects to map posts on Medium to posts on this site.</p> | |
| <p class="body-module--p--lIVCJ">However, they removed that feature! People like me who got them when they were available are able to keep them, but the fact that this important feature is just gone is incredibly off-putting. 😨 </p> | |
| <h2 class="body-module--h2--3idDd">Conclusion</h2> | |
| <p class="body-module--p--lIVCJ">There are several other annoyances, but the point is that many features are either missing, broken or just weird (claps?!). I wanted far more control over writing than Medium was giving me, so here we are. Btw, this site is open source, so you can <a class="body-module--a--1H6lu" href="https://github.com/silvenon/silvenon.com">check out</a> this overegineered masterpiece.</p> | |
| <p class="body-module--p--lIVCJ">Let’s do this! 😎</p> | |
| </div> | |
| <div class="post-module--twitterShare--2PR-m"> | |
| <div></div> | |
| </div> | |
| </div> | |
| <section class="author-module--wrapper--3OQu-"> | |
| <div style="max-width:992px" class="container-module--container--3C57J author-module--container--j7ZIf"><img alt="avatar" data-src="https://res.cloudinary.com/silvenon/image/upload/c_scale,e_grayscale,w_256/avatar" data-srcset="https://res.cloudinary.com/silvenon/image/upload/c_scale,e_grayscale,w_128/avatar 128w, https://res.cloudinary.com/silvenon/image/upload/c_scale,e_grayscale,w_256/avatar 256w, https://res.cloudinary.com/silvenon/image/upload/c_scale,e_grayscale,w_512/avatar 512w" data-sizes="(min-width: 768px) 256px, 128px" class="author-module--avatar--1NyhY" /> | |
| <div class="author-module--contentWithLinks--1mQxR author-module--content--2SsZB"> | |
| <h2 class="body-module--h2--3idDd" as="h1">Matija Marohnić</h2> | |
| <div class="author-module--biography--2dssu"> | |
| <p>A design-savvy frontend developer from Croatia. I love React and enjoy creating delightful, maintainable UIs. Besides frontend, I also like to write about love, sex and relationships.</p> | |
| </div> | |
| <div class="author-module--socialContainer--1ZeSO"><a class="body-module--a--1H6lu author-module--socialLink--17QGC" title="Twitter" href="https://twitter.com/silvenon" style="--color:#1da1f2;--color-hover:#0b76b8"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" size="28" height="28" width="28"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></a><a class="body-module--a--1H6lu author-module--socialLink--17QGC" title="GitHub" href="https://github.com/silvenon" style="--color:#333;--color-hover:#0d0d0d"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" size="28" height="28" width="28"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a class="body-module--a--1H6lu author-module--socialLink--17QGC" title="LinkedIn" href="https://www.linkedin.com/in/silvenon" style="--color:#0077b5;--color-hover:#004569"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" size="28" height="28" width="28"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a></div> | |
| </div> | |
| </div> | |
| </section> | |
| <div style="max-width:992px" class="container-module--container--3C57J"> | |
| <p class="post-module--nextPost--l6_G6"><span>Read next → </span><a href="/blog/code-folding-and-minimaps" class="link-module--link--2I16u body-module--a--1H6lu">On Code Folding and Minimaps</a></p> | |
| <div class="post-module--disqus--3_jQK"> | |
| <div id="disqus_thread"></div> | |
| </div> | |
| </div> | |
| <div class="spacer-module--spacer--1deMi"></div><a href="https://github.com/silvenon/silvenon.com" class="github-corner-module--githubCorner--39d_-" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#007faa;color:#fff;border:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="github-corner-module--octoArm--G7Uot"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path></svg></a> | |
| <script type="text/javascript"> | |
| var _gauges = _gauges || []; | |
| (function() { | |
| var t = document.createElement('script'); | |
| t.type = 'text/javascript'; | |
| t.async = true; | |
| t.id = 'gauges-tracker'; | |
| t.setAttribute('data-site-id', '574df9a6bb922a0603000412'); | |
| t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif'); | |
| t.src = 'https://d2fuc4clr7gvcn.cloudfront.net/track.js'; | |
| var s = document.getElementsByTagName('script')[0]; | |
| s.parentNode.insertBefore(t, s); | |
| })(); | |
| </script> | |
| </div> | |
| </div> | |
| <script id="gatsby-script-loader"> | |
| /*<![CDATA[*/ | |
| window.page = { | |
| "componentChunkName": "component---src-posts-2018-09-13-why-i-migrated-away-from-medium-mdx", | |
| "jsonName": "blog-why-i-migrated-away-from-medium-09e", | |
| "path": "/blog/why-i-migrated-away-from-medium" | |
| }; | |
| window.dataPath = "277/path---blog-why-i-migrated-away-from-medium-09-e-6b2-IacRYD5rCMvIeiz7xA2Cth9kvs"; /*]]>*/ | |
| </script> | |
| <script id="gatsby-chunk-mapping"> | |
| /*<![CDATA[*/ | |
| window.___chunkMapping = { | |
| "app": ["/app-b3542cd5192beda877bc.js"], | |
| "component---node-modules-gatsby-plugin-offline-app-shell-js": ["/component---node-modules-gatsby-plugin-offline-app-shell-js-c0388e6e78f79b0bedbd.js"], | |
| "component---src-templates-blog-js": ["/component---src-templates-blog-js.9c8027e09cf387344fc3.css", "/component---src-templates-blog-js-3c2daa3a32719d79ae93.js"], | |
| "component---src-posts-2018-04-23-ditching-masculinity-and-femininity-mdx": ["/component---src-posts-2018-04-23-ditching-masculinity-and-femininity-mdx.8fbae0976d66722718e6.css", "/component---src-posts-2018-04-23-ditching-masculinity-and-femininity-mdx-7a20b10a69c297645713.js"], | |
| "component---src-posts-2018-04-03-code-folding-and-minimaps-mdx": ["/component---src-posts-2018-04-03-code-folding-and-minimaps-mdx.942e966dd04428ca9417.css", "/component---src-posts-2018-04-03-code-folding-and-minimaps-mdx-7488ffdcf50bf3cab5b3.js"], | |
| "component---src-posts-2017-12-02-custom-project-based-eslint-rules-mdx": ["/component---src-posts-2017-12-02-custom-project-based-eslint-rules-mdx.942e966dd04428ca9417.css", "/component---src-posts-2017-12-02-custom-project-based-eslint-rules-mdx-c6f348045f26ab6f7c5e.js"], | |
| "component---src-posts-2018-09-13-why-i-migrated-away-from-medium-mdx": ["/component---src-posts-2018-09-13-why-i-migrated-away-from-medium-mdx.942e966dd04428ca9417.css", "/component---src-posts-2018-09-13-why-i-migrated-away-from-medium-mdx-ba3f69c50c9317ccc0a8.js"], | |
| "component---src-posts-2017-08-29-dont-split-render-into-functions-mdx": ["/component---src-posts-2017-08-29-dont-split-render-into-functions-mdx.8fbae0976d66722718e6.css", "/component---src-posts-2017-08-29-dont-split-render-into-functions-mdx-7d2109a22750c2ea6b02.js"], | |
| "component---src-posts-2018-03-16-the-nuances-of-react-transition-group-mdx": ["/component---src-posts-2018-03-16-the-nuances-of-react-transition-group-mdx.942e966dd04428ca9417.css", "/component---src-posts-2018-03-16-the-nuances-of-react-transition-group-mdx-4be0035d88b2198c3270.js"], | |
| "component---src-posts-2017-01-21-could-polyamory-be-for-you-mdx": ["/component---src-posts-2017-01-21-could-polyamory-be-for-you-mdx.d23bef6bcc639ddea985.css", "/component---src-posts-2017-01-21-could-polyamory-be-for-you-mdx-59b6e7d01e5389aa4746.js"], | |
| "component---src-posts-2017-08-20-dependencies-or-devdependencies-mdx": ["/component---src-posts-2017-08-20-dependencies-or-devdependencies-mdx.d23bef6bcc639ddea985.css", "/component---src-posts-2017-08-20-dependencies-or-devdependencies-mdx-87440571d2b15cfd6144.js"], | |
| "component---src-posts-2017-01-02-cultural-myths-about-relationships-mdx": ["/component---src-posts-2017-01-02-cultural-myths-about-relationships-mdx.d23bef6bcc639ddea985.css", "/component---src-posts-2017-01-02-cultural-myths-about-relationships-mdx-a78bd3c290b1590ac7ff.js"], | |
| "component---src-posts-2016-09-14-getting-rid-of-pantry-moths-mdx": ["/component---src-posts-2016-09-14-getting-rid-of-pantry-moths-mdx.942e966dd04428ca9417.css", "/component---src-posts-2016-09-14-getting-rid-of-pantry-moths-mdx-ccd4a01a163d350f88bf.js"], | |
| "component---src-posts-2016-09-08-fictional-web-app-for-creating-comics-mdx": ["/component---src-posts-2016-09-08-fictional-web-app-for-creating-comics-mdx.d23bef6bcc639ddea985.css", "/component---src-posts-2016-09-08-fictional-web-app-for-creating-comics-mdx-2533376c07bf6ede3582.js"], | |
| "component---src-posts-2016-08-27-getting-over-your-ex-mdx": ["/component---src-posts-2016-08-27-getting-over-your-ex-mdx.d23bef6bcc639ddea985.css", "/component---src-posts-2016-08-27-getting-over-your-ex-mdx-d28fa2bf4a3b629f054a.js"], | |
| "component---src-posts-2016-09-01-downvoting-comments-on-youtube-mdx": ["/component---src-posts-2016-09-01-downvoting-comments-on-youtube-mdx.942e966dd04428ca9417.css", "/component---src-posts-2016-09-01-downvoting-comments-on-youtube-mdx-ec3d66c492205d6e490f.js"], | |
| "component---src-posts-2016-08-25-subjectivity-police-mdx": ["/component---src-posts-2016-08-25-subjectivity-police-mdx.942e966dd04428ca9417.css", "/component---src-posts-2016-08-25-subjectivity-police-mdx-d18bc1463b02d62027fe.js"], | |
| "component---src-posts-2016-08-22-beer-pressure-mdx": ["/component---src-posts-2016-08-22-beer-pressure-mdx.8fbae0976d66722718e6.css", "/component---src-posts-2016-08-22-beer-pressure-mdx-cdad2c8ae8bc7bf64a13.js"], | |
| "component---src-posts-2016-08-21-your-partner-likes-other-people-mdx": ["/component---src-posts-2016-08-21-your-partner-likes-other-people-mdx.8fbae0976d66722718e6.css", "/component---src-posts-2016-08-21-your-partner-likes-other-people-mdx-0279ff2e654d16e06aa8.js"], | |
| "component---src-posts-2016-08-16-why-are-breakups-so-hard-mdx": ["/component---src-posts-2016-08-16-why-are-breakups-so-hard-mdx.d23bef6bcc639ddea985.css", "/component---src-posts-2016-08-16-why-are-breakups-so-hard-mdx-37525c7d8c61ada2687f.js"], | |
| "component---src-posts-2016-06-01-intro-to-eslint-mdx": ["/component---src-posts-2016-06-01-intro-to-eslint-mdx.d23bef6bcc639ddea985.css", "/component---src-posts-2016-06-01-intro-to-eslint-mdx-18abf59043c7d51e898e.js"], | |
| "component---src-pages-index-js": ["/component---src-pages-index-js.a01c6e779a2048a3cfda.css", "/component---src-pages-index-js-a3e25e73646e8c7fedb9.js"], | |
| "component---src-pages-404-js": ["/component---src-pages-404-js.c1aadbaee2ef9bcd61a1.css", "/component---src-pages-404-js-e2ca61849843b9462fbf.js"] | |
| }; /*]]>*/ | |
| </script> | |
| <script src="/component---src-posts-2018-09-13-why-i-migrated-away-from-medium-mdx-ba3f69c50c9317ccc0a8.js" async=""></script> | |
| <script src="/3-7724846742e0f3706487.js" async=""></script> | |
| <script src="/2-9511da3017a0bd593a51.js" async=""></script> | |
| <script src="/1-8c83e97bfed68d91e140.js" async=""></script> | |
| <script src="/0-a0850b860b85bc1e65f8.js" async=""></script> | |
| <script src="/app-b3542cd5192beda877bc.js" async=""></script> | |
| <script src="/webpack-runtime-f7a3f3ecc86767a56511.js" async=""></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment