diff options
| -rw-r--r-- | about/faq.html | 42 | ||||
| -rw-r--r-- | about/howami.html | 13 | ||||
| -rw-r--r-- | about/whatami.html | 16 | ||||
| -rw-r--r-- | about/whereami.html | 24 | ||||
| -rw-r--r-- | about/whoami.html | 13 | ||||
| -rw-r--r-- | about/whyami.html | 13 | ||||
| -rwxr-xr-x | panupdate | 1 | ||||
| -rw-r--r-- | thoughts/syntax/my-worst-habit.html | 25 | ||||
| -rw-r--r-- | thoughts/syntax/random-python-idiosyncrasies.html | 115 | ||||
| -rw-r--r-- | tutorials/pc_gaming/common-gfx-card-installation-woes.html | 54 | ||||
| -rw-r--r-- | tutorials/tor/how-to-host-a-tor-hidden-service.html | 29 | ||||
| -rw-r--r-- | tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html | 33 | ||||
| -rw-r--r-- | tutorials/www/how-to-make-this-site.html | 90 | ||||
| -rw-r--r-- | tutorials/www/how-to-use-the-internet.html | 29 | ||||
| -rw-r--r-- | tutorials/www/quick-intro-html-css.html | 177 | ||||
| -rw-r--r-- | update_targets.py | 17 |
16 files changed, 323 insertions, 368 deletions
diff --git a/about/faq.html b/about/faq.html index 994d8a8..9db881f 100644 --- a/about/faq.html +++ b/about/faq.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>faq</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>faq</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,28 +159,25 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#frequently-anticipated-questions">Frequently Anticipated +<li><a href="#frequently-anticipated-questions" target="_self">Frequently Anticipated Questions</a> <ul> -<li><a href="#questions-noone-asked-but-could-maybe">Questions noone +<li><a href="#questions-noone-asked-but-could-maybe" target="_self">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 +<li><a href="#why-bother-running-a-tor-hidden-service-if-youre-gonna-put-your-full-name-on-it" target="_self"><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 +<li><a href="#how-come-i-cant-access-your-main-domain" target="_self"><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 +<li><a href="#you-wrote-all-this-in-vim-why-tho" target="_self"><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 +<li><a href="#why-openbsd" target="_self"><em>Why OpenBSD?</em></a></li> +<li><a href="#why-bother-making-your-site-from-scratch-it-looks-like-crap" target="_self"><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 +<li><a href="#why-does-your-rss-feed-update-me-on-old-stuff" target="_self"><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 +<li><a href="#why-is-this-site-public-domain-what-does-that-mean" target="_self"><em>Why is this site public domain? What does that mean?</em></a></li> </ul></li> </ul></li> @@ -190,8 +187,7 @@ this site public domain? What does that mean?</em></a></li> 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 +<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 @@ -224,7 +220,7 @@ 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="puffy" /> +<img alt="puffy" src="/static/puffy.gif"/> <figcaption aria-hidden="true">puffy</figcaption> </figure> <p>I don't know the artist of that one unfortunately, I just found it on @@ -234,8 +230,7 @@ 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 +<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. @@ -282,3 +277,4 @@ 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 1ae967f..a85ff7c 100644 --- a/about/howami.html +++ b/about/howami.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>howami</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>howami</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,3 +159,4 @@ <p>Doing all right, thanks for asking.</p> </body> </html> + diff --git a/about/whatami.html b/about/whatami.html index 30002bf..b9ee866 100644 --- a/about/whatami.html +++ b/about/whatami.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>whatami</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>whatami</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -158,10 +158,10 @@ <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 +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 2ea1558..c22319b 100644 --- a/about/whereami.html +++ b/about/whereami.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>whereami</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>whereami</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -169,8 +169,7 @@ credit cards, golf, and girls' basketball.</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 +<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> @@ -179,9 +178,8 @@ 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 +<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 @@ -220,8 +218,7 @@ or were just starting to be at least.</p> 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 +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 @@ -241,3 +238,4 @@ 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 8e0ac63..5962a4a 100644 --- a/about/whoami.html +++ b/about/whoami.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>whoami</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>whoami</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -201,3 +201,4 @@ it's own value, but it's separate.</p></li> <p>Here is as close to home as I'll get for now.</p> </body> </html> + diff --git a/about/whyami.html b/about/whyami.html index 954b926..601b77f 100644 --- a/about/whyami.html +++ b/about/whyami.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>whyami</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>whyami</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -163,3 +163,4 @@ different.</p> </center> </body> </html> + @@ -11,6 +11,7 @@ do pandoc -s --toc --toc-depth=6 \ --ascii -V toc-title:"Contents" \ -f markdown-smart $file -t html -o $newfile + python update_targets.py $newfile fi if [[ "$file" == *.description ]] then diff --git a/thoughts/syntax/my-worst-habit.html b/thoughts/syntax/my-worst-habit.html index 65f19d8..e7fa960 100644 --- a/thoughts/syntax/my-worst-habit.html +++ b/thoughts/syntax/my-worst-habit.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>my-worst-habit</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>my-worst-habit</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -181,18 +181,18 @@ through Klim -- a horrible form of powdered milk tasting like rancid chalk -- and pick up on the results. They hock everything to pay the gas bill, and when the man comes around to shut it off for the non-payment, you can hear their screams for miles. When a citizen is -sick from needing it he says "I got the klinks" or "That old stove -climbing up my back." +sick from needing it he says "I got the klinks" or "That old stove +climbing up my back." -Nutmeg. I quote from the author's article on narcotic drugs in the -British Journal of Addiction (see Appendix): "Convicts and sailors +Nutmeg. I quote from the author's article on narcotic drugs in the +British Journal of Addiction (see Appendix): "Convicts and sailors sometimes have recourse to nutmeg. About a tablespoon is swallowed with water. Result vaguely similar to marijuana with side effects of headache and nausea. There are a number of narcotics of the nutmeg 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> +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 @@ -203,7 +203,7 @@ 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 +<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 @@ -212,3 +212,4 @@ that, I can pull that together for you).</code></pre> 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 dc67e4d..5c6ecef 100644 --- a/thoughts/syntax/random-python-idiosyncrasies.html +++ b/thoughts/syntax/random-python-idiosyncrasies.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>random-python-idiosyncrasies</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>random-python-idiosyncrasies</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -222,25 +222,21 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#coding-style-guide">Coding Style Guide</a> +<li><a href="#coding-style-guide" target="_self">Coding Style Guide</a> <ul> -<li><a -href="#strings-are-double-quoted.-keys-and-chars-are-single-quoted.">1) +<li><a href="#strings-are-double-quoted.-keys-and-chars-are-single-quoted." target="_self">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 +<li><a href="#long-strings-belong-in-parentheses" target="_self">2) Long strings belong in parentheses</a></li> -<li><a -href="#tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs">3) +<li><a href="#tabs-are-four-spaces-and-spaces-are-always-preferred-to-tabs" target="_self">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) +<li><a href="#always-add-spaces-between-arithmetic-but-never-for-brackets" target="_self">4) Always add spaces between arithmetic, but never for brackets</a></li> -<li><a href="#everything-should-be-snake_case">5) EVERYTHING should be +<li><a href="#everything-should-be-snake_case" target="_self">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) +<li><a href="#if-its-over-100-lines-you-probably-need-a-new-file-and-a-class" target="_self">6) If it's over 100 lines, you probably need a new file (and a class)</a></li> </ul></li> @@ -258,13 +254,11 @@ inconsistent</li> 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 +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> +<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" 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 @@ -272,32 +266,29 @@ class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href=" <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" 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> +<div class="sourceCode" id="cb2"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a>string <span class="op">=</span> <span class="st">"This is a phrase"</span></span> +<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a>word <span class="op">=</span> <span class="st">"word"</span></span> +<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a>cur_char <span class="op">=</span> <span class="st">'a'</span></span> +<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" 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 aria-hidden="true" href="#cb2-5" tabindex="-1"></a><span class="co"># keys are single-quoted to avoid confusion</span></span> +<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" 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> +<div class="sourceCode" id="cb3"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a>quoted_string <span class="op">=</span> (</span> +<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" 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 aria-hidden="true" href="#cb3-3" tabindex="-1"></a><span class="er"> ' - Michael Scott'</span></span> +<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" 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> <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" 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> +<div class="sourceCode" id="cb4"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a>longboi <span class="op">=</span> (</span> +<span id="cb4-2"><a aria-hidden="true" href="#cb4-2" 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 aria-hidden="true" href="#cb4-3" 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 aria-hidden="true" href="#cb4-4" 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 aria-hidden="true" href="#cb4-5" tabindex="-1"></a></span> +<span id="cb4-6"><a aria-hidden="true" href="#cb4-6" tabindex="-1"></a> <span class="st">"Try your best to keep formatting accurate like this."</span></span> +<span id="cb4-7"><a aria-hidden="true" href="#cb4-7" 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> @@ -305,36 +296,30 @@ tabs</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" 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> +<div class="sourceCode" id="cb5"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" 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" 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> +<div class="sourceCode" id="cb6"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" 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" tabindex="-1"></a>true <span class="op">&</span> false <span class="op">^</span> true</span></code></pre></div> +<div class="sourceCode" id="cb7"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" 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> +<div class="sourceCode" id="cb8"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" 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 aria-hidden="true" href="#cb8-2" 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 aria-hidden="true" href="#cb8-3" tabindex="-1"></a><span class="kw">def</span> judge_input(_input, _max): <span class="co"># function</span></span> +<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a> <span class="cf">if</span> _max <span class="op">></span> _input:</span> +<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a> <span class="bu">print</span>(<span class="st">"Too big!"</span>)</span> +<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a></span> +<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a>judge_input(user_input, MAX_INPUT</span> +<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a><span class="kw">class</span> Input_Judger: <span class="co"># a class</span></span> +<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" 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" 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) +<div class="sourceCode" id="cb9"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="co"># this doesn't actually work, but you get the idea</span></span> +<span id="cb9-2"><a aria-hidden="true" href="#cb9-2" tabindex="-1"></a>r <span class="op">=</span> requests.get(<span class="st">"www.debian.org"</span>)</span> +<span id="cb9-3"><a aria-hidden="true" href="#cb9-3" 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 @@ -344,8 +329,8 @@ 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> +<div class="sourceCode" id="cb10"><pre class="sourceCode python"><code class="sourceCode python"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" 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/pc_gaming/common-gfx-card-installation-woes.html b/tutorials/pc_gaming/common-gfx-card-installation-woes.html index 250f456..04dd8e9 100644 --- a/tutorials/pc_gaming/common-gfx-card-installation-woes.html +++ b/tutorials/pc_gaming/common-gfx-card-installation-woes.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>common-gfx-card-installation-woes</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>common-gfx-card-installation-woes</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -222,18 +222,18 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#step-1-the-replacement">Step 1: The Replacement</a></li> -<li><a href="#step-2-re-installing-the-drivers">Step 2: Re-installing +<li><a href="#step-1-the-replacement" target="_self">Step 1: The Replacement</a></li> +<li><a href="#step-2-re-installing-the-drivers" target="_self">Step 2: Re-installing the drivers</a> <ul> -<li><a href="#part-one-fix-broken-packages">Part one: Fix Broken +<li><a href="#part-one-fix-broken-packages" target="_self">Part one: Fix Broken Packages</a></li> -<li><a href="#part-two-re-install-nvidia-driver">Part two: Re-install +<li><a href="#part-two-re-install-nvidia-driver" target="_self">Part two: Re-install nvidia-driver</a></li> -<li><a href="#part-negative-three-just-in-case">Part negative three: +<li><a href="#part-negative-three-just-in-case" target="_self">Part negative three: Just in case</a></li> </ul></li> -<li><a href="#step-three-reboot-and-test">Step three: Reboot and +<li><a href="#step-three-reboot-and-test" target="_self">Step three: Reboot and test</a></li> </ul> </nav> @@ -264,15 +264,13 @@ drivers</h2> <p>At first I tried to just naively update and see what happened, but I received a "broken packages" error for nvidia-driver and other related packages after running this.</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">$</span> sudo apt update</span> -<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt upgrade</span></code></pre></div> +<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="ex">$</span> sudo apt update</span> +<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a><span class="ex">$</span> sudo apt upgrade</span></code></pre></div> <p>This turned out to be a two-part error, one was the driver itself, two was an update in Debian sid.</p> <h3 id="part-one-fix-broken-packages">Part one: Fix Broken Packages</h3> <p>Whenever I see broken packages, I tend to to assume that the name of -a package got updated. In this case, there was a <a -href="https://www.debian.org/releases/bookworm/amd64/release-notes/ch-information.en.html#non-free-split">note</a> +a package got updated. In this case, there was a <a href="https://www.debian.org/releases/bookworm/amd64/release-notes/ch-information.en.html#non-free-split">note</a> on the apt list changes that mentioned a separate "non-free-firmware" branch had been made, which had some of the components I needed. I just added "non-free-firmware" to my /etc/apt/sources.list:</p> @@ -284,13 +282,11 @@ nvidia-driver</h3> <p>I tried to update again at this point, but encountered the same error. At this point I figured the best thing to do was to just try to reinstall all nvidia related software again:</p> -<div class="sourceCode" id="cb3"><pre -class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt purge nvidia-<span class="pp">*</span></span> -<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt update</span> -<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt upgrade</span></code></pre></div> +<div class="sourceCode" id="cb3"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="ex">$</span> sudo apt purge nvidia-<span class="pp">*</span></span> +<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a><span class="ex">$</span> sudo apt update</span> +<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a><span class="ex">$</span> sudo apt upgrade</span></code></pre></div> <p>Ok no errors on the update this time, let's try again:</p> -<div class="sourceCode" id="cb4"><pre -class="sourceCode bash"><code class="sourceCode bash"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo apt install nvidia-driver</span></code></pre></div> +<div class="sourceCode" id="cb4"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="ex">$</span> sudo apt install nvidia-driver</span></code></pre></div> <h3 id="part-negative-three-just-in-case">Part negative three: Just in case</h3> <p>In the dark days before the Debian team had an Nvidia package, you @@ -304,14 +300,12 @@ something like "driver.run"</p> <p>In order to run this file, you need to stop your graphics environment. Press CTRL + ALT + F1 to log out and open a terminal-only session. Login with your credentials. Then stop the X-server</p> -<div class="sourceCode" id="cb5"><pre -class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo service lightdm stop</span></code></pre></div> +<div class="sourceCode" id="cb5"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="ex">$</span> sudo service lightdm stop</span></code></pre></div> <p>If you use a different X manager you might need to replace "lightdm" with "gdm" or "kdm" (Gnome and KDE). Now we can run the driver install:</p> -<div class="sourceCode" id="cb6"><pre -class="sourceCode bash"><code class="sourceCode bash"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo chmod +x driver.run</span> -<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo ./driver.run</span></code></pre></div> +<div class="sourceCode" id="cb6"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="ex">$</span> sudo chmod +x driver.run</span> +<span id="cb6-2"><a aria-hidden="true" href="#cb6-2" tabindex="-1"></a><span class="ex">$</span> sudo ./driver.run</span></code></pre></div> <p>Accept all the prompts and you'll have the factory made driver software. Note, you have to manually update this way though. So try to figure out the nvidia-driver package before resorting to this @@ -322,8 +316,8 @@ method!</p> point, as long as you're still seeing your desktop, you should be good to go! I ran Kerbal Space Program 2 (currently in early access) as my first test.</p> -<p><video src="/static/ksp2.webm" controls=""><a -href="/static/ksp2.webm">Video</a></video></p> +<p><video controls="" src="/static/ksp2.webm"><a href="/static/ksp2.webm">Video</a></video></p> <p>Looking good, Jeb!</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 79a4e2e..de381e5 100644 --- a/tutorials/tor/how-to-host-a-tor-hidden-service.html +++ b/tutorials/tor/how-to-host-a-tor-hidden-service.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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-host-a-tor-hidden-service</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>how-to-host-a-tor-hidden-service</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,12 +159,11 @@ <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 +<li><a href="#how-to-spin-up-a-temporary-hidden-file-share-with-python" target="_self">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> +<li><a href="#configure-tor" target="_self">Configure Tor</a></li> +<li><a href="#set-up-the-server" target="_self">Set up the server</a></li> </ul></li> </ul> </nav> @@ -174,20 +173,17 @@ 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>. +<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> +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 +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> @@ -244,3 +240,4 @@ through the Tor Browser.</p> 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 17f8c84..c5179a6 100644 --- a/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html +++ b/tutorials/vim/how-to-fix-neovim-nerdtree-rendering-issue.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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-fix-neovim-nerdtree-rendering-issue</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>how-to-fix-neovim-nerdtree-rendering-issue</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -222,26 +222,25 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#the-problem">The Problem</a></li> -<li><a href="#the-attempt">The Attempt</a></li> -<li><a href="#the-actual-solution">The Actual Solution</a></li> +<li><a href="#the-problem" target="_self">The Problem</a></li> +<li><a href="#the-attempt" target="_self">The Attempt</a></li> +<li><a href="#the-actual-solution" target="_self">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 +<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><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><img src="/static/nomess-vim.gif" /></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><img src="/static/mess-terminator.gif" /></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 @@ -256,11 +255,11 @@ program).</p> 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> +<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" 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> </body> </html> + diff --git a/tutorials/www/how-to-make-this-site.html b/tutorials/www/how-to-make-this-site.html index 2fcc26f..33d8943 100644 --- a/tutorials/www/how-to-make-this-site.html +++ b/tutorials/www/how-to-make-this-site.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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-make-this-site</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>how-to-make-this-site</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,42 +159,41 @@ <nav id="TOC" role="doc-toc"> <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 +<li><a href="#background" target="_self">Background</a></li> +<li><a href="#what-is-a-web-server-and-how-do-i-run-one" target="_self">What is a web server and how do I run one?</a> <ul> -<li><a href="#getting-from-localhost-to-the-internet">Getting from +<li><a href="#getting-from-localhost-to-the-internet" target="_self">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 +<li><a href="#how-can-i-make-this-server-available-on-the-internet-cheaply-and-independently" target="_self">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 +<li><a href="#can-i-run-a-web-server-at-home" target="_self">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> +<li><a href="#so-what-should-i-do" target="_self">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 +<li><a href="#whats-a-domain-name" target="_self">What's a "Domain Name"</a></li> +<li><a href="#setup-https-and-tls-for-some-sense-of-security" target="_self">Setup HTTPS and TLS, for some sense of security</a></li> -<li><a href="#perspective">Perspective</a></li> -<li><a href="#references">References</a> +<li><a href="#perspective" target="_self">Perspective</a></li> +<li><a href="#references" target="_self">References</a> <ul> -<li><a href="#terms-of-service-for-certain-isps">Terms of service for +<li><a href="#terms-of-service-for-certain-isps" target="_self">Terms of service for certain ISPs</a> <ul> -<li><a href="#verizon">Verizon</a></li> -<li><a href="#optimum">Optimum</a></li> -<li><a href="#spectrum">Spectrum</a></li> -<li><a href="#att">AT&T</a></li> -<li><a href="#cox-communications">Cox Communications</a></li> +<li><a href="#verizon" target="_self">Verizon</a></li> +<li><a href="#optimum" target="_self">Optimum</a></li> +<li><a href="#spectrum" target="_self">Spectrum</a></li> +<li><a href="#att" target="_self">AT&T</a></li> +<li><a href="#cox-communications" target="_self">Cox Communications</a></li> </ul></li> </ul></li> </ul> </nav> <h2 id="background">Background</h2> -<p><em>TL;DR get to </em><a href="#thepoint">the point</a></p> +<p><em>TL;DR get to </em><a href="#thepoint" target="_self">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 @@ -222,8 +221,7 @@ 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>. +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 @@ -261,15 +259,12 @@ 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> +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 +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 @@ -357,19 +352,16 @@ 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 +<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> +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>)</i></p> <p>Most likely you'll want to rent someone else's server, usually a VPS. -</i></p> +</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 @@ -388,19 +380,18 @@ 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> +manage them in the <a href="#references" target="_self">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> +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> +set your own custom <a href="#whats-a-domain-name" target="_self">domain name</a>.</p> <ul> <li><strong>Wordpress</strong> (but this time, you set it up)</li> </ul> @@ -423,8 +414,7 @@ online?</p> 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 +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 @@ -460,7 +450,7 @@ like:</p> <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 +you'll want a <a href="#whats-a-domain-name" target="_self">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> @@ -525,15 +515,12 @@ 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 +<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 +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> +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> @@ -605,3 +592,4 @@ others.</p> </ul> </body> </html> + diff --git a/tutorials/www/how-to-use-the-internet.html b/tutorials/www/how-to-use-the-internet.html index 88692cf..b687394 100644 --- a/tutorials/www/how-to-use-the-internet.html +++ b/tutorials/www/how-to-use-the-internet.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>how-to-use-the-internet</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,21 +159,21 @@ <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 +<li><a href="#why" target="_self">Why?</a></li> +<li><a href="#how-to-use-a-web-browser" target="_self">How to use a web browser</a></li> -<li><a href="#how-to-use-a-search-engine">How to use a search +<li><a href="#how-to-use-a-search-engine" target="_self">How to use a search engine</a></li> -<li><a href="#how-to-read-and-find-scholarly-articles">How to read and +<li><a href="#how-to-read-and-find-scholarly-articles" target="_self">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 +<li><a href="#how-to-use-wikipedia" target="_self">How to use Wikipedia</a></li> +<li><a href="#how-to-find-articles-with-google-scholar" target="_self">How to find articles with Google Scholar</a></li> </ul></li> -<li><a href="#advanced-topics">Advanced Topics</a> +<li><a href="#advanced-topics" target="_self">Advanced Topics</a> <ul> -<li><a href="#how-to-use-tor-to-browse-anonymously">How to use tor to +<li><a href="#how-to-use-tor-to-browse-anonymously" target="_self">How to use tor to browse anonymously</a></li> </ul></li> </ul> @@ -241,3 +241,4 @@ 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 e3ffc6c..9788cf4 100644 --- a/tutorials/www/quick-intro-html-css.html +++ b/tutorials/www/quick-intro-html-css.html @@ -1,11 +1,11 @@ <!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> +<html lang="" xml:lang="" xmlns="http://www.w3.org/1999/xhtml"> <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>quick-intro-html-css</title> - <style> +<meta charset="utf-8"/> +<meta content="pandoc" name="generator"/> +<meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport"/> +<title>quick-intro-html-css</title> +<style> html { line-height: 1.5; font-family: Georgia, serif; @@ -159,58 +159,55 @@ <nav id="TOC" role="doc-toc"> <h2 id="toc-title">Contents</h2> <ul> -<li><a href="#web-browsers-render-code">Web browsers render code</a> +<li><a href="#web-browsers-render-code" target="_self">Web browsers render code</a> <ul> -<li><a href="#html">HTML</a> +<li><a href="#html" target="_self">HTML</a> <ul> -<li><a href="#basic-format">Basic Format</a></li> -<li><a href="#tables-and-links">Tables and Links</a></li> -<li><a href="#and-everything-else...">And Everything Else...</a> +<li><a href="#basic-format" target="_self">Basic Format</a></li> +<li><a href="#tables-and-links" target="_self">Tables and Links</a></li> +<li><a href="#and-everything-else..." target="_self">And Everything Else...</a> <ul> -<li><a href="#shortlist-of-text-and-formatting-tags">Shortlist of Text +<li><a href="#shortlist-of-text-and-formatting-tags" target="_self">Shortlist of Text and Formatting Tags</a></li> </ul></li> -<li><a href="#html-metadata">HTML Metadata</a></li> +<li><a href="#html-metadata" target="_self">HTML Metadata</a></li> </ul></li> -<li><a href="#css">CSS</a> +<li><a href="#css" target="_self">CSS</a> <ul> -<li><a href="#add-style-without-css">Add style <em>without</em> +<li><a href="#add-style-without-css" target="_self">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> +<li><a href="#basic-formatting" target="_self">Basic Formatting</a></li> +<li><a href="#image-formatting" target="_self">Image Formatting</a></li> +<li><a href="#making-custom-classes" target="_self">Making Custom Classes</a> <ul> -<li><a href="#use-the-div-tag-to-make-sections">Use the div tag to make +<li><a href="#use-the-div-tag-to-make-sections" target="_self">Use the div tag to make sections</a></li> </ul></li> -<li><a href="#mobile-optimization">Mobile Optimization</a></li> +<li><a href="#mobile-optimization" target="_self">Mobile Optimization</a></li> </ul></li> -<li><a href="#how-to-look-things-up">How to look things up</a></li> -<li><a href="#references">References</a> +<li><a href="#how-to-look-things-up" target="_self">How to look things up</a></li> +<li><a href="#references" target="_self">References</a> <ul> -<li><a href="#html-1">HTML</a></li> -<li><a href="#css-1">CSS</a></li> +<li><a href="#html-1" target="_self">HTML</a></li> +<li><a href="#css-1" target="_self">CSS</a></li> </ul></li> </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> +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 +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 +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 @@ -269,15 +266,15 @@ more tags in this example:</p> <tr> <td>FSF!</td> <td> - <a href="https://www.fsf.org/"> - <img src="https://static.fsf.org/common/img/logo-new.png" /> + <a href="https://www.fsf.org/"> + <img src="https://static.fsf.org/common/img/logo-new.png" /> </a></td> </tr> <tr> <td>LOONIX!</td> <td> - <a href="https://www.kernel.org/"> - <img src="https://www.kernel.org/theme/images/logos/tux.png" /> + <a href="https://www.kernel.org/"> + <img src="https://www.kernel.org/theme/images/logos/tux.png" /> </a> </td> </tr> @@ -303,25 +300,25 @@ 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> +<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> -<pre><code><a href="/cat.jpg">example</a></code></pre> +<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> +<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> -<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> +<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 @@ -334,18 +331,15 @@ 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 +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 +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> +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 @@ -430,7 +424,7 @@ The items in those lists </td> <td> Embeds another html file in the current one. Here's your IP from -ipaddress.sh:<br> <iframe src="https://ipaddress.sh/"></iframe> +ipaddress.sh:<br/> <iframe src="https://ipaddress.sh/"></iframe> </td> </tr> </table> @@ -448,12 +442,12 @@ example:</p> <pre><code><html> <head> <title>My Great page</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> - <meta name="description" content="a really cool page"> - <meta name="keywords" content="HTML, CSS, JavaScript"> - <meta name="author" content="John Doe"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" type="text/css" href="/static/main.css"> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> + <meta name="description" content="a really cool page"> + <meta name="keywords" content="HTML, CSS, JavaScript"> + <meta name="author" content="John Doe"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" type="text/css" href="/static/main.css"> </head> <body> <h1>My Great page</h1> @@ -492,12 +486,12 @@ 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> +<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> -<pre><code><link rel="stylesheet" type="text/css" href="/static/main.css"></code></pre> +<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> @@ -505,13 +499,13 @@ directory of "/var/www/html".</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> -<a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2" - target="_blank" - rel="noopener noreferrer" - style="color:yellow;background-color:red;text-align:right" +<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> +<a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2" + target="_blank" + rel="noopener noreferrer" + style="color:yellow;background-color:red;text-align:right" > And this links to sonichu </a></code></pre> @@ -524,11 +518,7 @@ this background is blue <p style="color:red;background-color:blue;text-align:center"> this text is centered </p> -<p><a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2" - target="_blank" - rel="noopener noreferrer" - style="color:yellow;background-color:red;text-align:justify;width:100%" - > And this links to sonichu </a></p> +<p><a href="https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229&episode_no=2" rel="noopener noreferrer" style="color:yellow;background-color:red;text-align:justify;width:100%" target="_blank"> 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 @@ -549,15 +539,13 @@ formatting I use for paragraphs is:</p> 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 +<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>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 +<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> @@ -586,13 +574,9 @@ using the filter option like so:</p> filter: grayscale(100%) }</code></pre> <p>Applied:</p> -<p><img style="filter:grayscale(100%)" -src="/static/jazzcat.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><img src="/static/jazzcat.jpg" style="filter:grayscale(100%)"/></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 @@ -603,17 +587,15 @@ appear nice on dark theme browsers just as well. But I don't want to dim }</code></pre> <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="/static/jazzcat.jpg" -/></p> +<p><img class="icon" src="/static/jazzcat.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> <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> +<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 @@ -630,10 +612,10 @@ section like this:</p> 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"> +<pre><code><div class="content"> <h1>My cat</h1> -<p>He's a cool cat</p> -<img src="/cat.jpg" /> +<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 @@ -641,9 +623,7 @@ 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>, +<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 @@ -697,16 +677,10 @@ 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> @@ -739,3 +713,4 @@ href="https://www.w3.org/Style/CSS/specs.en.html">All CSS specs</a></li> </ol> </body> </html> + diff --git a/update_targets.py b/update_targets.py new file mode 100644 index 0000000..2052e68 --- /dev/null +++ b/update_targets.py @@ -0,0 +1,17 @@ +import sys +from bs4 import BeautifulSoup + +html_doc = open(sys.argv[1], mode="r") +html = html_doc.read() +soup = BeautifulSoup(html, features="lxml") +for link in soup.find_all("a"): + if "href" in link.attrs.keys(): + if (link['href'].startswith("#") + and "tabindex" not in link.attrs.keys() + and "target" not in link.attrs.keys()): + link['target'] = "_self" +html_doc.close() +html_doc = open(sys.argv[1], mode="w") +print(soup, file=html_doc) +print("File written") + |