diff options
Diffstat (limited to 'tutorials')
| -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 |
6 files changed, 183 insertions, 229 deletions
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> + |