diff options
| -rw-r--r-- | about/faq.html | 282 | ||||
| -rw-r--r-- | about/howami.html | 141 | ||||
| -rw-r--r-- | about/whatami.html | 148 | ||||
| -rw-r--r-- | about/whereami.html | 229 | ||||
| -rw-r--r-- | about/whoami.html | 184 | ||||
| -rw-r--r-- | about/whyami.html | 144 | ||||
| -rw-r--r-- | thoughts/syntax/my-worst-habit.html | 173 | ||||
| -rw-r--r-- | thoughts/syntax/random-python-idiosyncrasies.html | 308 | ||||
| -rw-r--r-- | tutorials/tor/how-to-host-a-tor-hidden-service.html | 209 | ||||
| -rw-r--r-- | tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html | 180 | ||||
| -rw-r--r-- | tutorials/www/how-to-make-this-site.html | 504 | ||||
| -rw-r--r-- | tutorials/www/how-to-use-the-internet.html | 249 | ||||
| -rw-r--r-- | tutorials/www/quick-intro-html-css.html | 475 |
13 files changed, 2943 insertions, 283 deletions
diff --git a/about/faq.html b/about/faq.html index 87180cc..994d8a8 100644 --- a/about/faq.html +++ b/about/faq.html @@ -6,67 +6,279 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>faq</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#frequently-anticipated-questions">Frequently Anticipated Questions</a> +<li><a href="#frequently-anticipated-questions">Frequently Anticipated +Questions</a> <ul> -<li><a href="#questions-noone-asked-but-could-maybe">Questions noone asked, but could maybe</a> +<li><a href="#questions-noone-asked-but-could-maybe">Questions noone +asked, but could maybe</a> <ul> -<li><a href="#why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it"><em>Why bother running a Tor hidden service if you're gonna put your full name on it?</em></a></li> -<li><a href="#how-come-i-cant-access-your-main-domain"><em>How come I can't access your main domain?</em></a></li> -<li><a href="#you-wrote-all-this-in-vim-why-tho"><em>You wrote all this in vim? Why tho?</em></a></li> +<li><a +href="#why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it"><em>Why +bother running a Tor hidden service if you're gonna put your full name +on it?</em></a></li> +<li><a href="#how-come-i-cant-access-your-main-domain"><em>How come I +can't access your main domain?</em></a></li> +<li><a href="#you-wrote-all-this-in-vim-why-tho"><em>You wrote all this +in vim? Why tho?</em></a></li> <li><a href="#why-openbsd"><em>Why OpenBSD?</em></a></li> -<li><a href="#why-bother-making-your-site-from-scratch-it-looks-like-crap"><em>Why bother making your site from scratch? It looks like crap</em></a></li> -<li><a href="#why-does-your-rss-feed-update-me-on-old-stuff"><em>Why does your RSS feed update me on old stuff?</em></a></li> -<li><a href="#why-is-this-site-public-domain-what-does-that-mean"><em>Why is this site public domain? What does that mean?</em></a></li> -<li><a href="#why-dont-you-highlight-urls-you-dinosaur">Why don't you highlight URLs you dinosaur?</a></li> +<li><a +href="#why-bother-making-your-site-from-scratch-it-looks-like-crap"><em>Why +bother making your site from scratch? It looks like crap</em></a></li> +<li><a href="#why-does-your-rss-feed-update-me-on-old-stuff"><em>Why +does your RSS feed update me on old stuff?</em></a></li> +<li><a +href="#why-is-this-site-public-domain-what-does-that-mean"><em>Why is +this site public domain? What does that mean?</em></a></li> </ul></li> </ul></li> </ul> </nav> -<h1 id="frequently-anticipated-questions">Frequently Anticipated Questions</h1> -<h2 id="questions-noone-asked-but-could-maybe">Questions noone asked, but could maybe</h2> -<h3 id="why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it"><em>Why bother running a Tor hidden service if you're gonna put your full name on it?</em></h3> -<p>One, because I think hidden services are neat and I thought it'd be neat to make one. And two, if I really needed to be anonymous, I would probably self-host or find a hosting provider somewhere else, or reconsider using the Internet all together.</p> -<p>The hidden service has a benefit though, mostly to <em>you</em>. You don't need to expose your IP to me or to anyone else to access this site.</p> -<h3 id="how-come-i-cant-access-your-main-domain"><em>How come I can't access your main domain?</em></h3> -<p>Honestly, I wouldn't know if my site is blocked elsewhere, but I may have blocked your IP for the following reasons:</p> +<h1 id="frequently-anticipated-questions">Frequently Anticipated +Questions</h1> +<h2 id="questions-noone-asked-but-could-maybe">Questions noone asked, +but could maybe</h2> +<h3 +id="why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it"><em>Why +bother running a Tor hidden service if you're gonna put your full name +on it?</em></h3> +<p>One, because I think hidden services are neat and I thought it'd be +neat to make one. And two, if I really needed to be anonymous, I would +probably self-host or find a hosting provider somewhere else, or +reconsider using the Internet all together.</p> +<p>The hidden service has a benefit though, mostly to <em>you</em>. You +don't need to expose your IP to me or to anyone else to access this +site.</p> +<h3 id="how-come-i-cant-access-your-main-domain"><em>How come I can't +access your main domain?</em></h3> +<p>Honestly, I wouldn't know if my site is blocked elsewhere, but I may +have blocked your IP for the following reasons:</p> <ul> -<li>You attempted to ssh to my server (I use fail2ban and employ private keys, I block all failed attempts)</li> -<li>You tried to pass some weird or malicious HTTP request (again, fail2ban)</li> +<li>You attempted to ssh to my server (I use fail2ban and employ private +keys, I block all failed attempts)</li> +<li>You tried to pass some weird or malicious HTTP request (again, +fail2ban)</li> <li>Someone else on your IP tried to do one of those things</li> </ul> -<p>This is part of the reason why I run the site as hidden service since you can still read my nonsense anyway through that, but if you think this might be an error on my part, you can email me.</p> -<h3 id="you-wrote-all-this-in-vim-why-tho"><em>You wrote all this in vim? Why tho?</em></h3> -<p>Neovim more lately, but yeah other than large projects, I prefer using vim for editing. Mostly because it's easy to edit consistently across servers and because I just spend so much of my time in the terminal lately that I'm used to it.</p> +<p>This is part of the reason why I run the site as hidden service since +you can still read my nonsense anyway through that, but if you think +this might be an error on my part, you can email me.</p> +<h3 id="you-wrote-all-this-in-vim-why-tho"><em>You wrote all this in +vim? Why tho?</em></h3> +<p>Neovim more lately, but yeah other than large projects, I prefer +using vim for editing. Mostly because it's easy to edit consistently +across servers and because I just spend so much of my time in the +terminal lately that I'm used to it.</p> <h3 id="why-openbsd"><em>Why OpenBSD?</em></h3> <p>Honestly, I though the fish was cool.</p> <figure> -<img src="/static/puffy.gif" alt="" /><figcaption>puffy</figcaption> +<img src="/static/puffy.gif" alt="puffy" /> +<figcaption aria-hidden="true">puffy</figcaption> </figure> -<p>I don't know the artist of that one unfortunately, I just found it on a forum.</p> -<p>Besides I've installed Debian lots of times so I figured, why not try something different? It's pretty cool as a server OS. Just a lot of homework. I'm sure it's good as a desktop/laptop one too, but it's not different enough for me to move all my data.</p> +<p>I don't know the artist of that one unfortunately, I just found it on +a forum.</p> +<p>Besides I've installed Debian lots of times so I figured, why not try +something different? It's pretty cool as a server OS. Just a lot of +homework. I'm sure it's good as a desktop/laptop one too, but it's not +different enough for me to move all my data.</p> <p>For what it's worth, I use Debian sid for a daily driver.</p> -<h3 id="why-bother-making-your-site-from-scratch-it-looks-like-crap"><em>Why bother making your site from scratch? It looks like crap</em></h3> -<p>Eh. I feel like if what I say isn't interesting, prettying it up won't help keep attention that much. I like simple sites like this one. It forces you to poke around more. Poking around is a good thing.</p> -<h3 id="why-does-your-rss-feed-update-me-on-old-stuff"><em>Why does your RSS feed update me on old stuff?</em></h3> -<p>Because I made it to set the publication date to the last write time of the file. Change is important and I do it often, because I'm often wrong.</p> -<h3 id="why-is-this-site-public-domain-what-does-that-mean"><em>Why is this site public domain? What does that mean?</em></h3> -<p>This site is "licensed" under The Creative Commons CC0 or "No Rights Reserved" license. This means that any file accessible on my web server which I created (which is the text you are reading and the code that generates it) belongs to the public domain as far as legally possible and I reserve no right to it's re-publication, re-use, or re-distribution with no expectation of compensation. So if you find any use of the information I post here, or the little flask app I wrote to run the thing, you are free to use it without any fear that I'm going to slap you with a lawsuit. This does <em>not</em> include most of the images; I try to link credit where I can for those.</p> -<p>A lot of people might prefer a BSD or GNU style license for their code and I agree that there are many cases where <em>that</em> is the preferred option. But it doesn't make sense for me; at least not for a homepage like this. I'm not sure about other people, but most of my ideas are not my own; they come from reading a history book or doing a textbook exercise or an off-color joke. So without getting on a soapbox, I guess you can say the idea of "intellectual property" never made too much sense to me in general.</p> -<p>I get that people have to get paid. I get that people are afraid of someone else taking credit for their work. But for this site at least, I guess I just don't really care. If someone really finds some way to profit of some random guy's Linux tutorials and unqualified thoughts on the world I honestly think <em>they</em> deserve the credit not me. I have no idea how I'd do that; I'm not sure I'd even want to waste my time with all the marketing nonsense of the modern web. And on the second point, if someone "steals" my work it's not exactly hard to figure out it was published here first--a Google search will prove that. But even if that weren't the case, I still wouldn't mind. I'd be glad that this stuff is useful at all. That would be a nice surprise.</p> -<p><em>Not</em> everything that is <em>linked</em> to on this site falls under the same guidelines, so be sure to respect that author's copyright; I tend to link stuff that is generally pretty free to use, though.</p> -<h3 id="why-dont-you-highlight-urls-you-dinosaur">Why don't you highlight URLs you dinosaur?</h3> -<p>Because I think it's kinda deceiving. It's one thing to highlight a word that leads to a place, since the user doesn't have expectation of where it's going to lead, they'll tend to hover to see where it's going. A full URL looks like it's going exactly where it's going. A user won't think twice about clicking on <a href="https://fwesh.yonle.repl.co/">https://facebook.com/</a>. They will if they see <a href="https://fwesh.yonle.repl.co/">totally not a virus</a>. If you're giving out the full URL anyway why bother linking it? Every browser in the world has double-click (or long-press) to highlight the URL automatically, then right-click, and open in new tab.</p> +<h3 +id="why-bother-making-your-site-from-scratch-it-looks-like-crap"><em>Why +bother making your site from scratch? It looks like crap</em></h3> +<p>Eh. I feel like if what I say isn't interesting, prettying it up +won't help keep attention that much. I like simple sites like this one. +It forces you to poke around more. Poking around is a good thing.</p> +<h3 id="why-does-your-rss-feed-update-me-on-old-stuff"><em>Why does your +RSS feed update me on old stuff?</em></h3> +<p>Because I made it to set the publication date to the last write time +of the file. Change is important and I do it often, because I'm often +wrong.</p> +<h3 id="why-is-this-site-public-domain-what-does-that-mean"><em>Why is +this site public domain? What does that mean?</em></h3> +<p>This site is "licensed" under The Creative Commons CC0 or "No Rights +Reserved" license. This means that any file accessible on my web server +which I created (which is the text you are reading and the code that +generates it) belongs to the public domain as far as legally possible +and I reserve no right to it's re-publication, re-use, or +re-distribution with no expectation of compensation. So if you find any +use of the information I post here, or the little flask app I wrote to +run the thing, you are free to use it without any fear that I'm going to +slap you with a lawsuit. This does <em>not</em> include most of the +images; I try to link credit where I can for those.</p> +<p>A lot of people might prefer a BSD or GNU style license for their +code and I agree that there are many cases where <em>that</em> is the +preferred option. But it doesn't make sense for me; at least not for a +homepage like this. I'm not sure about other people, but most of my +ideas are not my own; they come from reading a history book or doing a +textbook exercise or an off-color joke. So without getting on a soapbox, +I guess you can say the idea of "intellectual property" never made too +much sense to me in general.</p> +<p>I get that people have to get paid. I get that people are afraid of +someone else taking credit for their work. But for this site at least, I +guess I just don't really care. If someone really finds some way to +profit of some random guy's Linux tutorials and unqualified thoughts on +the world I honestly think <em>they</em> deserve the credit not me. I +have no idea how I'd do that; I'm not sure I'd even want to waste my +time with all the marketing nonsense of the modern web. And on the +second point, if someone "steals" my work it's not exactly hard to +figure out it was published here first--a Google search will prove that. +But even if that weren't the case, I still wouldn't mind. I'd be glad +that this stuff is useful at all. That would be a nice surprise.</p> +<p><em>Not</em> everything that is <em>linked</em> to on this site falls +under the same guidelines, so be sure to respect that author's +copyright; I tend to link stuff that is generally pretty free to use, +though.</p> </body> </html> diff --git a/about/howami.html b/about/howami.html index 978c92c..1ae967f 100644 --- a/about/howami.html +++ b/about/howami.html @@ -6,12 +6,153 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>howami</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> diff --git a/about/whatami.html b/about/whatami.html index 15551ee..30002bf 100644 --- a/about/whatami.html +++ b/about/whatami.html @@ -6,16 +6,162 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>whatami</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> <p>In case of alien transmission...</p> -<p>It should be noted for the record I'm a human (<em>homo sapiens sapiens</em>), which by <a href="https://en.wikipedia.org/wiki/Body_water">most estimates</a> puts me firmly in the category of <em>water-like object</em> at ~60% of my total body mass, with the remaining matter compromised of various arrangements of carbon, oxygen, and potato chips.</p> +<p>It should be noted for the record I'm a human (<em>homo sapiens +sapiens</em>), which by <a +href="https://en.wikipedia.org/wiki/Body_water">most estimates</a> puts +me firmly in the category of <em>water-like object</em> at ~60% of my +total body mass, with the remaining matter compromised of various +arrangements of carbon, oxygen, and potato chips.</p> </body> </html> diff --git a/about/whereami.html b/about/whereami.html index 766d72d..2ea1558 100644 --- a/about/whereami.html +++ b/about/whereami.html @@ -6,39 +6,238 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>whereami</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> <center> -<p>But I have to say this in defense of humankind: In no matter what era in history, including the Garden of Eden, <strong>everybody just got here</strong>. And, except for the Garden of Eden, there were already all these games going on that could make you act crazy, even if you weren't crazy to begin with. Some of the crazymaking games going on today are love and hate, liberalism and conservatism, automobiles and credit cards, golf, and girls' basketball.</p> +<p>But I have to say this in defense of humankind: In no matter what era +in history, including the Garden of Eden, <strong>everybody just got +here</strong>. And, except for the Garden of Eden, there were already +all these games going on that could make you act crazy, even if you +weren't crazy to begin with. Some of the crazymaking games going on +today are love and hate, liberalism and conservatism, automobiles and +credit cards, golf, and girls' basketball.</p> -- <em>Kurt Vonnegut, from A man without a country, emphasis my own</em> </center> -<p>Since you are on this page, you're presumably lost. That's <em>ok</em>. I don't really get all this stuff either. Let's start with some easy stuff.</p> -<p><em>You're on the Internet</em>. Known to some as a <a href="https://en.wikipedia.org/wiki/Series_of_tubes">series of tubes</a>, but in reality much more complicated than it has to be. In basic sense, your computer called mine, and mine answered with directory full of pages.</p> -<p>The way you get here is through a device you have at home called a router, which literally does what the name implies--it routes signals to where they need to go to make things go beep. In the 60s and 70s, routers tended to be people-based and would spend their time plugging cables into and out of ports so calls could connect.</p> +<p>Since you are on this page, you're presumably lost. That's +<em>ok</em>. I don't really get all this stuff either. Let's start with +some easy stuff.</p> +<p><em>You're on the Internet</em>. Known to some as a <a +href="https://en.wikipedia.org/wiki/Series_of_tubes">series of +tubes</a>, but in reality much more complicated than it has to be. In +basic sense, your computer called mine, and mine answered with directory +full of pages.</p> +<p>The way you get here is through a device you have at home called a +router, which literally does what the name implies--it routes signals to +where they need to go to make things go beep. In the 60s and 70s, +routers tended to be people-based and would spend their time plugging +cables into and out of ports so calls could connect.</p> <p><img src="/static/human_router.jpg" /></p> -<p><em>Image of a switchboard courtesy of <a href="https://en.wikipedia.org/wiki/File:Jersey_Telecom_switchboard_and_operator.jpg">Wikipedia contributors</a></em></p> -<p>Fortunately, we figured out that was dumb and made robots do the job for us. Internet companies, governments, and anyone else with enough money and influence bought huge routers and hooked them all up to talk to each other. Then they convinced us all to go out and buy a router from our ISP of "choice" so we could all send cat pictures to each other seamlessly. We got rid of phones, replaced our phone with our IP address and email, just to ironically end up back at phones again. All of our devices serve, or at least can serve, as a router in some way, and all these little robots talking to each other makes it so you can get lost on some person's home page.</p> -<p>In a way, you could say you've made it to a place my router took you to. Not my home router of course--that one sucks.</p> -<p>I'm mooching of someone else's, also known as a Virtual Private Server. These companies run whole bunch of servers, hook them up on a bulk connection and rent them out for people to run blogs about cats and porn sites.</p> -<p>I'm getting lost on your question though, so where are we exactly?</p> -<p>Precisely speaking, you are in a chrooted web server running on rented virtual machine in a server farm located roughly in New Jersey browsing the "about" directory on the "whereami.html" page.</p> -<p>Less precisely, all that means is you're looking at some files I left in a directory at this address, and paid some people to host for me since local ISPs tend to be ridiculously expensive if you want to do anything besides host some private servers for you and your friends and family.</p> -<p>But maybe most importantly, you've reached a webpage owned by another human being, not a corporation, or a bot, or a government, or work, or a <em>network</em>. All these files were loving crafted by yours truly in vim, in markdown and converted with pandoc to HTML because of laziness. The Internet I grew up with, though I didn't really appreciate it at the time, used to be filled with places like this. "Homepages" were a thing, or were just starting to be at least.</p> -<p>But as soon as it started it all got sucked up and commodified into social media; we somehow got coerced into profiles, templates, and standards to make us easier for ad companies to study. It's not even unreasonable to believe you're not even talking to real people on there, because there's a good chance of it now. <a href="https://en.wikipedia.org/wiki/Astroturfing">Astroturfing</a> is not a secret government conspiracy, it's just business as usual at this point. You used to be able to tell a human from a chatbot from the way they write. I don't know if the bots at this point are smarter, or if we've just been made so cynical and dumb by the process that we've given up.</p> +<p><em>Image of a switchboard courtesy of <a +href="https://en.wikipedia.org/wiki/File:Jersey_Telecom_switchboard_and_operator.jpg">Wikipedia +contributors</a></em></p> +<p>Fortunately, we figured out that was dumb and made robots do the job +for us. Internet companies, governments, and anyone else with enough +money and influence bought huge routers and hooked them all up to talk +to each other. Then they convinced us all to go out and buy a router +from our ISP of "choice" so we could all send cat pictures to each other +seamlessly. We got rid of phones, replaced our phone with our IP address +and email, just to ironically end up back at phones again. All of our +devices serve, or at least can serve, as a router in some way, and all +these little robots talking to each other makes it so you can get lost +on some person's home page.</p> +<p>In a way, you could say you've made it to a place my router took you +to. Not my home router of course--that one sucks.</p> +<p>I'm mooching of someone else's, also known as a Virtual Private +Server. These companies run whole bunch of servers, hook them up on a +bulk connection and rent them out for people to run blogs about cats and +porn sites.</p> +<p>I'm getting lost on your question though, so where are we +exactly?</p> +<p>Precisely speaking, you are in a chrooted web server running on +rented virtual machine in a server farm located roughly in New Jersey +browsing the "about" directory on the "whereami.html" page.</p> +<p>Less precisely, all that means is you're looking at some files I left +in a directory at this address, and paid some people to host for me +since local ISPs tend to be ridiculously expensive if you want to do +anything besides host some private servers for you and your friends and +family.</p> +<p>But maybe most importantly, you've reached a webpage owned by another +human being, not a corporation, or a bot, or a government, or work, or a +<em>network</em>. All these files were loving crafted by yours truly in +vim, in markdown and converted with pandoc to HTML because of laziness. +The Internet I grew up with, though I didn't really appreciate it at the +time, used to be filled with places like this. "Homepages" were a thing, +or were just starting to be at least.</p> +<p>But as soon as it started it all got sucked up and commodified into +social media; we somehow got coerced into profiles, templates, and +standards to make us easier for ad companies to study. It's not even +unreasonable to believe you're not even talking to real people on there, +because there's a good chance of it now. <a +href="https://en.wikipedia.org/wiki/Astroturfing">Astroturfing</a> is +not a secret government conspiracy, it's just business as usual at this +point. You used to be able to tell a human from a chatbot from the way +they write. I don't know if the bots at this point are smarter, or if +we've just been made so cynical and dumb by the process that we've given +up.</p> <p>Who would really write all that garbage on Facebook anyway?</p> -<p>Don't mistake this for some pity nostalgia piece though. If you look hard enough--I promise you--that <em>Internet</em> of humans is still there. Here's a few places I like to poke around:</p> +<p>Don't mistake this for some pity nostalgia piece though. If you look +hard enough--I promise you--that <em>Internet</em> of humans is still +there. Here's a few places I like to poke around:</p> <p>https://neocities.org/</p> <p>https://1mb.club/</p> <p>https://goodsites.tech/</p> <p>and old <a href="https://archive.md/rav1z">not-so</a> faithful:</p> <p>https://www.wikipedia.org/</p> -<p>A helpful tip, CRTL+W will close any webpage you don't like. Not that you wouldn't like this page... you did read all the way here through all that pedantry didn't you?</p> +<p>A helpful tip, CRTL+W will close any webpage you don't like. Not that +you wouldn't like this page... you did read all the way here through all +that pedantry didn't you?</p> </body> </html> diff --git a/about/whoami.html b/about/whoami.html index 5431c1d..8e0ac63 100644 --- a/about/whoami.html +++ b/about/whoami.html @@ -6,12 +6,153 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>whoami</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> @@ -19,16 +160,43 @@ <p>Quotation is a serviceable substitute for wit.</p> -- <a href="https://archive.md/7AC79"><em>apparently no one</em></a> </center> -<p><em>TL;DR Above everything, I'm a lurker. And I mean that in the traditional forum/mailing list sense. You could put it a few ways and still be right: a reader, a people watcher, a listener, maybe a coward if you're cynical. But all in all, not anyone in particular really.</em></p> -<p>When I first came up with a writing a page with this title, it devolved into a kind of personal essay. The kind of unwelcome nonsense you no doubt encounter (and I no doubt supplied) in comment sections on the Internet or the paginated newsfeeds written by faceless names or in the rambling profiles that start with birth and forget where they're going around college. It seems to come easy to a lot of us.</p> +<p><em>TL;DR Above everything, I'm a lurker. And I mean that in the +traditional forum/mailing list sense. You could put it a few ways and +still be right: a reader, a people watcher, a listener, maybe a coward +if you're cynical. But all in all, not anyone in particular +really.</em></p> +<p>When I first came up with a writing a page with this title, it +devolved into a kind of personal essay. The kind of unwelcome nonsense +you no doubt encounter (and I no doubt supplied) in comment sections on +the Internet or the paginated newsfeeds written by faceless names or in +the rambling profiles that start with birth and forget where they're +going around college. It seems to come easy to a lot of us.</p> <p>Now, I'm not so sure I've earned the right yet.</p> -<p>I'd rather just let my work (and my play) stand for itself, for whatever it's worth. You'll get it as you go I'm sure. That said, there are some things that probably help for context's sake:</p> +<p>I'd rather just let my work (and my play) stand for itself, for +whatever it's worth. You'll get it as you go I'm sure. That said, there +are some things that probably help for context's sake:</p> <ul> -<li><p>I'm born, raised, and hosted on the US East Coast. By most countries' standards, that means I have no sense of the world outside of my own country, which despite my best efforts, is probably true</p></li> -<li><p>I'm raised and hosted (not born) on free software (unless you count whatever my VPS is running). This server is running OpenBSD with nginx and httpd working together to host a small git repo and this flask app I threw together</p></li> -<li><p>I'm born and raised (not hosted) by Luddites, for the most part. And I don't mean that in entirely bad way. What I mean is I grew up around mostly people who didn't know and didn't care to know about advances in technology or the merging of that technology with culture. In fact, that might be the appropriate view to have in light of recent circumstances.</p></li> -<li><p>By trade, I'm best at data recovery and writing good documentation. I'm self-taught at programming software design so by most metrics, I'm probably not great at that, but I'm getting there. I love a good math problem, and though I only got a B in my college circuits class, I still find time to make some lights blink.</p></li> -<li><p>I spend a lot of time on the Internet lost. And in the process, sometimes find useful things; though I largely find nonsense, which has it's own value, but it's separate.</p></li> +<li><p>I'm born, raised, and hosted on the US East Coast. By most +countries' standards, that means I have no sense of the world outside of +my own country, which despite my best efforts, is probably true</p></li> +<li><p>I'm raised and hosted (not born) on free software (unless you +count whatever my VPS is running). This server is running OpenBSD with +nginx and httpd working together to host a small git repo and this flask +app I threw together</p></li> +<li><p>I'm born and raised (not hosted) by Luddites, for the most part. +And I don't mean that in entirely bad way. What I mean is I grew up +around mostly people who didn't know and didn't care to know about +advances in technology or the merging of that technology with culture. +In fact, that might be the appropriate view to have in light of recent +circumstances.</p></li> +<li><p>By trade, I'm best at data recovery and writing good +documentation. I'm self-taught at programming software design so by most +metrics, I'm probably not great at that, but I'm getting there. I love a +good math problem, and though I only got a B in my college circuits +class, I still find time to make some lights blink.</p></li> +<li><p>I spend a lot of time on the Internet lost. And in the process, +sometimes find useful things; though I largely find nonsense, which has +it's own value, but it's separate.</p></li> </ul> <p>Here is as close to home as I'll get for now.</p> </body> diff --git a/about/whyami.html b/about/whyami.html index e181213..954b926 100644 --- a/about/whyami.html +++ b/about/whyami.html @@ -6,17 +6,159 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>whyami</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> <center> -<p>We are here on Earth to fart around. Don't let anybody tell you any different.</p> +<p>We are here on Earth to fart around. Don't let anybody tell you any +different.</p> -- <em>Kurt Vonnegut, from A man without a country.</em> </center> </body> diff --git a/thoughts/syntax/my-worst-habit.html b/thoughts/syntax/my-worst-habit.html index 05a7cb4..65f19d8 100644 --- a/thoughts/syntax/my-worst-habit.html +++ b/thoughts/syntax/my-worst-habit.html @@ -6,18 +6,169 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>my-worst-habit</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> <p>Overuse of parentheses, by far.</p> -<p>Why is this a bad thing? Parentheses, as read by most readers, tend to contain additional <em>superfluous</em> information when read. So naturally, the mind tends to pay less attention to what's inside (or at least my mind does). I also believe it represents some repressed psychological trauma, since a Professor once circled how many times I abused the double dash, "--", and I haven't quite felt comfortable using it since--unless it feels right. As a result, I've found a new punctuation mark to abuse.</p> -<p>The parentheses and double dash work all right in that last paragraph, but relying on it leads to bad habits, and usually, sentences that droll on for far longer than welcome. Consider the following example from Naked Lunch:</p> +<p>Why is this a bad thing? Parentheses, as read by most readers, tend +to contain additional <em>superfluous</em> information when read. So +naturally, the mind tends to pay less attention to what's inside (or at +least my mind does). I also believe it represents some repressed +psychological trauma, since a Professor once circled how many times I +abused the double dash, "--", and I haven't quite felt comfortable using +it since--unless it feels right. As a result, I've found a new +punctuation mark to abuse.</p> +<p>The parentheses and double dash work all right in that last +paragraph, but relying on it leads to bad habits, and usually, sentences +that droll on for far longer than welcome. Consider the following +example from Naked Lunch:</p> <pre><code>Doc Browbeck was party inna second part. A retired abortionist and junk pusher (he was a veterinarian actually) recalled to service during the manpower shortage. Well, Doc had been in the hospital kitchen all @@ -42,12 +193,22 @@ family in use among the Indians of South America. They are usually administered by sniffing a dried powder of the plant. The medicine men take these noxious substances and go into convulsive states. Their twitchings and mutterings are thought to have prophetic significance.")</code></pre> -<p>This is the only example I know that dares to put parentheses <em>and</em> a long quote within parentheses, unless we're counting math textbooks. In a way it works, since if information is ever <em>superfluous</em>, the history of sailors getting high on nutmeg fits that bill. A careful reader might easily pick up on that, but to everyone else, I think a full paragraph of text in parentheses signals the reader to scroll down in the hopes that the story continues.</p> -<p>But just in case you think I'm just picking on William S. Burroughs, here's an example I regrettably wrote to a coworker recently with some details removed:</p> +<p>This is the only example I know that dares to put parentheses +<em>and</em> a long quote within parentheses, unless we're counting math +textbooks. In a way it works, since if information is ever +<em>superfluous</em>, the history of sailors getting high on nutmeg fits +that bill. A careful reader might easily pick up on that, but to +everyone else, I think a full paragraph of text in parentheses signals +the reader to scroll down in the hopes that the story continues.</p> +<p>But just in case you think I'm just picking on William S. Burroughs, +here's an example I regrettably wrote to a coworker recently with some +details removed:</p> <pre><code>[...] As a precaution, I did review $NOBODY's recent $THING_I_WAS_ASKED_TO_REVIEW (if you would like a detailed report on that, I can pull that together for you).</code></pre> -<p>Somehow, I managed to take the <em>one</em> point worth emphasizing (an entire sentence at that!) and <em>de</em>-emphasized it.</p> -<p>It's a habit I can't break. So please, if you are a caring reader, do complain when I overuse parentheses. I deserve it.</p> +<p>Somehow, I managed to take the <em>one</em> point worth emphasizing +(an entire sentence at that!) and <em>de</em>-emphasized it.</p> +<p>It's a habit I can't break. So please, if you are a caring reader, do +complain when I overuse parentheses. I deserve it.</p> </body> </html> diff --git a/thoughts/syntax/random-python-idiosyncrasies.html b/thoughts/syntax/random-python-idiosyncrasies.html index fd2336d..dc67e4d 100644 --- a/thoughts/syntax/random-python-idiosyncrasies.html +++ b/thoughts/syntax/random-python-idiosyncrasies.html @@ -6,6 +6,146 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>random-python-idiosyncrasies</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} @@ -15,6 +155,7 @@ pre > code.sourceCode { white-space: pre; position: relative; } pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } + .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } div.sourceCode { margin: 1em 0; } pre.sourceCode { margin: 0; } @@ -49,7 +190,7 @@ code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ code span.at { color: #7d9029; } /* Attribute */ code span.bn { color: #40a070; } /* BaseN */ - code span.bu { } /* BuiltIn */ + code span.bu { color: #008000; } /* BuiltIn */ code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ code span.ch { color: #4070a0; } /* Char */ code span.cn { color: #880000; } /* Constant */ @@ -62,7 +203,7 @@ code span.ex { } /* Extension */ code span.fl { color: #40a070; } /* Float */ code span.fu { color: #06287e; } /* Function */ - code span.im { } /* Import */ + code span.im { color: #008000; font-weight: bold; } /* Import */ code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ code span.kw { color: #007020; font-weight: bold; } /* Keyword */ code span.op { color: #666666; } /* Operator */ @@ -74,6 +215,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> @@ -82,78 +224,128 @@ <ul> <li><a href="#coding-style-guide">Coding Style Guide</a> <ul> -<li><a href="#strings-are-double-quoted.-keys-and-chars-are-single-quoted.">1) <em>Strings</em> are <em>double-quoted</em>. <em>Keys</em> and <em>chars</em> are <em>single-quoted</em>.</a></li> -<li><a href="#long-strings-belong-in-parentheses">2) Long strings belong in parentheses</a></li> -<li><a href="#tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs">3) Tabs are four spaces and spaces are <em>ALWAYS</em> preferred to tabs</a></li> -<li><a href="#always-add-spaces-between-arithmetic-but-never-for-brackets">4) Always add spaces between arithmetic, but never for brackets</a></li> -<li><a href="#everything-should-be-snake_case">5) EVERYTHING should be snake_case</a></li> -<li><a href="#if-its-over-100-lines-you-probably-need-a-new-file-and-a-class">6) If it's over 100 lines, you probably need a new file (and a class)</a></li> +<li><a +href="#strings-are-double-quoted.-keys-and-chars-are-single-quoted.">1) +<em>Strings</em> are <em>double-quoted</em>. <em>Keys</em> and +<em>chars</em> are <em>single-quoted</em>.</a></li> +<li><a href="#long-strings-belong-in-parentheses">2) Long strings belong +in parentheses</a></li> +<li><a +href="#tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs">3) +Tabs are four spaces and spaces are <em>ALWAYS</em> preferred to +tabs</a></li> +<li><a +href="#always-add-spaces-between-arithmetic-but-never-for-brackets">4) +Always add spaces between arithmetic, but never for brackets</a></li> +<li><a href="#everything-should-be-snake_case">5) EVERYTHING should be +snake_case</a></li> +<li><a +href="#if-its-over-100-lines-you-probably-need-a-new-file-and-a-class">6) +If it's over 100 lines, you probably need a new file (and a +class)</a></li> </ul></li> </ul> </nav> <h1 id="coding-style-guide">Coding Style Guide</h1> <p>The purpose of this document is twofold:</p> <ol type="1"> -<li>To ensure that anyone who might like to make my code better understands why I write python the way I do</li> -<li>To ensure <em>I</em> adhere to my own style because I'm terribly inconsistent</li> +<li>To ensure that anyone who might like to make my code better +understands why I write python the way I do</li> +<li>To ensure <em>I</em> adhere to my own style because I'm terribly +inconsistent</li> </ol> -<p>Being terribly inconsistent, the guidelines are not set in stone and if you have a good argument for doing things a particular, I don't really care.</p> -<p><em>BUT</em> first and foremost, <em>code must comply with PEP8 first</em>. This is easy to automate. I like <a href="https://pypi.org/project/black/">black</a> since it's easy to use but there' plenty of advanced linters out there.</p> -<p>I usually invoke it like this to turn off forcing double quotes and force the line length to 72:</p> -<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true"></a><span class="ex">black</span> -S -l 72 file.py</span></code></pre></div> +<p>Being terribly inconsistent, the guidelines are not set in stone and +if you have a good argument for doing things a particular, I don't +really care.</p> +<p><em>BUT</em> first and foremost, <em>code must comply with PEP8 +first</em>. This is easy to automate. I like <a +href="https://pypi.org/project/black/">black</a> since it's easy to use +but there' plenty of advanced linters out there.</p> +<p>I usually invoke it like this to turn off forcing double quotes and +force the line length to 72:</p> +<div class="sourceCode" id="cb1"><pre +class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">black</span> <span class="at">-S</span> <span class="at">-l</span> 72 file.py</span></code></pre></div> <p>That aside, I have the following idiosyncracies:</p> -<h2 id="strings-are-double-quoted.-keys-and-chars-are-single-quoted.">1) <em>Strings</em> are <em>double-quoted</em>. <em>Keys</em> and <em>chars</em> are <em>single-quoted</em>.</h2> -<p>This is really just because I like how C does it. And Cpython's C-based so why not?</p> +<h2 id="strings-are-double-quoted.-keys-and-chars-are-single-quoted.">1) +<em>Strings</em> are <em>double-quoted</em>. <em>Keys</em> and +<em>chars</em> are <em>single-quoted</em>.</h2> +<p>This is really just because I like how C does it. And Cpython's +C-based so why not?</p> <p>Like so:</p> -<div class="sourceCode" id="cb2"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true"></a>string <span class="op">=</span> <span class="st">"This is a phrase"</span></span> -<span id="cb2-2"><a href="#cb2-2" aria-hidden="true"></a>word <span class="op">=</span> <span class="st">"word"</span></span> -<span id="cb2-3"><a href="#cb2-3" aria-hidden="true"></a>cur_char <span class="op">=</span> <span class="st">'a'</span></span> -<span id="cb2-4"><a href="#cb2-4" aria-hidden="true"></a>newline <span class="op">=</span> <span class="st">'</span><span class="ch">\n</span><span class="st">'</span> <span class="co"># note, two characters, but it's still ONE char out</span></span> -<span id="cb2-5"><a href="#cb2-5" aria-hidden="true"></a><span class="co"># keys are single-quoted to avoid confusion</span></span> -<span id="cb2-6"><a href="#cb2-6" aria-hidden="true"></a>dictionary <span class="op">=</span> { <span class="st">'key'</span> <span class="st">"1245dqw3w431"</span>, <span class="st">'return'</span>: newline }</span></code></pre></div> -<p>The only exception is for strings with quotes in them (anything to avoid escapes, really)</p> -<div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true"></a>quoted_string <span class="op">=</span> (</span> -<span id="cb3-2"><a href="#cb3-2" aria-hidden="true"></a> <span class="st">'"You miss 100</span><span class="sc">% o</span><span class="st">f the shots you don'</span>t take <span class="op">-</span> Wayne Gretsky<span class="st">"'</span></span> -<span id="cb3-3"><a href="#cb3-3" aria-hidden="true"></a><span class="st"> ' - Michael Scott'</span></span> -<span id="cb3-4"><a href="#cb3-4" aria-hidden="true"></a><span class="st">)</span></span></code></pre></div> +<div class="sourceCode" id="cb2"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>string <span class="op">=</span> <span class="st">"This is a phrase"</span></span> +<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>word <span class="op">=</span> <span class="st">"word"</span></span> +<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>cur_char <span class="op">=</span> <span class="st">'a'</span></span> +<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>newline <span class="op">=</span> <span class="st">'</span><span class="ch">\n</span><span class="st">'</span> <span class="co"># note, two characters, but it's still ONE char out</span></span> +<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a><span class="co"># keys are single-quoted to avoid confusion</span></span> +<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a>dictionary <span class="op">=</span> { <span class="st">'key'</span> <span class="st">"1245dqw3w431"</span>, <span class="st">'return'</span>: newline }</span></code></pre></div> +<p>The only exception is for strings with quotes in them (anything to +avoid escapes, really)</p> +<div class="sourceCode" id="cb3"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>quoted_string <span class="op">=</span> (</span> +<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="st">'"You miss 100</span><span class="sc">% o</span><span class="st">f the shots you don'</span>t take <span class="op">-</span> Wayne Gretsky<span class="st">"'</span></span> +<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="er"> ' - Michael Scott'</span></span> +<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="er">)</span></span></code></pre></div> <p>That brings me to my next point.</p> -<h2 id="long-strings-belong-in-parentheses">2) Long strings belong in parentheses</h2> +<h2 id="long-strings-belong-in-parentheses">2) Long strings belong in +parentheses</h2> <p>As in:</p> -<div class="sourceCode" id="cb4"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true"></a>longboi <span class="op">=</span> (</span> -<span id="cb4-2"><a href="#cb4-2" aria-hidden="true"></a> <span class="st">"This is a really long string usefull when making help menus. Be</span><span class="ch">\n</span><span class="st">"</span></span> -<span id="cb4-3"><a href="#cb4-3" aria-hidden="true"></a> <span class="st">"sure to leave s space at the end of each line, or add a new line</span><span class="ch">\n</span><span class="st">"</span></span> -<span id="cb4-4"><a href="#cb4-4" aria-hidden="true"></a> <span class="st">"when needed.</span><span class="ch">\n\n</span><span class="st">"</span></span> -<span id="cb4-5"><a href="#cb4-5" aria-hidden="true"></a></span> -<span id="cb4-6"><a href="#cb4-6" aria-hidden="true"></a> <span class="st">"Try your best to keep formatting accurate like this."</span></span> -<span id="cb4-7"><a href="#cb4-7" aria-hidden="true"></a>)</span></code></pre></div> -<h2 id="tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs">3) Tabs are four spaces and spaces are <em>ALWAYS</em> preferred to tabs</h2> +<div class="sourceCode" id="cb4"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>longboi <span class="op">=</span> (</span> +<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a> <span class="st">"This is a really long string usefull when making help menus. Be</span><span class="ch">\n</span><span class="st">"</span></span> +<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a> <span class="st">"sure to leave s space at the end of each line, or add a new line</span><span class="ch">\n</span><span class="st">"</span></span> +<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a> <span class="st">"when needed.</span><span class="ch">\n\n</span><span class="st">"</span></span> +<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a></span> +<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a> <span class="st">"Try your best to keep formatting accurate like this."</span></span> +<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a>)</span></code></pre></div> +<h2 id="tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs">3) +Tabs are four spaces and spaces are <em>ALWAYS</em> preferred to +tabs</h2> <p>Again, see PEP8.</p> -<h2 id="always-add-spaces-between-arithmetic-but-never-for-brackets">4) Always add spaces between arithmetic, but never for brackets</h2> +<h2 id="always-add-spaces-between-arithmetic-but-never-for-brackets">4) +Always add spaces between arithmetic, but never for brackets</h2> <p>It's a pain to read:</p> -<div class="sourceCode" id="cb5"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true"></a><span class="dv">1</span><span class="op">/</span>(<span class="dv">2</span><span class="op">*</span>sqrt(pi))<span class="op">*</span>exp(x<span class="op">**</span><span class="dv">2</span>)</span></code></pre></div> +<div class="sourceCode" id="cb5"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="dv">1</span><span class="op">/</span>(<span class="dv">2</span><span class="op">*</span>sqrt(pi))<span class="op">*</span>exp(x<span class="op">**</span><span class="dv">2</span>)</span></code></pre></div> <p>Do this</p> -<div class="sourceCode" id="cb6"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true"></a><span class="dv">1</span> <span class="op">/</span> (<span class="dv">2</span> <span class="op">*</span> sqrt(pi)) <span class="op">*</span> exp(x <span class="op">**</span> <span class="dv">2</span>)</span></code></pre></div> +<div class="sourceCode" id="cb6"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="dv">1</span> <span class="op">/</span> (<span class="dv">2</span> <span class="op">*</span> sqrt(pi)) <span class="op">*</span> exp(x <span class="op">**</span> <span class="dv">2</span>)</span></code></pre></div> <p>The same goes for logic operators</p> -<div class="sourceCode" id="cb7"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true"></a>true <span class="op">&</span> false <span class="op">^</span> true</span></code></pre></div> -<h2 id="everything-should-be-snake_case">5) EVERYTHING should be snake_case</h2> -<p>This is python. Unless there's a compatibility thing (like a library's code was written that way, or it matches an API variable), snake_case is preferred.</p> -<div class="sourceCode" id="cb8"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true"></a>user_input <span class="op">=</span> <span class="bu">int</span>(<span class="bu">input</span>()) <span class="co"># variable</span></span> -<span id="cb8-2"><a href="#cb8-2" aria-hidden="true"></a>MAX_INPUT <span class="op">=</span> <span class="dv">1000</span> <span class="co"># constant</span></span> -<span id="cb8-3"><a href="#cb8-3" aria-hidden="true"></a><span class="kw">def</span> judge_input(_input, _max): <span class="co"># function</span></span> -<span id="cb8-4"><a href="#cb8-4" aria-hidden="true"></a> <span class="cf">if</span> _max <span class="op">></span> _input:</span> -<span id="cb8-5"><a href="#cb8-5" aria-hidden="true"></a> <span class="bu">print</span>(<span class="st">"Too big!"</span>)</span> -<span id="cb8-6"><a href="#cb8-6" aria-hidden="true"></a></span> -<span id="cb8-7"><a href="#cb8-7" aria-hidden="true"></a>judge_input(user_input, MAX_INPUT</span> -<span id="cb8-8"><a href="#cb8-8" aria-hidden="true"></a><span class="kw">class</span> Input_Judger: <span class="co"># a class</span></span> -<span id="cb8-9"><a href="#cb8-9" aria-hidden="true"></a> <span class="co"># etc etc</span></span></code></pre></div> +<div class="sourceCode" id="cb7"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a>true <span class="op">&</span> false <span class="op">^</span> true</span></code></pre></div> +<h2 id="everything-should-be-snake_case">5) EVERYTHING should be +snake_case</h2> +<p>This is python. Unless there's a compatibility thing (like a +library's code was written that way, or it matches an API variable), +snake_case is preferred.</p> +<div class="sourceCode" id="cb8"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a>user_input <span class="op">=</span> <span class="bu">int</span>(<span class="bu">input</span>()) <span class="co"># variable</span></span> +<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a>MAX_INPUT <span class="op">=</span> <span class="dv">1000</span> <span class="co"># constant</span></span> +<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> judge_input(_input, _max): <span class="co"># function</span></span> +<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> _max <span class="op">></span> _input:</span> +<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a> <span class="bu">print</span>(<span class="st">"Too big!"</span>)</span> +<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a></span> +<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a>judge_input(user_input, MAX_INPUT</span> +<span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a><span class="kw">class</span> Input_Judger: <span class="co"># a class</span></span> +<span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a> <span class="co"># etc etc</span></span></code></pre></div> <p>Example exception:</p> -<div class="sourceCode" id="cb9"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true"></a><span class="co"># this doesn't actually work, but you get the idea</span></span> -<span id="cb9-2"><a href="#cb9-2" aria-hidden="true"></a>r <span class="op">=</span> requests.get(<span class="st">"www.debian.org"</span>)</span> -<span id="cb9-3"><a href="#cb9-3" aria-hidden="true"></a>pageSize <span class="op">=</span> r.json()[<span class="st">'pageSize'</span>] <span class="co"># camel case ok</span></span></code></pre></div> -<h2 id="if-its-over-100-lines-you-probably-need-a-new-file-and-a-class">6) If it's over 100 lines, you probably need a new file (and a class)</h2> -<p>This is more of a general coding thing, but I've encountered so many 1000 line monster out there, I need to reiterate it. I understand how these things come to be, having made a few myself in the beginning. You get an idea and want to see it through in full. Like <em>On the Road</em> it comes out as a scroll Merlin himself would be proud of.</p> -<p>But coming back to the scroll in a week half-drunk and half-tired is not a situation you want to be caught in. You can always import <em>any</em> python code you write with a simple:</p> -<div class="sourceCode" id="cb10"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true"></a><span class="im">import</span> filename</span></code></pre></div> +<div class="sourceCode" id="cb9"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="co"># this doesn't actually work, but you get the idea</span></span> +<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a>r <span class="op">=</span> requests.get(<span class="st">"www.debian.org"</span>)</span> +<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a>pageSize <span class="op">=</span> r.json()[<span class="st">'pageSize'</span>] <span class="co"># camel case ok</span></span></code></pre></div> +<h2 +id="if-its-over-100-lines-you-probably-need-a-new-file-and-a-class">6) +If it's over 100 lines, you probably need a new file (and a class)</h2> +<p>This is more of a general coding thing, but I've encountered so many +1000 line monster out there, I need to reiterate it. I understand how +these things come to be, having made a few myself in the beginning. You +get an idea and want to see it through in full. Like <em>On the +Road</em> it comes out as a scroll Merlin himself would be proud of.</p> +<p>But coming back to the scroll in a week half-drunk and half-tired is +not a situation you want to be caught in. You can always import +<em>any</em> python code you write with a simple:</p> +<div class="sourceCode" id="cb10"><pre +class="sourceCode python"><code class="sourceCode python"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> filename</span></code></pre></div> <p>As long as it's in the same directory.</p> </body> </html> diff --git a/tutorials/tor/how-to-host-a-tor-hidden-service.html b/tutorials/tor/how-to-host-a-tor-hidden-service.html index 43b6364..79a4e2e 100644 --- a/tutorials/tor/how-to-host-a-tor-hidden-service.html +++ b/tutorials/tor/how-to-host-a-tor-hidden-service.html @@ -6,62 +6,241 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>how-to-host-a-tor-hidden-service</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#how-to-spin-up-a-temporary-hidden-file-share-with-python">How to spin up a temporary hidden file share with Python</a> +<li><a +href="#how-to-spin-up-a-temporary-hidden-file-share-with-python">How to +spin up a temporary hidden file share with Python</a> <ul> <li><a href="#configure-tor">Configure Tor</a></li> <li><a href="#set-up-the-server">Set up the server</a></li> </ul></li> </ul> </nav> -<p>This might sound spooky and complicated, but it's really not. If you want to host a small site or a small file share among friends, I honestly think Tor is one of the easiest and safest options to set up.</p> -<p>Getting a Tor hidden service running is so stupidly easy that it hardly deserves it's own article. Tor's website has a great guide right <a href="https://community.torproject.org/onion-services/setup/">here</a>. I figured I'd put my own spin on it by showing you show to host a temporary server to share some files with your friends. Please note the word <em>temporary</em> in that last sentence; running this way for a while is insecure and not a good idea. For a permanent solution, you'll want to host a real web server as explained <a href="/tutorials/www/how-to-make-this-site.html">here</a>.</p> -<p>Like that article, I will only explain how to do this on Linux since it's way easier and, to be honest, I've never tried to do it on Windows. If you've never used Linux before, buy a Raspberry Pi and follow the basic install guide. If you're strapped for cash, run it in a virtual machine, or use <a href="https://docs.microsoft.com/en-us/windows/wsl/install">Windows Subsystem for Linux</a>.</p> -<h2 id="how-to-spin-up-a-temporary-hidden-file-share-with-python">How to spin up a temporary hidden file share with Python</h2> -<p>Once you have Debian/Ubuntu/whatever installed and it's updated to your liking, you can install Tor with:</p> +<p>This might sound spooky and complicated, but it's really not. If you +want to host a small site or a small file share among friends, I +honestly think Tor is one of the easiest and safest options to set +up.</p> +<p>Getting a Tor hidden service running is so stupidly easy that it +hardly deserves it's own article. Tor's website has a great guide right +<a +href="https://community.torproject.org/onion-services/setup/">here</a>. +I figured I'd put my own spin on it by showing you show to host a +temporary server to share some files with your friends. Please note the +word <em>temporary</em> in that last sentence; running this way for a +while is insecure and not a good idea. For a permanent solution, you'll +want to host a real web server as explained <a +href="/tutorials/www/how-to-make-this-site.html">here</a>.</p> +<p>Like that article, I will only explain how to do this on Linux since +it's way easier and, to be honest, I've never tried to do it on Windows. +If you've never used Linux before, buy a Raspberry Pi and follow the +basic install guide. If you're strapped for cash, run it in a virtual +machine, or use <a +href="https://docs.microsoft.com/en-us/windows/wsl/install">Windows +Subsystem for Linux</a>.</p> +<h2 id="how-to-spin-up-a-temporary-hidden-file-share-with-python">How to +spin up a temporary hidden file share with Python</h2> +<p>Once you have Debian/Ubuntu/whatever installed and it's updated to +your liking, you can install Tor with:</p> <pre><code>$ sudo apt install tor</code></pre> <p>Start (or stop) Tor with:</p> <pre><code>$ sudo service tor start</code></pre> <p>or</p> <pre><code>$ sudo systemctl start tor.service</code></pre> -<p>You may need to enable the service first. I think this is done by default now, but it doesn't hurt:</p> +<p>You may need to enable the service first. I think this is done by +default now, but it doesn't hurt:</p> <pre><code>$ sudo systemctl enable tor.service</code></pre> <h3 id="configure-tor">Configure Tor</h3> -<p>You'll need to edit the file "/etc/tor/torrc" before your service can be available over Tor. Use vim, nano, or whatever you like to edit the file (as root!) and search for the following lines:</p> +<p>You'll need to edit the file "/etc/tor/torrc" before your service can +be available over Tor. Use vim, nano, or whatever you like to edit the +file (as root!) and search for the following lines:</p> <pre><code>#HiddenServiceDir /var/lib/tor/hidden_service/ #HiddenServicePort 80 127.0.0.1:80</code></pre> -<p>Remove the '#' at the beginning of each and change the port to 8000 like so:</p> +<p>Remove the '#' at the beginning of each and change the port to 8000 +like so:</p> <pre><code>HiddenServiceDir /var/lib/tor/hidden_service/ HiddenServicePort 80 127.0.0.1:8000</code></pre> <p>Save and restart Tor for the changes to apply:</p> <pre><code>$ sudo service tor restart</code></pre> -<p>Once you do this, you'll get a new onion address located in the directory noted above. Use cat to read the hostname file and copy it down somewhere. This is your ".onion" address:</p> +<p>Once you do this, you'll get a new onion address located in the +directory noted above. Use cat to read the hostname file and copy it +down somewhere. This is your ".onion" address:</p> <pre><code>$ cat /var/lib/tor/hidden_service/hostname</code></pre> <h3 id="set-up-the-server">Set up the server</h3> <p>Make some directory to hold your files.</p> <pre><code>$ mkdir -pv ~/files</code></pre> <p>If you're on WSL you can copy files from your C drive like so:</p> <pre><code>$ cp -vr /mnt/c/Users/username/Desktop/cats ~/files/</code></pre> -<p>On a remote server (like a Raspberry pi) you can use scp instead (replace 'rapsberry' with the hostname or local IP of you Pi):</p> +<p>On a remote server (like a Raspberry pi) you can use scp instead +(replace 'rapsberry' with the hostname or local IP of you Pi):</p> <pre><code>$ scp -vr cats pi@raspberry:~/files/</code></pre> -<p>Since we're only doing this temporarily, we don't care too much about security or where the files should go, but if you want to be careful, you can issue the following to set the directory to read only after you copy your files in:</p> +<p>Since we're only doing this temporarily, we don't care too much about +security or where the files should go, but if you want to be careful, +you can issue the following to set the directory to read only after you +copy your files in:</p> <pre><code>$ chmod -R 644 files</code></pre> <p>Change into the directory and run Python's built-in http server:</p> <pre><code>$ cd files $ python3 -m http.server</code></pre> -<p>You'll see the server is being hosted on port 8000, which is what we chose in the config file earlier. Just leave it running, or send it to the background with Ctrl+Z and run "bg".</p> -<p>And that's it! You are now the proud owner of a tor hidden service. Take the hostname you copied down before and add ".onion" to the end and give it to your friends so they can browse the files in the directory through the Tor Browser.</p> -<p>Be sure to watch the program log though... lest they get up to no good.</p> +<p>You'll see the server is being hosted on port 8000, which is what we +chose in the config file earlier. Just leave it running, or send it to +the background with Ctrl+Z and run "bg".</p> +<p>And that's it! You are now the proud owner of a tor hidden service. +Take the hostname you copied down before and add ".onion" to the end and +give it to your friends so they can browse the files in the directory +through the Tor Browser.</p> +<p>Be sure to watch the program log though... lest they get up to no +good.</p> </body> </html> diff --git a/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html b/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html index 075d777..17f8c84 100644 --- a/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html +++ b/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html @@ -6,6 +6,146 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>how-to-fix-neovim-nerdtree-rendering-issue</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} @@ -15,6 +155,7 @@ pre > code.sourceCode { white-space: pre; position: relative; } pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } pre > code.sourceCode > span:empty { height: 1.2em; } + .sourceCode { overflow: visible; } code.sourceCode > span { color: inherit; text-decoration: inherit; } div.sourceCode { margin: 1em 0; } pre.sourceCode { margin: 0; } @@ -49,7 +190,7 @@ code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ code span.at { color: #7d9029; } /* Attribute */ code span.bn { color: #40a070; } /* BaseN */ - code span.bu { } /* BuiltIn */ + code span.bu { color: #008000; } /* BuiltIn */ code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ code span.ch { color: #4070a0; } /* Char */ code span.cn { color: #880000; } /* Constant */ @@ -62,7 +203,7 @@ code span.ex { } /* Extension */ code span.fl { color: #40a070; } /* Float */ code span.fu { color: #06287e; } /* Function */ - code span.im { } /* Import */ + code span.im { color: #008000; font-weight: bold; } /* Import */ code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ code span.kw { color: #007020; font-weight: bold; } /* Keyword */ code span.op { color: #666666; } /* Operator */ @@ -74,6 +215,7 @@ code span.va { color: #19177c; } /* Variable */ code span.vs { color: #4070a0; } /* VerbatimString */ code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> @@ -85,22 +227,40 @@ <li><a href="#the-actual-solution">The Actual Solution</a></li> </ul> </nav> -<p>I really like neovim since <a href="https://github.com/neoclide/coc.nvim">COC</a> is integrated with it to work nicely. Plus, I like the defaults and the fact there's a lot of active development on extensions. I didn't use it for a long time because I <em>needed</em> NerdTree but every time I'd scroll the window, I'd get a mess.</p> +<p>I really like neovim since <a +href="https://github.com/neoclide/coc.nvim">COC</a> is integrated with +it to work nicely. Plus, I like the defaults and the fact there's a lot +of active development on extensions. I didn't use it for a long time +because I <em>needed</em> NerdTree but every time I'd scroll the window, +I'd get a mess.</p> <h2 id="the-problem">The Problem</h2> <p><img src="/static/mess.gif" /></p> -<p>Now, yes, I know I'm a heretic for using the arrow keys and not just jumping around, but I thought it was weird I didn't see this issue anywhere else. Also, vim doesn't have this problem.</p> +<p>Now, yes, I know I'm a heretic for using the arrow keys and not just +jumping around, but I thought it was weird I didn't see this issue +anywhere else. Also, vim doesn't have this problem.</p> <p><img src="/static/nomess-vim.gif" /></p> -<p>It's also not because of my meme tmux setup, the same issue happens in terminator, which I happened to have installed.</p> +<p>It's also not because of my meme tmux setup, the same issue happens +in terminator, which I happened to have installed.</p> <p><img src="/static/mess-terminator.gif" /></p> <h2 id="the-attempt">The Attempt</h2> -<p>There's a better way to do this, but I first figured just triggering a redraw on scroll would do the trick. You can do so by adding the following line to your init.vim file:</p> +<p>There's a better way to do this, but I first figured just triggering +a redraw on scroll would do the trick. You can do so by adding the +following line to your init.vim file:</p> <pre class="vimscript"><code>au WinScrolled * redraw!</code></pre> -<p>As it turns out, the "WinScrolled" event <em>only</em> exists in neovim, so this command won't work in plain vim (see <code>:help autocmd-events</code> for the list of events in each program).</p> +<p>As it turns out, the "WinScrolled" event <em>only</em> exists in +neovim, so this command won't work in plain vim (see +<code>:help autocmd-events</code> for the list of events in each +program).</p> <h2 id="the-actual-solution">The Actual Solution</h2> -<p>After installing COC and running a healthcheck, I realized that my TERM variable was set to 'xterm'. I'm not sure if I did that intentionally to run something or if it's just a legacy thing I left in from Debian's default bashrc, but all I had to do was change it:</p> -<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true"></a><span class="bu">export</span> <span class="va">TERM=</span><span class="st">'tmux256-color'</span></span></code></pre></div> +<p>After installing COC and running a healthcheck, I realized that my +TERM variable was set to 'xterm'. I'm not sure if I did that +intentionally to run something or if it's just a legacy thing I left in +from Debian's default bashrc, but all I had to do was change it:</p> +<div class="sourceCode" id="cb2"><pre +class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="bu">export</span> <span class="va">TERM</span><span class="op">=</span><span class="st">'tmux256-color'</span></span></code></pre></div> <p><img src="/static/fixed.gif" /></p> <p>No more hacky autocommands!</p> -<p>If I had the foresight to test the issue in xterm first, I probably would have seen it right away....</p> +<p>If I had the foresight to test the issue in xterm first, I probably +would have seen it right away....</p> </body> </html> diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html index c3290e9..2fcc26f 100644 --- a/tutorials/www/how-to-make-this-site.html +++ b/tutorials/www/how-to-make-this-site.html @@ -6,12 +6,153 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>how-to-make-this-site</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> @@ -19,21 +160,29 @@ <h2 id="toc-title">Contents</h2> <ul> <li><a href="#background">Background</a></li> -<li><a href="#what-is-a-web-server-and-how-do-i-run-one">What is a web server and how do I run one?</a> +<li><a href="#what-is-a-web-server-and-how-do-i-run-one">What is a web +server and how do I run one?</a> <ul> -<li><a href="#getting-from-localhost-to-the-internet">Getting from localhost to the internet</a></li> +<li><a href="#getting-from-localhost-to-the-internet">Getting from +localhost to the internet</a></li> </ul></li> -<li><a href="#how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How can I make this server available on the Internet <em>cheaply</em> and <em>independently</em></a> +<li><a +href="#how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How +can I make this server available on the Internet <em>cheaply</em> and +<em>independently</em></a> <ul> -<li><a href="#can-i-run-a-web-server-at-home">Can I run a web server at home</a></li> +<li><a href="#can-i-run-a-web-server-at-home">Can I run a web server at +home</a></li> <li><a href="#so-what-should-i-do">So what should I do</a></li> </ul></li> <li><a href="#whats-a-domain-name">What's a "Domain Name"</a></li> -<li><a href="#setup-https-and-tls-for-some-sense-of-security">Setup HTTPS and TLS, for some sense of security</a></li> +<li><a href="#setup-https-and-tls-for-some-sense-of-security">Setup +HTTPS and TLS, for some sense of security</a></li> <li><a href="#perspective">Perspective</a></li> <li><a href="#references">References</a> <ul> -<li><a href="#terms-of-service-for-certain-isps">Terms of service for certain ISPs</a> +<li><a href="#terms-of-service-for-certain-isps">Terms of service for +certain ISPs</a> <ul> <li><a href="#verizon">Verizon</a></li> <li><a href="#optimum">Optimum</a></li> @@ -46,27 +195,94 @@ </nav> <h2 id="background">Background</h2> <p><em>TL;DR get to </em><a href="#thepoint">the point</a></p> -<p>I think it was roughly the end of high school when I first had the idea I wanted to make <em>some</em> kind of website. This would be around 2010 and I did what I thought would be a good idea and bought a book on the subject: "Web Sites for Dummies." I was dummy after all...</p> -<p>I got up to hyper linking with the "a" tag until I hit a wall. I don't want to link the exact page since I don't want to get sued, but it basically read:</p> +<p>I think it was roughly the end of high school when I first had the +idea I wanted to make <em>some</em> kind of website. This would be +around 2010 and I did what I thought would be a good idea and bought a +book on the subject: "Web Sites for Dummies." I was dummy after +all...</p> +<p>I got up to hyper linking with the "a" tag until I hit a wall. I +don't want to link the exact page since I don't want to get sued, but it +basically read:</p> <pre><code>Web design programs: - Adobe Dreamweaver - Adobe Contribute - Microsoft Expression Web</code></pre> -<p>Well, damn. I didn't have any of those. And as a stingy high school kid, I didn't want to buy anything. So I shelved that book and forgot about for a while since making a website seemed too expensive and needed too much flashy software to make it. I knew nothing about free software at that age, other than music software like Audacity which is what I was into at the time.</p> -<p>A few years later I caught a bit of a poetry bug--and maybe a bit of a snooty college kid bug--and tried to run a blog. At that point, I had learned about WordPress, which lets you easily make a space for sharing writing, media, content, whatever really. And it's free as in <em>freedom</em> as I understand since it's licensed under the GPL (if you want to take the time to deploy it yourself). But they also give out free .wordpress domains and some storage space with a snazzy dashboard to manage it all.</p> -<p>I had fun with that one, I don't update it anymore, but it's still up at <a href="https://postquantumpoetry.wordpress.com">postquantumpoetry.wordpress.com</a>. WordPress got closer to what I wanted, but it still wasn't <em>really</em> my site; it was WordPress's site unless I wanted to pay the hosting and domain fee. It's pretty modest, but I wasn't sold on sticking with a .com or .space domain, or even sticking with WordPress. I was getting tired of blogging anyway. I was getting more interested in the stuff that made it work; it seemed a lot more fruitful than writing to no one.</p> -<p>It's now 2021, five years later, when I write this (and this website isn't even finished yet). So what led me down the rabbit hole again? It probably started where the last one left off, when I decided I wanted to switch to more practical IT things over the academic things I had previously wanted to pursue. I signed up for a Cybersecurity program, somehow got in, and eventually managed to land an entry-level SOC role after graduating. At this point, it was getting a little weird that I had no web presence, especially after I decided to take down most of my social media accounts a few years ago.</p> -<p>So I was back at "how do I make a website," again, but this time, I at least had some understanding of what a server was and how networks work. And more importantly, I had a better idea of what it meant for a computer to be <em>mine</em>.</p> +<p>Well, damn. I didn't have any of those. And as a stingy high school +kid, I didn't want to buy anything. So I shelved that book and forgot +about for a while since making a website seemed too expensive and needed +too much flashy software to make it. I knew nothing about free software +at that age, other than music software like Audacity which is what I was +into at the time.</p> +<p>A few years later I caught a bit of a poetry bug--and maybe a bit of +a snooty college kid bug--and tried to run a blog. At that point, I had +learned about WordPress, which lets you easily make a space for sharing +writing, media, content, whatever really. And it's free as in +<em>freedom</em> as I understand since it's licensed under the GPL (if +you want to take the time to deploy it yourself). But they also give out +free .wordpress domains and some storage space with a snazzy dashboard +to manage it all.</p> +<p>I had fun with that one, I don't update it anymore, but it's still up +at <a +href="https://postquantumpoetry.wordpress.com">postquantumpoetry.wordpress.com</a>. +WordPress got closer to what I wanted, but it still wasn't +<em>really</em> my site; it was WordPress's site unless I wanted to pay +the hosting and domain fee. It's pretty modest, but I wasn't sold on +sticking with a .com or .space domain, or even sticking with WordPress. +I was getting tired of blogging anyway. I was getting more interested in +the stuff that made it work; it seemed a lot more fruitful than writing +to no one.</p> +<p>It's now 2021, five years later, when I write this (and this website +isn't even finished yet). So what led me down the rabbit hole again? It +probably started where the last one left off, when I decided I wanted to +switch to more practical IT things over the academic things I had +previously wanted to pursue. I signed up for a Cybersecurity program, +somehow got in, and eventually managed to land an entry-level SOC role +after graduating. At this point, it was getting a little weird that I +had no web presence, especially after I decided to take down most of my +social media accounts a few years ago.</p> +<p>So I was back at "how do I make a website," again, but this time, I +at least had some understanding of what a server was and how networks +work. And more importantly, I had a better idea of what it meant for a +computer to be <em>mine</em>.</p> <p>Even though--let's be real--it <em>still isn't.</em></p> -<p>I can't get high-speed Internet easily which I need to host a server long-term so I'm stuck using some else's computer, otherwise called a Virtual Private Server (VPS). Even if I could host at home, I'm still at the mercy of my ISP.</p> -<p>Because of that, I think it's important to understand that "running your own website" is not just a <em>technical</em> ordeal, but also an <em>economic</em> one since you have to carefully think about what it means to you to <em>own</em> your server, your software, and your hardware. That doesn't mean it's hard to do, just that there's options.</p> +<p>I can't get high-speed Internet easily which I need to host a server +long-term so I'm stuck using some else's computer, otherwise called a +Virtual Private Server (VPS). Even if I could host at home, I'm still at +the mercy of my ISP.</p> +<p>Because of that, I think it's important to understand that "running +your own website" is not just a <em>technical</em> ordeal, but also an +<em>economic</em> one since you have to carefully think about what it +means to you to <em>own</em> your server, your software, and your +hardware. That doesn't mean it's hard to do, just that there's +options.</p> <p><a id="thepoint"></a></p> -<h2 id="what-is-a-web-server-and-how-do-i-run-one">What is a web server and how do I run one?</h2> -<p><em>TL;DR a web server is just a program that lets other computers on a network view files in a chosen folder. All you need to do is download a web server: apache and nginx are popular ones, but you can easily program your own with web frameworks like <a href="https://flask.palletsprojects.com/en/2.0.x/">Flask</a> or <a href="https://facil.io/">Facil</a></em></p> -<p>You can run a web server for free right now. These instructions will be for Linux just for consistency since I'm as used to setting this up on a Windows server. If you've never used Linux, don't be scared! It's very easy to setup and manage in Windows now with Windows Subsystem for Linux. If you're on Windows, follow their guide <a href="https://docs.microsoft.com/en-us/windows/wsl/install">here</a>. It should be pretty straightforward, but if you have any issues: 1) Make sure you check your Windows version as noted in the "Prerequisites," 2) Try a different distribution, like Debian with <code>wsl --install -d Debian</code>. Once you're at a command prompt, come back here.</p> -<p>There are many web servers out there, but I like nginx since the configuration file is a bit easier to read than others. So let's install it.</p> +<h2 id="what-is-a-web-server-and-how-do-i-run-one">What is a web server +and how do I run one?</h2> +<p><em>TL;DR a web server is just a program that lets other computers on +a network view files in a chosen folder. All you need to do is download +a web server: apache and nginx are popular ones, but you can easily +program your own with web frameworks like <a +href="https://flask.palletsprojects.com/en/2.0.x/">Flask</a> or <a +href="https://facil.io/">Facil</a></em></p> +<p>You can run a web server for free right now. These instructions will +be for Linux just for consistency since I'm as used to setting this up +on a Windows server. If you've never used Linux, don't be scared! It's +very easy to setup and manage in Windows now with Windows Subsystem for +Linux. If you're on Windows, follow their guide <a +href="https://docs.microsoft.com/en-us/windows/wsl/install">here</a>. It +should be pretty straightforward, but if you have any issues: 1) Make +sure you check your Windows version as noted in the "Prerequisites," 2) +Try a different distribution, like Debian with +<code>wsl --install -d Debian</code>. Once you're at a command prompt, +come back here.</p> +<p>There are many web servers out there, but I like nginx since the +configuration file is a bit easier to read than others. So let's install +it.</p> <pre><code>$ sudo apt install nginx</code></pre> -<p>On Ubuntu or Debian, nginx puts the default server configuration in the folder "/etc/nginx/sites-enabled/default". Open that in a text editor like vim or nano, and you should see something like this (neglecting the commented lines starting with "#"):</p> +<p>On Ubuntu or Debian, nginx puts the default server configuration in +the folder "/etc/nginx/sites-enabled/default". Open that in a text +editor like vim or nano, and you should see something like this +(neglecting the commented lines starting with "#"):</p> <pre><code>server { listen 80 default_server; listen [::]:80 default_server; @@ -81,15 +297,31 @@ try_files $uri $uri/ =404; } }</code></pre> -<p>For now, you don't need to change anything, so don't worry about what it means.</p> -<p>But do note the directory set on "root." This is where the web server looks for files and folders. You can change this, but usually, you don't need too. Any files or folders you put under "/var/www/html" will be included as part of the web server when viewed in a web browser.</p> -<p>So let's put some stuff there! If you're on WSL as mentioned before, you can access your C drive at "/mnt/c". So let's say you had a folder of cat pics in "C:\Users\username\Desktop\cats"; you can copy this into your website by running:</p> +<p>For now, you don't need to change anything, so don't worry about what +it means.</p> +<p>But do note the directory set on "root." This is where the web server +looks for files and folders. You can change this, but usually, you don't +need too. Any files or folders you put under "/var/www/html" will be +included as part of the web server when viewed in a web browser.</p> +<p>So let's put some stuff there! If you're on WSL as mentioned before, +you can access your C drive at "/mnt/c". So let's say you had a folder +of cat pics in "C:\Users\username\Desktop\cats"; you can copy this into +your website by running:</p> <pre><code>$ cp -vr /mnt/c/Users/username/Desktop/cats /var/www/html</code></pre> -<p>Run the server, then go to your web browser and type: "http://localhost". You'll find a directory with your files in it! And you can access them at "http://localhost/foldername/filename.extension". Following our previous example, you can get your cats at "https://localhost/cats".</p> -<h3 id="getting-from-localhost-to-the-internet">Getting from localhost to the internet</h3> -<p>The problem is, only you and others on your home network can visit your site right now.</p> -<p>Your computer's most likely behind your router's firewall, which will not allow any traffic in. You'll need to forward a port from your router (port 80 is for HTTP) to point to the device hosting the server.</p> -<p>Router's differ when it comes to to exact configuration, but MOST routers will have some kind of steps similar to this:</p> +<p>Run the server, then go to your web browser and type: +"http://localhost". You'll find a directory with your files in it! And +you can access them at "http://localhost/foldername/filename.extension". +Following our previous example, you can get your cats at +"https://localhost/cats".</p> +<h3 id="getting-from-localhost-to-the-internet">Getting from localhost +to the internet</h3> +<p>The problem is, only you and others on your home network can visit +your site right now.</p> +<p>Your computer's most likely behind your router's firewall, which will +not allow any traffic in. You'll need to forward a port from your router +(port 80 is for HTTP) to point to the device hosting the server.</p> +<p>Router's differ when it comes to to exact configuration, but MOST +routers will have some kind of steps similar to this:</p> <ol type="1"> <li><p>Click "Advanced" then click "Firewall"</p></li> <li><p>Scroll to the add new rule form</p></li> @@ -100,7 +332,10 @@ <li>forward to address/device: your device's local ip</li> <li>forward to/destination port: 80</li> </ul> -<p>You can get your device's local ip by typing "ipconfig" (Windows) or "ip a" (Linux). Typically it is listed first and will start with "192.168" or "10.0" but it depends on the manufacturer. Here's my output at home for example:</p> +<p>You can get your device's local ip by typing "ipconfig" (Windows) or +"ip a" (Linux). Typically it is listed first and will start with +"192.168" or "10.0" but it depends on the manufacturer. Here's my output +at home for example:</p> <pre><code>1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo @@ -115,74 +350,199 @@ valid_lft forever preferred_lft forever 3: wlp5s0: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN group default qlen 1000 link/ether 82:e2:e4:c2:0c:a1 brd ff:ff:ff:ff:ff:ff permaddr 98:de:d0:f3:d6:ea</code></pre> -<p>The device "enp7s0" is my Ethernet adapter (starts with an 'e') and my current local ip address for the device is shown. If you use wifi, it will likely start with a "wl." Set the forwarding rule according to this value.</p> -<p>Now get your <em>public</em> ip address at this site https://who.is/ and share it with your friends. Watch in horror as they access all the files in the directory you launched the server!</p> -<h2 id="how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How can I make this server available on the Internet <em>cheaply</em> and <em>independently</em></h2> -<p><i> TL;DR Expense scales with independence. It's possible to become your own service provider, get IP addresses from ICANN, your own hardware to host it, to host your cat pics; but it's also a lot of time, work and money to do all that (<a href="https://hackaday.com/2018/09/20/one-mans-journey-to-become-his-own-isp/">this guy</a> did it apparently, and so did <a href="https://en.wikipedia.org/wiki/Kiwi_Farms">Null</a>)</p> -<p>Most likely you'll want to rent someone else's server, usually a VPS. </i></p> -<p>Once you understand the basic installation above, you can now populate your site with content just by adding HTML files to your web directory. You can use an HTML editor to write these, or you can download a full content management system to help you. Here are some options I know about:</p> -<ul> -<li><strong>You can just write the damn HTML and use apache or nginx</strong></li> +<p>The device "enp7s0" is my Ethernet adapter (starts with an 'e') and +my current local ip address for the device is shown. If you use wifi, it +will likely start with a "wl." Set the forwarding rule according to this +value.</p> +<p>Now get your <em>public</em> ip address at this site https://who.is/ +and share it with your friends. Watch in horror as they access all the +files in the directory you launched the server!</p> +<h2 +id="how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently">How +can I make this server available on the Internet <em>cheaply</em> and +<em>independently</em></h2> +<p><i> TL;DR Expense scales with independence. It's possible to become +your own service provider, get IP addresses from ICANN, your own +hardware to host it, to host your cat pics; but it's also a lot of time, +work and money to do all that (<a +href="https://hackaday.com/2018/09/20/one-mans-journey-to-become-his-own-isp/">this +guy</a> did it apparently, and so did <a +href="https://en.wikipedia.org/wiki/Kiwi_Farms">Null</a>)</p> +<p>Most likely you'll want to rent someone else's server, usually a VPS. +</i></p> +<p>Once you understand the basic installation above, you can now +populate your site with content just by adding HTML files to your web +directory. You can use an HTML editor to write these, or you can +download a full content management system to help you. Here are some +options I know about:</p> +<ul> +<li><strong>You can just write the damn HTML and use apache or +nginx</strong></li> </ul> -<p>This honestly is not that hard, it just takes long and takes away from the joy of writing in my opinion. I personally have set up my own little system where I write content in markdown and templates in the Jinja template language to render it automatically. But if your content is short and sweet, or you're mostly hosting files, writing a few basic HTML files in vim or notepad and adding some CSS goes a long way. I wrote my own view of the topic in the context of how I wrote this site <a href="/tutorials/www/quick-intro-to-html-css.html">here</a>. And you can find a number of great guides on how to write files, copy them and manage them in the <a href="#references">references</a>.</p> -<p>One easy way to create HTML templates with these servers is through the use of "Server Side Includes," which essentially let you past one html document into another. This varies by server, for example, nginx has their own options and syntax detailed <a href="https://nginx.org/en/docs/http/ngx_http_ssi_module.html">here</a>.</p> +<p>This honestly is not that hard, it just takes long and takes away +from the joy of writing in my opinion. I personally have set up my own +little system where I write content in markdown and templates in the +Jinja template language to render it automatically. But if your content +is short and sweet, or you're mostly hosting files, writing a few basic +HTML files in vim or notepad and adding some CSS goes a long way. I +wrote my own view of the topic in the context of how I wrote this site +<a href="/tutorials/www/quick-intro-to-html-css.html">here</a>. And you +can find a number of great guides on how to write files, copy them and +manage them in the <a href="#references">references</a>.</p> +<p>One easy way to create HTML templates with these servers is through +the use of "Server Side Includes," which essentially let you past one +html document into another. This varies by server, for example, nginx +has their own options and syntax detailed <a +href="https://nginx.org/en/docs/http/ngx_http_ssi_module.html">here</a>.</p> <ul> <li><a href="https://neocities.org/"><strong>Neocities</strong></a></li> </ul> -<p>Neocities is based on the old Geocities from the mid 90s which allows simple static hosting and features and amazing array of creative projects. Everything is managed through the website, and you can pay to set your own custom <a href="#whats-a-domain-name">domain name</a>.</p> +<p>Neocities is based on the old Geocities from the mid 90s which allows +simple static hosting and features and amazing array of creative +projects. Everything is managed through the website, and you can pay to +set your own custom <a href="#whats-a-domain-name">domain name</a>.</p> <ul> <li><strong>Wordpress</strong> (but this time, you set it up)</li> </ul> -<p>Before wordpress was a social media blogging thingamajig, it was just a content management system to spin up a pretty blog. You can download and install Wordpress by following:</p> +<p>Before wordpress was a social media blogging thingamajig, it was just +a content management system to spin up a pretty blog. You can download +and install Wordpress by following:</p> <p>https://wordpress.org/support/article/how-to-install-wordpress/</p> -<p>The benefit of installing yourself is enormous, since you have full control and can even edit the source if you have the guts.</p> +<p>The benefit of installing yourself is enormous, since you have full +control and can even edit the source if you have the guts.</p> <ul> -<li><a href="https://guides.github.com/features/pages/"><strong>Github pages</strong></a></li> +<li><a href="https://guides.github.com/features/pages/"><strong>Github +pages</strong></a></li> </ul> -<p>In addition to hosting code repositories, you can host small sites on github for mostly free. I've never used it, but I definitely would if I needed something like a small wiki.</p> -<p>But once you have stuff to share, how do you keep this stuff online?</p> -<h3 id="can-i-run-a-web-server-at-home">Can I run a web server at home</h3> -<p>Technically yes, but practically probably not. At least not at a lot of extra cost to you. If you do want to host a small thing at home, like some text or some cat pics, a <a href="/tutorials/tor/how-to-host-a-tor-hidden-service.html">tor hidden service</a> is a great option.</p> -<p>I spent a lot of time searching on this (you can find a full list of references at the bottom), and I've even tested a little bit by hosting game servers and web projects for code jams, but the problem is twofold. First, if you are in the United States and not a business, you probably have a standard plan with one of the major ISPs (Verizon, Optimum, etc.). This limits you in a few ways.</p> -<ul> -<li><p>Your bandwidth is limited, which limits the amount of people you can serve at one time <em>and</em> the rate you can transfer data to them. Think laggy games and videos that take 10 years to download.</p></li> -<li><p>Your ISP probably explicitly does not allow this (at least in the US). I have <em>never</em> had my ISP complain about hosting small personal servers at home, but I imagine if I hosted higher traffic things, I would have some problems.</p></li> +<p>In addition to hosting code repositories, you can host small sites on +github for mostly free. I've never used it, but I definitely would if I +needed something like a small wiki.</p> +<p>But once you have stuff to share, how do you keep this stuff +online?</p> +<h3 id="can-i-run-a-web-server-at-home">Can I run a web server at +home</h3> +<p>Technically yes, but practically probably not. At least not at a lot +of extra cost to you. If you do want to host a small thing at home, like +some text or some cat pics, a <a +href="/tutorials/tor/how-to-host-a-tor-hidden-service.html">tor hidden +service</a> is a great option.</p> +<p>I spent a lot of time searching on this (you can find a full list of +references at the bottom), and I've even tested a little bit by hosting +game servers and web projects for code jams, but the problem is twofold. +First, if you are in the United States and not a business, you probably +have a standard plan with one of the major ISPs (Verizon, Optimum, +etc.). This limits you in a few ways.</p> +<ul> +<li><p>Your bandwidth is limited, which limits the amount of people you +can serve at one time <em>and</em> the rate you can transfer data to +them. Think laggy games and videos that take 10 years to +download.</p></li> +<li><p>Your ISP probably explicitly does not allow this (at least in the +US). I have <em>never</em> had my ISP complain about hosting small +personal servers at home, but I imagine if I hosted higher traffic +things, I would have some problems.</p></li> </ul> <h3 id="so-what-should-i-do">So what should I do</h3> -<p>As mentioned above, it kind of depends on what your hosting. A small game server can be run just fine from home. A website with an email server and other bells and whistles is another thing.</p> -<p>In those cases most people will find it cheapest to rent from a VPS provider. VPS stands for "Virtual Private Server," which just means an Internet-connected server stored somewhere in someone's private data center. You pay them for the storage and to keep your server online and accessible.</p> -<p>Once you've got enough content and a way to manage it, all you have to do is just copy all that stuff over to your VPS. Usually that looks like:</p> +<p>As mentioned above, it kind of depends on what your hosting. A small +game server can be run just fine from home. A website with an email +server and other bells and whistles is another thing.</p> +<p>In those cases most people will find it cheapest to rent from a VPS +provider. VPS stands for "Virtual Private Server," which just means an +Internet-connected server stored somewhere in someone's private data +center. You pay them for the storage and to keep your server online and +accessible.</p> +<p>Once you've got enough content and a way to manage it, all you have +to do is just copy all that stuff over to your VPS. Usually that looks +like:</p> <ul> <li>Installing a web server and a CMS tweaked to your liking</li> <li>Copying over your stuff to the web directory</li> <li>Opening up your ports to the outside world.</li> </ul> -<p>And in a nutshell that's it. There's fancy stuff of course, like you'll want a <a href="#whats-a-domain-name">domain name</a> probably and I'll talk about that too, but at this point, your stuff is on the Internet! Just tell your friends to paste in your public ip address (your VPS provider will tell you this) and there's your stuff!</p> +<p>And in a nutshell that's it. There's fancy stuff of course, like +you'll want a <a href="#whats-a-domain-name">domain name</a> probably +and I'll talk about that too, but at this point, your stuff is on the +Internet! Just tell your friends to paste in your public ip address +(your VPS provider will tell you this) and there's your stuff!</p> <h2 id="whats-a-domain-name">What's a "Domain Name"</h2> -<p>Expecting people to save your IP address is not really a good idea though. It's better to have an easy name they can remember. Enter DNS: the Domain Name System. If an IP address is a telephone number, DNS is the telephone book. ICANN and IANA host the top level servers, which point to local domain registries who buy names like "mjfer.net" on behalf of their customers.</p> -<p>The actual business of domain names is complicated and not something I understand all that well. But setting up a domain name to point to an IP address is typically easy, once you've chosen a domain registrar (just search that online and you'll find a ton) and name you like. Be aware that shorter names are rarer and usually more expensive and different TLDs--that is, the ending parts like ".net" and ".io,"--will be priced differently.</p> -<p>Once you have a domain name, you'll need to set up a DNS record. Again, this varies a bit based on the provider, but all will have some kind of text input or API where you can edit DNS records. You'll want to make two records</p> +<p>Expecting people to save your IP address is not really a good idea +though. It's better to have an easy name they can remember. Enter DNS: +the Domain Name System. If an IP address is a telephone number, DNS is +the telephone book. ICANN and IANA host the top level servers, which +point to local domain registries who buy names like "mjfer.net" on +behalf of their customers.</p> +<p>The actual business of domain names is complicated and not something +I understand all that well. But setting up a domain name to point to an +IP address is typically easy, once you've chosen a domain registrar +(just search that online and you'll find a ton) and name you like. Be +aware that shorter names are rarer and usually more expensive and +different TLDs--that is, the ending parts like ".net" and ".io,"--will +be priced differently.</p> +<p>Once you have a domain name, you'll need to set up a DNS record. +Again, this varies a bit based on the provider, but all will have some +kind of text input or API where you can edit DNS records. You'll want to +make two records</p> <ul> <li><p>A Type A that will be your main record</p> <ul> <li><p>set the HOST to your domain name (like mjfer.net)</p></li> <li><p>set the ANSWER to your IP address (like 8.9.36.54)</p></li> </ul></li> -<li><p>A CNAME record, that will help point to all your other records</p> +<li><p>A CNAME record, that will help point to all your other +records</p> <ul> -<li><p>set the HOST to your domain name, with a wildcard subdomain (like *.mjfer.net)</p></li> +<li><p>set the HOST to your domain name, with a wildcard subdomain (like +*.mjfer.net)</p></li> <li><p>set the ANSWER to your main record (like mjfer.net)</p></li> </ul></li> </ul> -<p>The reason for the second record is in case you want to set subdomains on the same IP address like "git.mjfer.net".</p> -<p>Wait a few minutes for the DNS servers to update and you should now be able access your server by name.</p> -<h2 id="setup-https-and-tls-for-some-sense-of-security">Setup HTTPS and TLS, for some sense of security</h2> -<p>A decade of half-though through security advice has convinced everyone that HTTPS and <em>only</em> HTTPS is secure. This is simply not true. Using HTTP alone doesn't inherently make you insecure and using HTTPS doesn't automatically guarantee the app your communicating with is secure.</p> -<p>What HTTPS means is that the <em>data you send to the server</em> and the <em>data the server sends back</em> is encrypted. This only provides security in contexts where you're entering information like a credit card number or a password; or in the reverse case when the server is authenticating you. In those cases <em>you need HTTPS</em>. But if you're just requesting a text document, or a cat picture, and not sending any data, HTTP is perfectly acceptable for retrieving that information. HTTPS is also no guarantee that the information your retrieving is actually what you want. There's plenty of malware and other nasty things over HTTPS, just because it's sent encrypted doesn't make it safe.</p> -<p>Web browsers have largely responded to this fact by assuming that HTTP is always insecure and printing a warning when you visit a site without HTTPS enabled. Unfortunately, most users interpret this to mean the site is somehow dangerous, even if it doesn't collect any information about the user. Because of that, most you will want to go the extra mile to make your visitors feel warm and fuzzy inside and implement HTTPS.</p> -<p>Fortunately, this is now much easier than is used to be thanks to <a href="https://letsencrypt.org/">LetsEncrypt</a>. LetsEncrypt generously serves as a free certificate authority, which allows you to generate signed certificates that are recognized by every web browser in the world. The tool they recommend, <a href="https://certbot.eff.org/">certbot</a> is painless to install. I've rarely had to do much more than "certbot certonly" and follow the prompts to get a certificate. Once you've obtained one, add it to <a href="https://httpd.apache.org/docs/2.4/ssl/ssl_howto.html">apache</a> or <a href="https://www.nginx.com/blog/nginx-ssl/#Examples">nginx</a>, switch the port to 443 instead of 80 and bam, you've got HTTPS!</p> +<p>The reason for the second record is in case you want to set +subdomains on the same IP address like "git.mjfer.net".</p> +<p>Wait a few minutes for the DNS servers to update and you should now +be able access your server by name.</p> +<h2 id="setup-https-and-tls-for-some-sense-of-security">Setup HTTPS and +TLS, for some sense of security</h2> +<p>A decade of half-though through security advice has convinced +everyone that HTTPS and <em>only</em> HTTPS is secure. This is simply +not true. Using HTTP alone doesn't inherently make you insecure and +using HTTPS doesn't automatically guarantee the app your communicating +with is secure.</p> +<p>What HTTPS means is that the <em>data you send to the server</em> and +the <em>data the server sends back</em> is encrypted. This only provides +security in contexts where you're entering information like a credit +card number or a password; or in the reverse case when the server is +authenticating you. In those cases <em>you need HTTPS</em>. But if +you're just requesting a text document, or a cat picture, and not +sending any data, HTTP is perfectly acceptable for retrieving that +information. HTTPS is also no guarantee that the information your +retrieving is actually what you want. There's plenty of malware and +other nasty things over HTTPS, just because it's sent encrypted doesn't +make it safe.</p> +<p>Web browsers have largely responded to this fact by assuming that +HTTP is always insecure and printing a warning when you visit a site +without HTTPS enabled. Unfortunately, most users interpret this to mean +the site is somehow dangerous, even if it doesn't collect any +information about the user. Because of that, most you will want to go +the extra mile to make your visitors feel warm and fuzzy inside and +implement HTTPS.</p> +<p>Fortunately, this is now much easier than is used to be thanks to <a +href="https://letsencrypt.org/">LetsEncrypt</a>. LetsEncrypt generously +serves as a free certificate authority, which allows you to generate +signed certificates that are recognized by every web browser in the +world. The tool they recommend, <a +href="https://certbot.eff.org/">certbot</a> is painless to install. I've +rarely had to do much more than "certbot certonly" and follow the +prompts to get a certificate. Once you've obtained one, add it to <a +href="https://httpd.apache.org/docs/2.4/ssl/ssl_howto.html">apache</a> +or <a href="https://www.nginx.com/blog/nginx-ssl/#Examples">nginx</a>, +switch the port to 443 instead of 80 and bam, you've got HTTPS!</p> <h2 id="perspective">Perspective</h2> -<p>What I tried to present here was the brief overview of how you get from files on your computer to files accessible of the Internet. The full picture though is something you need to seek out yourself. I intend to add more guides on how I manage this site, but there is so much material out there already it hardly feels worth adding to. I hope at the very least to have got you through the start.</p> +<p>What I tried to present here was the brief overview of how you get +from files on your computer to files accessible of the Internet. The +full picture though is something you need to seek out yourself. I intend +to add more guides on how I manage this site, but there is so much +material out there already it hardly feels worth adding to. I hope at +the very least to have got you through the start.</p> <h2 id="references">References</h2> <ol type="1"> <li>https://dataswamp.org/~solene/2021-07-23-why-selfhosting-is-important.html</li> @@ -192,8 +552,12 @@ <li>https://en.wikipedia.org/wiki/ICANN</li> <li>https://landchad.net/</li> </ol> -<h3 id="terms-of-service-for-certain-isps">Terms of service for certain ISPs</h3> -<p>There's always more ISPs out there, but I went the one's I'm most familiar with in my area. I'll probably expand this as I go, let me know if there are important ones in your area worth listing here for others.</p> +<h3 id="terms-of-service-for-certain-isps">Terms of service for certain +ISPs</h3> +<p>There's always more ISPs out there, but I went the one's I'm most +familiar with in my area. I'll probably expand this as I go, let me know +if there are important ones in your area worth listing here for +others.</p> <h4 id="verizon">Verizon</h4> <ul> <li>https://www.verizon.com/support/lte-home-internet-legal/ diff --git a/tutorials/www/how-to-use-the-internet.html b/tutorials/www/how-to-use-the-internet.html new file mode 100644 index 0000000..9f0e227 --- /dev/null +++ b/tutorials/www/how-to-use-the-internet.html @@ -0,0 +1,249 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<head> + <meta charset="utf-8" /> + <meta name="generator" content="pandoc" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <title>how-to-use-the-internet</title> + <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } + code{white-space: pre-wrap;} + span.smallcaps{font-variant: small-caps;} + span.underline{text-decoration: underline;} + div.column{display: inline-block; vertical-align: top; width: 50%;} + div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} + ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} + </style> +</head> +<body> +<nav id="TOC" role="doc-toc"> +<h2 id="toc-title">Contents</h2> +<ul> +<li><a href="#why">Why?</a></li> +<li><a href="#how-to-use-a-web-browser">How to use a web +browser</a></li> +<li><a href="#how-to-use-a-search-engine">How to use a search +engine</a></li> +<li><a href="#how-to-read-and-find-scholarly-articles">How to read and +find scholarly articles</a> +<ul> +<li><a href="#how-to-use-wikipedia">How to use Wikipedia</a></li> +<li><a href="#how-to-find-articles-with-google-scholar">How to find +articles with Google Scholar</a></li> +</ul></li> +<li><a href="#advanced-topics">Advanced Topics</a> +<ul> +<li><a href="#how-to-use-tor-to-browse-anonymously">How to use tor to +browse anonymously</a></li> +</ul></li> +</ul> +</nav> +<h2 id="why">Why?</h2> +<p>Changing times and a forgetful youth have forced me to write this +guide.</p> +<p>I am increasingly disturbed by the amount of people I meet (young and +old) that navigate their lives at least in part online, but are unable +to use the internet for it's intended purpose: finding infomation. +Writing to someone or posting a picture of your cat seems to be second +nature for most people, but converting a picture from a PDF or looking +up a study (or even a word!) you saw in an article is something else +entirely.</p> +<p>For the most part, it is not anyone's fault or laziness. It's the +fault of what the internet <em>has become</em>. For one, there's just so +much more <em>stuff</em> now; it's hard to know exactly where to start +and who to trust. And so much of that stuff is now <em>garbage</em>, +either in the way it's presented--with disruptive ads that don't close +correctly--or in the way it's written--vague, misleading, or straight +incorrect. But for seconds: no one really teaches you how to use this +thing do they? There are no courses on "How to use a search engine" or +"How to find good posts on a forum," yet these are the kinds of skills +you really need if you want to navigate the modern world without getting +constantly distracted, misled, or totally lost.</p> +<p>There are of course, countless guides on "netiquette" geared towards +every possible internet subculture you can find. While many of them have +influenced this document and give many helpful tips on writing good +informative posts, none of them really go over what I think is most +important: what to do with the information you're reading.</p> +<p>This will probably be an evolving document as new services and +websites become available (or go down), but much of this material in the +beginning should be pretty generally applicable no matter what services +are available.</p> +<h2 id="how-to-use-a-web-browser">How to use a web browser</h2> +<h2 id="how-to-use-a-search-engine">How to use a search engine</h2> +<p>As for which search engine to use: you should use all of them, until +you get the results you need. In my experience, none of the major search +engines are particularly good and I get inconsistent searches on all of +them depending on what I'm searching. There is much preaching these days +about privacy concerns, but to be honest I don't believe any service is +more "private" than another. These are all privacy nightmares, your best +bet is to just search often and as varied as you can.</p> +<h2 id="how-to-read-and-find-scholarly-articles">How to read and find +scholarly articles</h2> +<h3 id="how-to-use-wikipedia">How to use Wikipedia</h3> +<p>A common complaint lodged at me whenever I recommend Wikipedia is +that it's not a source of truth since they found X mistake somewhere, or +made Y edit when they were a teenager that's still there. No one has +ever (or should ever) claim Wikipedia is reliable. Frankly, you should +not consider <em>any</em> source to be reliable, but that's a separate +issue. If you know how to use Wikipedia you can use it to get closer to +a true understanding of whatever you're studying.</p> +<p>For starters, as a general rule, you should not trust anything you +read on a topic that is less than 20 years old. We're still living +through the history at this point and new things can come to light.</p> +<h3 id="how-to-find-articles-with-google-scholar">How to find articles +with Google Scholar</h3> +<h2 id="advanced-topics">Advanced Topics</h2> +<h3 id="how-to-use-tor-to-browse-anonymously">How to use tor to browse +anonymously</h3> +<p>Many in the advertising world will boast about using a VPN for +anonymity, or using a VPN in conjuction with Tor to "increase privacy." +This is simply a misunderstanding of terms. A VPN provides +<em>privacy</em> of the user's connection since it provides +encryption--only the VPN provider can "see" what is searched. The goal +of Tor is <em>anonymity</em> not privacy. Anonymity means "no one knows +who you are" not "no one knows what you're doing." Technically, traffic +is encrypted between nodes of the Tor service, so some level of privacy +is provided as well, but this is most effective when using hidden +services, not using Tor in general.</p> +</body> +</html> diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html index 53073d3..7d74dff 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -6,12 +6,153 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <title>quick-intro-html-css</title> <style> + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: #1a1a1a; + background-color: #fdfdfd; + } + body { + margin: 0 auto; + max-width: 36em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + h1 { + font-size: 1.8em; + } + } + @media print { + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } + } + p { + margin: 1em 0; + } + a { + color: #1a1a1a; + } + a:visited { + color: #1a1a1a; + } + img { + max-width: 100%; + } + h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; + } + h5, h6 { + font-size: 1em; + font-style: italic; + } + h6 { + font-weight: normal; + } + ol, ul { + padding-left: 1.7em; + margin-top: 1em; + } + li > ol, li > ul { + margin-top: 0; + } + blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; + } + code { + font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; + font-size: 85%; + margin: 0; + } + pre { + margin: 1em 0; + overflow: auto; + } + pre code { + padding: 0; + overflow: visible; + overflow-wrap: normal; + } + .sourceCode { + background-color: transparent; + overflow: visible; + } + hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; + } + table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; + } + table caption { + margin-bottom: 0.75em; + } + tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; + } + th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; + } + td { + padding: 0.125em 0.5em 0.25em 0.5em; + } + header { + margin-bottom: 4em; + text-align: center; + } + #TOC li { + list-style: none; + } + #TOC ul { + padding-left: 1.3em; + } + #TOC > ul { + padding-left: 0; + } + #TOC a:not(:hover) { + text-decoration: none; + } code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} span.underline{text-decoration: underline;} div.column{display: inline-block; vertical-align: top; width: 50%;} div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} + .display.math{display: block; text-align: center; margin: 0.5rem auto;} </style> </head> <body> @@ -26,18 +167,21 @@ <li><a href="#tables-and-links">Tables and Links</a></li> <li><a href="#and-everything-else...">And Everything Else...</a> <ul> -<li><a href="#shortlist-of-text-and-formatting-tags">Shortlist of Text and Formatting Tags</a></li> +<li><a href="#shortlist-of-text-and-formatting-tags">Shortlist of Text +and Formatting Tags</a></li> </ul></li> <li><a href="#html-metadata">HTML Metadata</a></li> </ul></li> <li><a href="#css">CSS</a> <ul> -<li><a href="#add-style-without-css">Add style <em>without</em> CSS</a></li> +<li><a href="#add-style-without-css">Add style <em>without</em> +CSS</a></li> <li><a href="#basic-formatting">Basic Formatting</a></li> <li><a href="#image-formatting">Image Formatting</a></li> <li><a href="#making-custom-classes">Making Custom Classes</a> <ul> -<li><a href="#use-the-div-tag-to-make-sections">Use the div tag to make sections</a></li> +<li><a href="#use-the-div-tag-to-make-sections">Use the div tag to make +sections</a></li> </ul></li> <li><a href="#mobile-optimization">Mobile Optimization</a></li> </ul></li> @@ -50,30 +194,70 @@ </ul></li> </ul> </nav> -<p><em>Note: you should run the examples to see how they work. You can either write the files yourself and open them in a web browser, or use an online HTML editor like</em> <a href="https://html-css-js.com/"><em>this one</em></a></p> -<p>As you can see from the current state of this site, I'm not exactly exactly the most skilled web designer. But I struggled through the basics enough to get an idiot's sense of front-end web design, so that perspective might be useful if you have no clue where to start with this like I did.</p> -<p>The building blocks are very simple, <em>but there's a lot of blocks</em>. The <a href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5 specification</a>, which most browsers are built around, defines the semantics of elements that can should be rendered by a web browser. CSS similarly defines the <em>attributes</em>--or styles--that can be applied to those elements in a format specified <a href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into the weeds like professional designers do--and to be honest, I don't really want to. But I <em>do</em> like understanding how things work. And getting a unique custom HTML site is something anyone with a text editor and a web browser can get done in a weekend.</p> +<p><em>Note: you should run the examples to see how they work. You can +either write the files yourself and open them in a web browser, or use +an online HTML editor like</em> <a +href="https://html-css-js.com/"><em>this one</em></a></p> +<p>As you can see from the current state of this site, I'm not exactly +exactly the most skilled web designer. But I struggled through the +basics enough to get an idiot's sense of front-end web design, so that +perspective might be useful if you have no clue where to start with this +like I did.</p> +<p>The building blocks are very simple, <em>but there's a lot of +blocks</em>. The <a +href="https://dev.w3.org/html5/spec-LC/semantics.html#semantics">HTML5 +specification</a>, which most browsers are built around, defines the +semantics of elements that can should be rendered by a web browser. CSS +similarly defines the <em>attributes</em>--or styles--that can be +applied to those elements in a format specified <a +href="https://www.w3.org/TR/CSS1/">here</a>. I've never gotten deep into +the weeds like professional designers do--and to be honest, I don't +really want to. But I <em>do</em> like understanding how things work. +And getting a unique custom HTML site is something anyone with a text +editor and a web browser can get done in a weekend.</p> <h1 id="web-browsers-render-code">Web browsers render code</h1> -<p>The specifications linked above are followed religiously by major web browsers like Chromium, Firefox, and Safari so that each symbol defined in the standard defines font, graphics, animations, layouts and all kinds of neat stuff you can stick in an HTML document. But what is that exactly?</p> +<p>The specifications linked above are followed religiously by major web +browsers like Chromium, Firefox, and Safari so that each symbol defined +in the standard defines font, graphics, animations, layouts and all +kinds of neat stuff you can stick in an HTML document. But what is that +exactly?</p> <h2 id="html">HTML</h2> -<p>An HTML file is just a text file that follows the format of HTML. HTML stands for "Hyper Text Markup Language" and is very much like standard programming languages in that it maps symbols to things you actually see in your browser. It is not a true programming language since you can't run it or compile it on it's own like a typical computer program. You need another program, a web browser, to make sense of it.</p> +<p>An HTML file is just a text file that follows the format of HTML. +HTML stands for "Hyper Text Markup Language" and is very much like +standard programming languages in that it maps symbols to things you +actually see in your browser. It is not a true programming language +since you can't run it or compile it on it's own like a typical computer +program. You need another program, a web browser, to make sense of +it.</p> <h3 id="basic-format">Basic Format</h3> -<p>All HTML files start with the following (note: the spacing does not matter, it's just spaced for readability):</p> +<p>All HTML files start with the following (note: the spacing does not +matter, it's just spaced for readability):</p> <pre><code><html> <body> <!-- stuff you see goes here --> </body> </html></code></pre> -<p>You'll notice two <em>tags</em> here. An "html" tag, and a "body" tag, both of which are closed with "</html>" and "</body>" to signify where the sections end. The HTML document proper is anything between the HTML tags. The body of the document contains the actual content that the user sees. For example:</p> +<p>You'll notice two <em>tags</em> here. An "html" tag, and a "body" +tag, both of which are closed with "</html>" and "</body>" +to signify where the sections end. The HTML document proper is anything +between the HTML tags. The body of the document contains the actual +content that the user sees. For example:</p> <pre><code><html> <body> <h1>My Great page</h1> <p>My great paragraph</p> </body> </html></code></pre> -<p>We've introduced two more tags here, both of which are closed within the body section. The "h1" tag defines a "Heading" which tells the browser to render the text big and bold, like a document title. You can define subheadings just by using a different number like "h2" instead of "h1." The second tag "p" defines a paragraph, which by default, renders the text normally. Check out how it looks so far by saving the above text in a file called "page.html" and open it in your browser.</p> +<p>We've introduced two more tags here, both of which are closed within +the body section. The "h1" tag defines a "Heading" which tells the +browser to render the text big and bold, like a document title. You can +define subheadings just by using a different number like "h2" instead of +"h1." The second tag "p" defines a paragraph, which by default, renders +the text normally. Check out how it looks so far by saving the above +text in a file called "page.html" and open it in your browser.</p> <h3 id="tables-and-links">Tables and Links</h3> -<p>We can do a lot more than text of course. Let's walk through some more tags in this example:</p> +<p>We can do a lot more than text of course. Let's walk through some +more tags in this example:</p> <pre><code><html> <body> <h1>My Great page</h1> @@ -101,30 +285,76 @@ </center> </body> </html></code></pre> -<p>We added a few things here, but it's the same pattern right? <open></close>.</p> -<p>We started by adding a "center" tag, which does what you think: it aligns the content to the center of whatever screen it's being viewed on. This is applied to the table and all the text within the table.</p> -<p>The next is the "table" tag which, you guessed it, arranges elements in rows and columns like a data table. The "table" tag always comes with two sub tags for the row and column: "tr" and "td." You always write the row first and put each "data" column inside (I'm guessing the "d" in "td" stands for data; I'm actually not sure). By default, "td" works a lot like "p" does--it'll just spit out whatever text you put in.</p> -<p>To spice things up though, I introduced a new element instead; probably the most important feature of HTML. The "a" tag lets you link to other documents on your site, or <em>to any other URL in the world</em>. On it's own, the "a" tag doesn't do anything special. We need to use the tag with an <em>attribute</em>--an extra word that comes after a--in order to make it work for us. A more basic example might be this:</p> +<p>We added a few things here, but it's the same pattern right? +<open></close>.</p> +<p>We started by adding a "center" tag, which does what you think: it +aligns the content to the center of whatever screen it's being viewed +on. This is applied to the table and all the text within the table.</p> +<p>The next is the "table" tag which, you guessed it, arranges elements +in rows and columns like a data table. The "table" tag always comes with +two sub tags for the row and column: "tr" and "td." You always write the +row first and put each "data" column inside (I'm guessing the "d" in +"td" stands for data; I'm actually not sure). By default, "td" works a +lot like "p" does--it'll just spit out whatever text you put in.</p> +<p>To spice things up though, I introduced a new element instead; +probably the most important feature of HTML. The "a" tag lets you link +to other documents on your site, or <em>to any other URL in the +world</em>. On it's own, the "a" tag doesn't do anything special. We +need to use the tag with an <em>attribute</em>--an extra word that comes +after a--in order to make it work for us. A more basic example might be +this:</p> <pre><code><a href="https://example.com">Example</a></code></pre> <p>Which you'll see as:</p> <p><a href="https://example.com">Example</a></p> -<p>The "href" attribute doesn't <em>have</em> to point to some other website; it can point to anything. For example, you might want to link to picture your cat (maybe hosted at "/var/www/cat.jpg"). You would do it like this:</p> +<p>The "href" attribute doesn't <em>have</em> to point to some other +website; it can point to anything. For example, you might want to link +to picture your cat (maybe hosted at "/var/www/cat.jpg"). You would do +it like this:</p> <pre><code><a href="/cat.jpg">example</a></code></pre> <p>You can also link an email like this</p> <pre><code><a href="mailto:email@example.com">example email</a> </code></pre> -<p>Let's say you had a barebones site with 5 HTML files named: index.html, about.html, faq.html, cats.html, vidya.html. You can make a neat little navbar just using "a" tags like this:</p> +<p>Let's say you had a barebones site with 5 HTML files named: +index.html, about.html, faq.html, cats.html, vidya.html. You can make a +neat little navbar just using "a" tags like this:</p> <pre><code><a href="/index.html">home</a> - <a href="/about.html">about</a> - <a href="/faq.html">faq</a> - <a href="/cats.html">cats</a> - <a href="/vidya.html">vidya</a></code></pre> <h3 id="and-everything-else...">And Everything Else...</h3> -<p>There are many other tags out there, many of which I don't know, and one which I mentioned before, but didn't explain yet: the "img" tag. In the earlier example with "cat.jpg" we linked <em>to</em> the image, but if we want to render it, we need to use "img" with it's main attribute "src." The "src" attribute works like "href" does as it points to the path where the image is. Note the "img" tag is also a bit different since it doesn't have a closing tag. This is intentional. Other tags were enclosing sections of text and content. This is simply <em>inserting</em> an element right into the document.</p> -<p>What you can do with the "img" tag, and what you can do with HTML tags in general, is limited only by the browser that's reading the HTML. The Mozilla Firefox "img" tag has a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">long page</a> on all the different attributes and effects you can apply to images.</p> -<p>There are many places you can get all the common elements laid out for you, and it's important to bookmark those and refer to them frequently when you're thinking about designing your webpage. A common referral from search engines is <a href="https://www.w3schools.com/">https://www.w3schools.com/</a>, which is a great resource. I personally like to look at the HTML elements reference of a common web browser like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Firefox's</a> so I know exactly which elements work.</p> -<p>If you're like me, a referral to a long reference manual can sometimes seem kind of daunting. So if you're feeling that way, here's a quick table of the HTML elements I tend to use a lot and how I use them for formatting text. I won't go into <em>interactive</em> elements like buttons and text input since that will involve another programming language like PHP, Javascript, or Python.</p> -<h4 id="shortlist-of-text-and-formatting-tags">Shortlist of Text and Formatting Tags</h4> +<p>There are many other tags out there, many of which I don't know, and +one which I mentioned before, but didn't explain yet: the "img" tag. In +the earlier example with "cat.jpg" we linked <em>to</em> the image, but +if we want to render it, we need to use "img" with it's main attribute +"src." The "src" attribute works like "href" does as it points to the +path where the image is. Note the "img" tag is also a bit different +since it doesn't have a closing tag. This is intentional. Other tags +were enclosing sections of text and content. This is simply +<em>inserting</em> an element right into the document.</p> +<p>What you can do with the "img" tag, and what you can do with HTML +tags in general, is limited only by the browser that's reading the HTML. +The Mozilla Firefox "img" tag has a <a +href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">long +page</a> on all the different attributes and effects you can apply to +images.</p> +<p>There are many places you can get all the common elements laid out +for you, and it's important to bookmark those and refer to them +frequently when you're thinking about designing your webpage. A common +referral from search engines is <a +href="https://www.w3schools.com/">https://www.w3schools.com/</a>, which +is a great resource. I personally like to look at the HTML elements +reference of a common web browser like <a +href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Firefox's</a> +so I know exactly which elements work.</p> +<p>If you're like me, a referral to a long reference manual can +sometimes seem kind of daunting. So if you're feeling that way, here's a +quick table of the HTML elements I tend to use a lot and how I use them +for formatting text. I won't go into <em>interactive</em> elements like +buttons and text input since that will involve another programming +language like PHP, Javascript, or Python.</p> +<h4 id="shortlist-of-text-and-formatting-tags">Shortlist of Text and +Formatting Tags</h4> <center> <table border="1px" cellpadding="0" cellspacing="0"> <tr> @@ -199,14 +429,22 @@ The items in those lists <iframe> </td> <td> -Embeds another html file in the current one. Here's your IP from ipaddress.sh:<br> <iframe src="https://ipaddress.sh/"></iframe> +Embeds another html file in the current one. Here's your IP from +ipaddress.sh:<br> <iframe src="https://ipaddress.sh/"></iframe> </td> </tr> </table> </center> <h3 id="html-metadata">HTML Metadata</h3> -<p>Everything we discussed so far was only about <em>one section</em> of the HTML document: the "body." We haven't touched the "head" at all. If we can put all our content in the body, what do we even need it for?</p> -<p>Even though (most) of the things in the head aren't rendered by the browser, it still provides useful information to the browser and to search engines indexing the site that can improve the user experience. The most common thing you'll see in the head section is the site's title, and something called "meta" tags. As usual, it's best to see an example:</p> +<p>Everything we discussed so far was only about <em>one section</em> of +the HTML document: the "body." We haven't touched the "head" at all. If +we can put all our content in the body, what do we even need it for?</p> +<p>Even though (most) of the things in the head aren't rendered by the +browser, it still provides useful information to the browser and to +search engines indexing the site that can improve the user experience. +The most common thing you'll see in the head section is the site's +title, and something called "meta" tags. As usual, it's best to see an +example:</p> <pre><code><html> <head> <title>My Great page</title> @@ -222,21 +460,51 @@ Embeds another html file in the current one. Here's your IP from ipaddress.sh:<b <p>My great paragraph</p> </body> </html></code></pre> -<p>Note that the "meta" tag works like the "img" tag did and has no closing tag.</p> -<p>The first tag in the head is the "title" tag. This is the title of document as it will appear when the page is opened in a browser tab. It is also the title that will show up in search engines. Otherwise, it has no effect on the content rendered.</p> -<p>Likewise, the proceeding "meta" tags also send info to the browser and to search engines for convenience. Most sites will have tags with the attributes "name" and "content" as set above. The first one we see sets the content type of the document. This is a bit redundant, but making it as well as the character set explicit is useful for older web browsers that need it.</p> -<p>Next up are some tags as a courtesy to search engines. The one named "description" is the short description you're familiar with from search engine results. The "keywords" are a comma separated list of word you want associated with the content of your site--this is again another hint to search engines when they add your site to their database. "Author" serves a similar purpose.</p> -<p>That last meta tag looks a bit funky, but it's purpose is to assist in scaling your website on all devices. For a standard browser on a desktop, it just sets the zoom of the text 100% (be default). On mobile, it will adjust accordingly.</p> -<p>As is the trend, "meta" is just a building block on which you can build a lot of functionality. Be sure to check the references at the end for a full treatment of the topic.</p> +<p>Note that the "meta" tag works like the "img" tag did and has no +closing tag.</p> +<p>The first tag in the head is the "title" tag. This is the title of +document as it will appear when the page is opened in a browser tab. It +is also the title that will show up in search engines. Otherwise, it has +no effect on the content rendered.</p> +<p>Likewise, the proceeding "meta" tags also send info to the browser +and to search engines for convenience. Most sites will have tags with +the attributes "name" and "content" as set above. The first one we see +sets the content type of the document. This is a bit redundant, but +making it as well as the character set explicit is useful for older web +browsers that need it.</p> +<p>Next up are some tags as a courtesy to search engines. The one named +"description" is the short description you're familiar with from search +engine results. The "keywords" are a comma separated list of word you +want associated with the content of your site--this is again another +hint to search engines when they add your site to their database. +"Author" serves a similar purpose.</p> +<p>That last meta tag looks a bit funky, but it's purpose is to assist +in scaling your website on all devices. For a standard browser on a +desktop, it just sets the zoom of the text 100% (be default). On mobile, +it will adjust accordingly.</p> +<p>As is the trend, "meta" is just a building block on which you can +build a lot of functionality. Be sure to check the references at the end +for a full treatment of the topic.</p> <h2 id="css">CSS</h2> -<p>In our last example, I left one tag left untreated, because it segways into yet another format of file closely linked to HTML: Cascading Style Sheets (CSS).</p> -<p>The "link" tag in the metadata sections can link any external resource. It's commonly used to make a "favicon" for example, which is the icon you see in the tab of an open page.</p> +<p>In our last example, I left one tag left untreated, because it +segways into yet another format of file closely linked to HTML: +Cascading Style Sheets (CSS).</p> +<p>The "link" tag in the metadata sections can link any external +resource. It's commonly used to make a "favicon" for example, which is +the icon you see in the tab of an open page.</p> <pre><code><link rel="icon" href="/favicon.ico"></code></pre> -<p>In the last example, we instead make a reference to a CSS formatted style sheet. Like HTML, CSS is just a text file written in a specific syntax. CSS allows you to set attributes to <em>all</em> tags in a specific document and create a unifying style for all your pages.</p> +<p>In the last example, we instead make a reference to a CSS formatted +style sheet. Like HTML, CSS is just a text file written in a specific +syntax. CSS allows you to set attributes to <em>all</em> tags in a +specific document and create a unifying style for all your pages.</p> <pre><code><link rel="stylesheet" type="text/css" href="/static/main.css"></code></pre> -<p>As before, "href" points to the file to be linked. In this example, we place our CSS in a text file called "main.css" in the "static" directory of "/var/www/html".</p> +<p>As before, "href" points to the file to be linked. In this example, +we place our CSS in a text file called "main.css" in the "static" +directory of "/var/www/html".</p> <h3 id="add-style-without-css">Add style <em>without</em> CSS</h3> -<p>Before we make CSS files, I want to stress the point that all this stuff is defined in HTML. You can set these attributes directly in any tag we talked about in the last section. For example:</p> +<p>Before we make CSS files, I want to stress the point that all this +stuff is defined in HTML. You can set these attributes directly in any +tag we talked about in the last section. For example:</p> <pre><code><p style="color:red">this text is red</p> <p style="color:red;background-color:blue">this background is blue</p> <p style="color:red;background-color:blue;text-align:center">this text is centered</p> @@ -261,9 +529,14 @@ this text is centered rel="noopener noreferrer" style="color:yellow;background-color:red;text-align:justify;width:100%" > And this links to sonichu </a></p> -<p>This is useful if you want to play around with one section of the text, but annoying if you want a style to apply to every paragraph. Instead, we tag a list of tags and set <em>all</em> their attributes using a CSS file.</p> +<p>This is useful if you want to play around with one section of the +text, but annoying if you want a style to apply to every paragraph. +Instead, we tag a list of tags and set <em>all</em> their attributes +using a CSS file.</p> <h3 id="basic-formatting">Basic Formatting</h3> -<p>For any HTML tag, you can set an attribute that applies everytime it appears in an HTML document that links to the CSS file. A common formatting I use for paragraphs is:</p> +<p>For any HTML tag, you can set an attribute that applies everytime it +appears in an HTML document that links to the CSS file. A common +formatting I use for paragraphs is:</p> <pre><code>p { margin-top: 1.5%; margin-bottom: 1.5%; @@ -276,16 +549,23 @@ this text is centered white-space: pre-wrap; word-wrap: break-all; }</code></pre> -<p>I get pretty much all the attribute names just by looking them up <a href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in order these lines:</p> +<p>I get pretty much all the attribute names just by looking them up <a +href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in +order these lines:</p> <ul> -<li>Add padding to the text lines to fill any empty space with space characters (this make the background look like a block)</li> +<li>Add padding to the text lines to fill any empty space with space +characters (this make the background look like a block)</li> <li>Increase the font size a bit more than normal</li> -<li>Set the background color gray, chosen from an <a href="https://www.w3schools.com/colors/colors_picker.asp">HTML color picker</a></li> +<li>Set the background color gray, chosen from an <a +href="https://www.w3schools.com/colors/colors_picker.asp">HTML color +picker</a></li> <li>preserve white space, like the pre tag does</li> <li>break long lines, even in the middle of words</li> </ul> <h3 id="image-formatting">Image Formatting</h3> -<p>Images get more styles in CSS than I can document in detail, but one important bit you'll want to probably add to all images is the following.</p> +<p>Images get more styles in CSS than I can document in detail, but one +important bit you'll want to probably add to all images is the +following.</p> <pre><code>img { max-width: 100%; height: auto; @@ -297,8 +577,11 @@ this text is centered <li>automatically scales the height of the image on zoom</li> <li>automatically scales the width of the image on zoom</li> </ul> -<p>The reason I like this is that when user's zoom on your image, or view on mobile, the image scales to fit the screen; it never gets cutoff or distorted.</p> -<p>In addition to this basic stuff, you can style your images heavily using the filter option like so:</p> +<p>The reason I like this is that when user's zoom on your image, or +view on mobile, the image scales to fit the screen; it never gets cutoff +or distorted.</p> +<p>In addition to this basic stuff, you can style your images heavily +using the filter option like so:</p> <pre><code>img.gray { filter: grayscale(100%) }</code></pre> @@ -306,60 +589,124 @@ this text is centered <p><img style="filter:grayscale(100%)" src="https://archive.md/zP2NL/9d16630c80f93351469867fde13ea5199cd1f483.jpg" /></p> -<p>You can read lots more options for image formatting <a href="https://www.w3schools.com/css/css3_images.asp">here</a> and about the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp">here</a></p> +<p>You can read lots more options for image formatting <a +href="https://www.w3schools.com/css/css3_images.asp">here</a> and about +the filter property <a +href="https://www.w3schools.com/CSSref/css3_pr_filter.asp">here</a></p> <h3 id="making-custom-classes">Making Custom Classes</h3> -<p>Sometimes, you might want to apply an effect to some elements but not others. An example on this site, I dim the icons a bit so they can appear nice on dark theme browsers just as well. But I don't want to dim <em>all</em> images like in the following example:</p> +<p>Sometimes, you might want to apply an effect to some elements but not +others. An example on this site, I dim the icons a bit so they can +appear nice on dark theme browsers just as well. But I don't want to dim +<em>all</em> images like in the following example:</p> <pre><code>img { filter: invert(50%); }</code></pre> -<p>For one, that will only dim black-and-white images; anything else will just turn to mush like this:</p> +<p>For one, that will only dim black-and-white images; anything else +will just turn to mush like this:</p> <p><img class="icon" src="https://archive.md/zP2NL/9d16630c80f93351469867fde13ea5199cd1f483.jpg" /></p> -<p>Instead, I'd like it to just apply to select elements; I can do so by extending the tag with a class. On the CSS side:</p> +<p>Instead, I'd like it to just apply to select elements; I can do so by +extending the tag with a class. On the CSS side:</p> <pre><code>img.icon { filter: invert(50%); }</code></pre> <p>And to implement it in HTML:</p> <pre><code><img class="icon" src="/static/rss.svg" /></code></pre> <p><img class="icon" src="/static/rss.svg" /></p> -<h4 id="use-the-div-tag-to-make-sections">Use the div tag to make sections</h4> -<p>You can use the class property on <em>any</em> HTML tag, but you can also make general purpose classes that apply to a group of elements. Let's say you wanted to center a heading, a paragraph, and a picture, and constrain them to only part of the page, so that there's some margins on the left and right. We can put them all in one content section like this:</p> +<h4 id="use-the-div-tag-to-make-sections">Use the div tag to make +sections</h4> +<p>You can use the class property on <em>any</em> HTML tag, but you can +also make general purpose classes that apply to a group of elements. +Let's say you wanted to center a heading, a paragraph, and a picture, +and constrain them to only part of the page, so that there's some +margins on the left and right. We can put them all in one content +section like this:</p> <pre><code>.content { text-align: center; max-width: 85%; }</code></pre> -<p>Notice, no leading tag. This can be applied to <em>any</em> element, but usually we use a placeholder tag called "div." You can think of "div" like a divider for content of similar style. In the present example, we can use the class we made with a div tag:</p> +<p>Notice, no leading tag. This can be applied to <em>any</em> element, +but usually we use a placeholder tag called "div." You can think of +"div" like a divider for content of similar style. In the present +example, we can use the class we made with a div tag:</p> <pre><code><div class="content"> <h1>My cat</h1> <p>He's a cool cat</p> <img src="/cat.jpg" /> </div></code></pre> <h3 id="mobile-optimization">Mobile Optimization</h3> -<p>In early development, reading this site on my phone was a painful experience. Fortunately, in addition to some tricks above like the "viewport" meta tag, there exist parts of the CSS specification that allow you to directly manipulate your website based on properties of the user's device or web browser.</p> -<p>I won't go into as gory details as <a href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>, but for your basic smartphone, you can copy and paste this block:</p> +<p>In early development, reading this site on my phone was a painful +experience. Fortunately, in addition to some tricks above like the +"viewport" meta tag, there exist parts of the CSS specification that +allow you to directly manipulate your website based on properties of the +user's device or web browser.</p> +<p>I won't go into as gory details as <a +href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a +href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>, +but for your basic smartphone, you can copy and paste this block:</p> <pre><code>@media screen and (max-device-width: 480px) { // override your tags here body { font-size: 125%; } }</code></pre> -<p>This basic example makes the text slightly bigger on smartphone screens, but you can change everything you need to. I typically find I need to adjust the padding or the margins since it seems mobile browsers add a little more style than a typical desktop web browser.</p> -<p>It's also a good idea in general to put percentages as the values for your CSS attributes, so that size is always defined relative to all the other elements. This makes functions like zoom work a lot better. You can for example put a pixel value like this:</p> +<p>This basic example makes the text slightly bigger on smartphone +screens, but you can change everything you need to. I typically find I +need to adjust the padding or the margins since it seems mobile browsers +add a little more style than a typical desktop web browser.</p> +<p>It's also a good idea in general to put percentages as the values for +your CSS attributes, so that size is always defined relative to all the +other elements. This makes functions like zoom work a lot better. You +can for example put a pixel value like this:</p> <pre><code>body { font-size: 14px; }</code></pre> -<p>But this binds the size to 14 pixels which may look great on desktop, but small on a smart phone.</p> +<p>But this binds the size to 14 pixels which may look great on desktop, +but small on a smart phone.</p> <h2 id="how-to-look-things-up">How to look things up</h2> -<p>This is a frowned upon, poorly taught skill that any person on this side of the century needs. As I said at the outset, the blocks are simple, but <em>there are a lot of blocks</em>. We've gone over a few that make the site you're looking at what it is. But you're going to need to seek out the rest on your own if you want to make your own unique designs.</p> -<p>Your browser is more powerful then I let on earlier. It does just render code, <em>it can edit it too</em>. You might be familiar with the developer console. Most browsers I know can access this just by right clicking anywhere on a page and hitting "Inspect" or "view in Developer Console," or something like that. At the very least, you should have the option to "view page source." You can view the HTML, CSS, and various other things that you're seeing on the webpage written out in code in the developer console. Double click a value and you'll notice <em>you can change it</em>. A really fun way to learn this stuff is messing with other people's websites--don't worry, it's totally okay to change the HTML! It only changes the document being rendered on <em>your end</em>. Once you refresh your changes are gone. Why don't you try it here?</p> +<p>This is a frowned upon, poorly taught skill that any person on this +side of the century needs. As I said at the outset, the blocks are +simple, but <em>there are a lot of blocks</em>. We've gone over a few +that make the site you're looking at what it is. But you're going to +need to seek out the rest on your own if you want to make your own +unique designs.</p> +<p>Your browser is more powerful then I let on earlier. It does just +render code, <em>it can edit it too</em>. You might be familiar with the +developer console. Most browsers I know can access this just by right +clicking anywhere on a page and hitting "Inspect" or "view in Developer +Console," or something like that. At the very least, you should have the +option to "view page source." You can view the HTML, CSS, and various +other things that you're seeing on the webpage written out in code in +the developer console. Double click a value and you'll notice <em>you +can change it</em>. A really fun way to learn this stuff is messing with +other people's websites--don't worry, it's totally okay to change the +HTML! It only changes the document being rendered on <em>your end</em>. +Once you refresh your changes are gone. Why don't you try it here?</p> <!--Welcome the source code, hope you enjoy your stay :) --> -<p>The Internet itself is the greatest source of examples to learn this. Fancy websites tend to be inscrutable messes--largely on purpose, so you can't steal their design. But simple sites like this one are easy to break apart and grasp. If you scroll up, you'll notice some of the examples are copied and pasted exactly into this document! Don't be afraid to do a bit of copy and pasting when you see a design you like, just try to give credit where credit is due.</p> -<p>When you're done mindlessly clicking through source code though, and you want to get something done <em>your way</em>, you need to have a search engine handy, and preferably a few reference manuals handy. They're a bit scattered throughout this document, but if you've learned nothing else, these are the must haves:</p> +<p>The Internet itself is the greatest source of examples to learn this. +Fancy websites tend to be inscrutable messes--largely on purpose, so you +can't steal their design. But simple sites like this one are easy to +break apart and grasp. If you scroll up, you'll notice some of the +examples are copied and pasted exactly into this document! Don't be +afraid to do a bit of copy and pasting when you see a design you like, +just try to give credit where credit is due.</p> +<p>When you're done mindlessly clicking through source code though, and +you want to get something done <em>your way</em>, you need to have a +search engine handy, and preferably a few reference manuals handy. +They're a bit scattered throughout this document, but if you've learned +nothing else, these are the must haves:</p> <ul> -<li>Mozilla <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">HTML</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS</a></li> -<li>w3schools <a href="https://www.w3schools.com/tags/default.asp">HTML</a> and <a href="https://www.w3schools.com/CSSref/default.asp">CSS</a></li> -<li>The official w3 docs <a href="https://dev.w3.org/html5/spec-LC">HTML5</a> and <a href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li> +<li>Mozilla <a +href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">HTML</a> +and <a +href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS</a></li> +<li>w3schools <a +href="https://www.w3schools.com/tags/default.asp">HTML</a> and <a +href="https://www.w3schools.com/CSSref/default.asp">CSS</a></li> +<li>The official w3 docs <a +href="https://dev.w3.org/html5/spec-LC">HTML5</a> and <a +href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li> </ul> <h2 id="references">References</h2> <h3 id="html-1">HTML</h3> |