build to docs dir

Steve0Greatness · Jan 2, 2024 · de56598 · de56598
1 parent ca922bd
commit de56598
Show file tree

Hide file tree

Showing 27 changed files with 2,331 additions and 0 deletions.
diff --git a/docs/blog/Changing_the_Light-mode.html b/docs/blog/Changing_the_Light-mode.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Changing the light-mode - S0G</title>
+    <link rel="stylesheet" href="/src/global.css" />
+
+<link rel="stylesheet" href="/src/pygments-friendly.css" />
+
+</head>
+
+<body>
+    <header>
+        <h2><a href="/">Steve0Greatness</a></h2>
+        <nav>
+            <a href="/blog">Blog</a>
+        </nav>
+    </header>
+
+<ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb">
+    <li>
+        <a href="/">Index</a>
+    </li>
+
+    <li >
+        <a href="/blog">
+            Blog Index
+        </a>
+    </li>
+
+    <li aria-current="location">
+
+            Changing the light-mode
+
+    </li>
+
+</ol>
+    <main>
+<article>
+    <h2 id="blog-post-titled">Changing the light-mode</h2>
+    <time>2021 Sep 11</time>
+    <p>As of currently, the light mode on this site doesn't live up to what I want it to be.<br>I want it to be something that is the opposite of the dark mode, and it really isn't that. Expect it to change. But, in case you do still want to view it, here are the current css variable colors:<br><div class="code">html.l {<div style="margin-left: 1em;">--navCo: #0F0089;<br>--headCo: #3700FF;<br>--linkCo: #F7E45D;<br>--maCo: #0044F7;<br>--maTxtCo: #C2FFBA;<br>--buCo: #F09;<br>--buTxtCo: #0FF;<br>--buBoCo: #fff;<br>--noteCo: #f25;<br>--noteTxtCo: #ccc;<br>--inCo: #0bf;<br>--inlinkCo: #05c;<br>--selCo: #f51;<br>--selTxtCo: #059;<br>--taCo: #cf4;<br>--taTxtCo: black;</div>}</div></p>
+
+</article>
+</main>
+    <footer role="group">
+        <div class="footer-link-list-holder">
+            <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
+            <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
+                <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
+                <li><a href="https://youtube.com/@s0g">YouTube</a></li>
+            </ol>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/docs/blog/Creating_HTML_DD_List.html b/docs/blog/Creating_HTML_DD_List.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Creating a HTML drop-down list - S0G</title>
+    <link rel="stylesheet" href="/src/global.css" />
+
+<link rel="stylesheet" href="/src/pygments-friendly.css" />
+
+</head>
+
+<body>
+    <header>
+        <h2><a href="/">Steve0Greatness</a></h2>
+        <nav>
+            <a href="/blog">Blog</a>
+        </nav>
+    </header>
+
+<ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb">
+    <li>
+        <a href="/">Index</a>
+    </li>
+
+    <li >
+        <a href="/blog">
+            Blog Index
+        </a>
+    </li>
+
+    <li aria-current="location">
+
+            Creating a HTML drop-down list
+
+    </li>
+
+</ol>
+    <main>
+<article>
+    <h2 id="blog-post-titled">Creating a HTML drop-down list</h2>
+    <time>2021 Oct 01</time>
+    <p>Inorder to create a drop-down selection list in HTML, we must first understand why they are important.<br>Drop-down lists can be used in lots of ways, from creating a way for people to chose from a strict set of options, to making an on-off switch(even though you should use buttons for that)<br>Before we start, here is an example:<table><td style="font-weight: bolder; text-align: right; font-size: 1em;">Select Image: </td><td><select id="selcet" onchange="document.getElementById('img').src = document.getElementById('selcet').value"><option value="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" selected>Img 1</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Wilfried_Gruhn.jpg/121px-Wilfried_Gruhn.jpg">Img 2</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Blackcap_%28Sylvia_atricapilla%29_male.jpg/129px-Blackcap_%28Sylvia_atricapilla%29_male.jpg">Img 3</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Lt._Gen._Nguy%E1%BB%85n_V%C4%83n_Thi%E1%BB%87u_at_Cam_Ranh_Base%2C_October_26%2C_1966.jpg/116px-Lt._Gen._Nguy%E1%BB%85n_V%C4%83n_Thi%E1%BB%87u_at_Cam_Ranh_Base%2C_October_26%2C_1966.jpg">Img 3</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Steve_Stricker.jpg/157px-Steve_Stricker.jpg">Img 4</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg/350px-Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg">Img 5</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Michael_Whelan_-_Lucca_2017.jpg/118px-Michael_Whelan_-_Lucca_2017.jpg">Img 6</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/St_Pancras_Railway_Station_2012-06-23.jpg/152px-St_Pancras_Railway_Station_2012-06-23.jpg">Img 7</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Mae_La_refugee_camp_TFA.jpg/162px-Mae_La_refugee_camp_TFA.jpg">Img 8</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/JimmyCarterPortrait_%28cropped%29.jpg/121px-JimmyCarterPortrait_%28cropped%29.jpg">Img 9</option></select></td></table><img id="img" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" style="width: auto; height: 10em;"><div style="font-size: 10px;">Images from <a style="color: inherit;" href="https://en.wikipedia.org">Wikipedia</a>, on <a style="color: inherit;" href="https://web.archive.org/web/20211001135954/https://en.wikipedia.org/wiki/Main_Page">Oct. 2nd &amp; </a><a style="color: inherit;" href="https://web.archive.org/web/20211002095505/https://en.wikipedia.org/wiki/Main_Page">1st, 2021</a></div>For some weird reason, it's not in<div class="code">&lt;input&gt;</div>It has it's own tags, know as <span class="code">&lt;select&gt;</span> and <span class="code">&lt;option&gt;</span>. Using these is alittle like making a list, if you've ever made one. Here's an example bit of HTML.<div class="code">&lt;select&gt;<div style="text-indent: 1em;">&lt;option&gt;op 1&lt;/option&gt;</div><div style="text-indent: 1em;">&lt;option&gt;op 2&lt;/option&gt;</div>&lt;/select&gt;</div>Next we want to add values to <span class="code">&lt;options&gt;</span>, and an id(#) to <span class="code">&lt;select&gt;</span>.<br>You most-likely already know how to do ids, and maybe also values(if you have used input in any way), so I'll leave it up to you.<br>However, you may not know some things that could be useful here, such as preselections, or making things update upon being changed, well, you can do preselections with <span class="code">selected</span> in the <span class="code">&lt;option&gt;</span> that you want to be preselected. Changes done the page upon the change of the selection in the drop-down(or anything else that can be changed by the user) is <span class="code">onchange="submitFunction()"</span> being placed in the <span class="code">&lt;select&gt;</span>.<br>Let's check back on the code that we made at the code example:<div class="code" id="finished">&lt;select onchange="submitFunction()" id="selection"&gt;<div style="text-indent: 1em;">&lt;option value="op1" selected&gt;op 1&lt;/option&gt;</div><div style="text-indent: 1em;">&lt;option value="op2"&gt;op 2&lt;/option&gt;</div>&lt;/select&gt;</div>Inorder to access the selected option with JavaScript, use <span class="code">document.getElementById("selection").value</span><br>That's basically it, feel free to <span class="code">CTRL + C</span> <span class="code">CTRL + V</span> it. /s</p>
+
+</article>
+</main>
+    <footer role="group">
+        <div class="footer-link-list-holder">
+            <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
+            <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
+                <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
+                <li><a href="https://youtube.com/@s0g">YouTube</a></li>
+            </ol>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/docs/blog/How-To-make-mockups.html b/docs/blog/How-To-make-mockups.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>How to make mockups - S0G</title>
+    <link rel="stylesheet" href="/src/global.css" />
+
+<link rel="stylesheet" href="/src/pygments-friendly.css" />
+
+</head>
+
+<body>
+    <header>
+        <h2><a href="/">Steve0Greatness</a></h2>
+        <nav>
+            <a href="/blog">Blog</a>
+        </nav>
+    </header>
+
+<ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb">
+    <li>
+        <a href="/">Index</a>
+    </li>
+
+    <li >
+        <a href="/blog">
+            Blog Index
+        </a>
+    </li>
+
+    <li aria-current="location">
+
+            How to make mockups
+
+    </li>
+
+</ol>
+    <main>
+<article>
+    <h2 id="blog-post-titled">How to make mockups</h2>
+    <time>2021 Apr 22</time>
+    <p><div class="notice">This post isn't very good, and I'm not proud of it.</div>The first step to making a mockup is to open up the inpect menu, you may be able to do this using <t>ctrl+shifT+i</t>(or <t>f12</t>)<div class="Notice">this will be different from browser to browser.</div>once you see inspect element open, simply go to the page you're making a mockup for(ex. <a href="https://Scratch.mit.edu/mystuff">MyStuff</a>; or if you're making a new page, go to the page that looks the closest.), and press <t>ctrl+shifT+c</t>, and click on the area that you want to change(ex. the <t>+ New Project</t> button.<p>now that you've selected the element, let's learn how to edit it! You should see the element that you clicked on(using the <t>ctrl+shifT+c</t> command) highlighted in blue. Inside of the element(if you selected text, or even an image), you should see a darker area, that isn't red, <t>double click</t> on it, it should now be hilighted, now type in whatever you want(if it's an image, make sure to put in an image link, ex. https://imagehoster.com/png/png.png; if you clicked on a link(in the "" in "a href=''", unselect it and select the part "<a href='link'>"here"</a>").</p>anyways... if you don't have the monna lisa yet, just give up /s</p>
+
+</article>
+</main>
+    <footer role="group">
+        <div class="footer-link-list-holder">
+            <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
+            <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
+                <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
+                <li><a href="https://youtube.com/@s0g">YouTube</a></li>
+            </ol>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/docs/blog/How-to-Store-Passwords.html b/docs/blog/How-to-Store-Passwords.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>How to Store a Passwords - S0G</title>
+    <link rel="stylesheet" href="/src/global.css" />
+
+<link rel="stylesheet" href="/src/pygments-friendly.css" />
+
+</head>
+
+<body>
+    <header>
+        <h2><a href="/">Steve0Greatness</a></h2>
+        <nav>
+            <a href="/blog">Blog</a>
+        </nav>
+    </header>
+
+<ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb">
+    <li>
+        <a href="/">Index</a>
+    </li>
+
+    <li >
+        <a href="/blog">
+            Blog Index
+        </a>
+    </li>
+
+    <li aria-current="location">
+
+            How to Store a Passwords
+
+    </li>
+
+</ol>
+    <main>
+<article>
+    <h2 id="blog-post-titled">How to Store a Passwords</h2>
+    <time>2023 Nov 2</time>
+    <p><strong>Disclaimer</strong>: The world of cyber-security is an incredibly complex and constantly evolving topic, and I am not a cyber-security researcher; I create projects for fun.</p>
+
+<p>Storing a password in a server can be intimidating. Password management is incredibly tricky, as anything you mess up could compromise your users' password(s). Thankfully, random websites you've never visited before have a pure HTML blog post from 2023 about that exact topic, and how to do it properly.</p>
+
+<p>Basically, it's just this sequence of steps:</p>
+
+<ul>
+<li>Generate a long random sequence of characters, this is called a <em><a href="https://en.wikipedia.org/wiki/Salt_(cryptography)">salt</a></em>(generate for each user, do not use a master salt)</li>
+<li>Prepend(or append, it doesn't matter, just keep it consistent) this to the user's password</li>
+<li>Use a <a href="https://en.wikipedia.org/wiki/Hash_function">hashing algorithm</a>, such as <a href="https://en.wikipedia.org/wiki/PBKDF2">PBKDF2</a>, to generate a unique sequence of characters that will uniquely identify that password.</li>
+<li>Store the salt and hash in the same place, <em>do not</em> store the password on it's own.</li>
+</ul>
+
+<p>And to check if a password is right, repeat the steps, except rather than generating a random sequence of characters, get the sequence of characters that you've stored along with the hash.</p>
+
+<h2 id="why-do-this">Why Do <em>This</em>?</h2>
+
+<p>You might be thinking: <em>That's a bit arbitrary innit?</em> And if you aren't then you can stop reading now.</p>
+
+<p>This method of storing passwords is the only way to ensure that you are securely storing them. So let's go through some other ways, and why they aren't so good.</p>
+
+<h3 id="plaintext-passwords">Plaintext Passwords</h3>
+
+<p>Storing your passwords in plaintext allows anyone who can get into your server to easily take any password they want, as no matter how good your users' password is, their account will be hacked if an unauthorized or malicious individual is able to get in.</p>
+
+<h3 id="encrypted-passwords">Encrypted Passwords</h3>
+
+<p>This is basically just plaintext with additional steps. As long as your master-key is stored somewhere, it will get stolen as soon as somebody manages to get into your system.</p>
+
+<h3 id="bare-hashing">Bare Hashing</h3>
+
+<p>A hash isn't able to be undone, meaning theoretically you should be able to <em>just</em> hash your password. This, while a fair assumption, has unfortunately been incorrect for quite some time. There are databases online that store every word in the english language(or just some words) in addition to common passwords and their hashes, and users will often use words for their passwords, even though it's insecure.</p>
+
+<p>This is where salts come in. Due to the nature of hashes, even a single change in a string will entirely change it's hash, as such, if you add a random sequence of characters to a string, then you can entirely change it's hash.</p>
+
+</article>
+</main>
+    <footer role="group">
+        <div class="footer-link-list-holder">
+            <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
+            <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
+                <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
+                <li><a href="https://youtube.com/@s0g">YouTube</a></li>
+            </ol>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/docs/blog/How-to-copy-and-paste-on-mobile.html b/docs/blog/How-to-copy-and-paste-on-mobile.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>How to Copy & Paste on mobile - S0G</title>
+    <link rel="stylesheet" href="/src/global.css" />
+
+<link rel="stylesheet" href="/src/pygments-friendly.css" />
+
+</head>
+
+<body>
+    <header>
+        <h2><a href="/">Steve0Greatness</a></h2>
+        <nav>
+            <a href="/blog">Blog</a>
+        </nav>
+    </header>
+
+<ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb">
+    <li>
+        <a href="/">Index</a>
+    </li>
+
+    <li >
+        <a href="/blog">
+            Blog Index
+        </a>
+    </li>
+
+    <li aria-current="location">
+
+            How to Copy & Paste on mobile
+
+    </li>
+
+</ol>
+    <main>
+<article>
+    <h2 id="blog-post-titled">How to Copy & Paste on mobile</h2>
+    <time>2021 May 05</time>
+    <p><div class="notice">This post isn't very good, and I'm not proud of it.</div>Recently, I've been seeing a lot of people coming up with one excuse for not linking the dupelicate topic in the suggestions forum. They say something like,<div style="background-color: #979797;color: black;padding: 3px;">I'm on mobile!!!!! &#128534;&#128557;&#128555;</div>this is not a correct argument, so I've decided to make this post to prove it.<h1>Safari/iOS</h1>the way that you copy and paste on Safari is by double taping on the text, then dragging until you've selected all the text<span style="color: #FF0000;">(the next bit works for links, not this)</span><h2>Coping links</h2>tap and hold on the link until you see:<img src="https://i.ibb.co/9cYsfcP/IMG-5938.jpg" alt="open, open in background, open in new window, download link file, add to reading list, *copy*, share" border="0" width="130" height="105"><h2>Paste</h2>going to any textbox, in the top-lefT-hand conner, you should see a little clipboard icon(as long as you aren't selecting any text), press it. tap "copy(circled in <span style="color: #FF0000;">red</span>)"<div style="background-color: #ff0004; color: #00FFFF; text-align: center;">🏷Note: I don't own an android tablet or phone, so take this with a grain of salt</div><h1>Chrome/Android</h1>press and hold until a few selection boxes come up(might work for links)<h2>pasting</h2>tap and hold int the text box, you should see "paste," now click that(boxed in <span style="color: #FF0000;">:<img src="https://u.cubeupload.com/Steve_Greatness/Screenshot2021050571.png" width="300" height="60"><span style="font-size: 10px;"><a href="https://www.businessinsider.com/how-to-copy-and-paste-on-android?op=1">Image Source</a></span></p>
+
+</article>
+</main>
+    <footer role="group">
+        <div class="footer-link-list-holder">
+            <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
+            <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
+                <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
+                <li><a href="https://youtube.com/@s0g">YouTube</a></li>
+            </ol>
+        </div>
+    </footer>
+</body>
+
+</html>