steve0greatness,
created on Saturday, 20 January 2024, 23:01:19 (1705791679),
received on Monday, 6 May 2024, 02:55:35 (1714964135)
Author identity: Steve0Greatness <75220768+Steve0Greatness@users.noreply.github.com>
240d70901dcd9539c1615dc0639c98016f8d280c
blog-posts/Changing_the_Light-mode.md
@@ -2,4 +2,4 @@
title: Changing the light-mode
date: 2021 Sep 11
---
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>
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>
blog-posts/Creating_HTML_DD_List.md
@@ -2,4 +2,4 @@
title: Creating a HTML drop-down list
date: 2021 Oct 01
---
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 & </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"><input></div>It has it's own tags, know as <span class="code"><select></span> and <span class="code"><option></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"><select><div style="text-indent: 1em;"><option>op 1</option></div><div style="text-indent: 1em;"><option>op 2</option></div></select></div>Next we want to add values to <span class="code"><options></span>, and an id(#) to <span class="code"><select></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"><option></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"><select></span>.<br>Let's check back on the code that we made at the code example:<div class="code" id="finished"><select onchange="submitFunction()" id="selection"><div style="text-indent: 1em;"><option value="op1" selected>op 1</option></div><div style="text-indent: 1em;"><option value="op2">op 2</option></div></select></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
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="true">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 & </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"><input></div>It has it's own tags, know as <span class="code"><select></span> and <span class="code"><option></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"><select><div style="text-indent: 1em;"><option>op 1</option></div><div style="text-indent: 1em;"><option>op 2</option></div></select></div>Next we want to add values to <span class="code"><options></span>, and an id(#) to <span class="code"><select></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"><option></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"><select></span>.<br />Let's check back on the code that we made at the code example:<div class="code" id="finished"><select onchange="submitFunction()" id="selection"><div style="text-indent: 1em;"><option value="op1" selected>op 1</option></div><div style="text-indent: 1em;"><option value="op2">op 2</option></div></select></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
blog-posts/How-to-copy-and-paste-on-mobile.md
@@ -1,5 +1,5 @@
---
title: How to Copy & Paste on mobile
title: How to Copy and Paste on mobile
date: 2021 May 05
---
<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!!!!! 😖😭😫</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>
<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!!!!! 😖😭😫</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></span>
blog-posts/How_To_Make_Tea.md
@@ -2,4 +2,4 @@
title: How to Make the perfect Tea.
date: 2021 Sep 28
---
<div class="notice">this is opinion based, there's no perfect tea</div>Tea is the perfect fit for most meals, breakfast, 2nd breakfast, morning tea, lunch, afTernoon tea, dinner, or supper.<br>But how do I make it? Here's how I make my tea.<h2 id="step1">Step 1</h2>The first step is to get the brand of tea you like. I personally like stuff such as Mighty Leaf, it tastes strong, and your able to use it 3 times without it getting weaker, and even then, you can still use it more, it really doesn't lose it's weakness.<h2 id="step2">Step 2</h2>Get a mug, or tea cup. I personally like mugs, as they are normally bigger, meaning you don't have to refill as much as a tea cup.<h2 id="step3">Step 3</h2>Get your tea, if you're using loose leaf, I'd use a smaller cup to make it, then use a strainer to the leaves out, as it adds texture that I don't like personally, otherwise just put the tea bag in, it is at this point that I like to stir it.<h2 id="step4">Final Step</h2>Enjoy.<br>You can add sugar and <span style="text-decoration: line-through;">milk</span> cream, if you're into those kinda things... even lemon if you really want.<br><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/English_teaware.jpg/1280px-English_teaware.jpg" title="src: Wikipedia" width="250">
<div class="notice">this is opinion based, there's no perfect tea</div>Tea is the perfect fit for most meals, breakfast, 2nd breakfast, morning tea, lunch, afTernoon tea, dinner, or supper.<br />But how do I make it? Here's how I make my tea.<h2 id="step1">Step 1</h2>The first step is to get the brand of tea you like. I personally like stuff such as Mighty Leaf, it tastes strong, and your able to use it 3 times without it getting weaker, and even then, you can still use it more, it really doesn't lose it's weakness.<h2 id="step2">Step 2</h2>Get a mug, or tea cup. I personally like mugs, as they are normally bigger, meaning you don't have to refill as much as a tea cup.<h2 id="step3">Step 3</h2>Get your tea, if you're using loose leaf, I'd use a smaller cup to make it, then use a strainer to the leaves out, as it adds texture that I don't like personally, otherwise just put the tea bag in, it is at this point that I like to stir it.<h2 id="step4">Final Step</h2>Enjoy.<br />You can add sugar and <span style="text-decoration: line-through;">milk</span> cream, if you're into those kinda things... even lemon if you really want.<br /><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/English_teaware.jpg/1280px-English_teaware.jpg" title="src: Wikipedia" width="250" />
blog-posts/Is_Kris_the_Knight.md
@@ -2,4 +2,4 @@
title: Is Kris the Knight?
date: 2021 Oct 23
---
Is Kris <span style='color: hotpink; font-style: italic;'>the Knight</span>? At face value, this seemes insain. Right? Well, let's look at the evidence<br>First and formost, <span style='color: hotpink; font-style: italic;'>the Knight</span> opens <span style='color: red; font-style: italic;'>Dark Fountains</span>. Now, what does Kris do at the end of Chapter 2? They create a <span style='color: red; font-style: italic;'>Dark Fountain</span>.<br>Second, what does Kris look like in <span style='color: red; font-style: italic;'>Dark Worlds</span>? That's right, a Knight.<br><img src='https://static.wikia.nocookie.net/deltarune/images/9/96/Kris_overworld_darkworld.png' width='100' align='left'>This is what Kris looks like in a <span style='color: red; font-style: italic;'>Dark World</span>, they're wearing plated armor. They even have a sword(not shown in image).<br>We know that Kris made a <span style='color: red; font-style: italic;'>Dark Fountain</span> at the end of Chapter 2, so is it really that far off to assume that they also made the one in the librarby's computer lab? Or the on in the closet for that matter. Well, we know that they had thier knife at the <a href='https://youtu.be/wBS1MNkVPGw'>end of chapter 1</a>, and only Toby Fox knows what they did before chapter 1.<br>In the end of chapter 2, they rips they soul out before creating the new fountain, and shuffeling around outside; and slashing Torial's tires. Infact, they rips out their heart in the end of chapter 1, too. Afterward, they presumably went to librarby and made a fountain in the computer lab.<br>This is a really common thereoy, but it really needs more evidence to be collected, and more speculating to be done.<br clear='left'><span style='color: grey; font-size: 13px;'>taken from <a href='https://deltarune.fandom.com/wiki/'>Fandom</a>.</span>
Is Kris <span style='color: hotpink; font-style: italic;'>the Knight</span>? At face value, this seemes insain. Right? Well, let's look at the evidence<br />First and formost, <span style='color: hotpink; font-style: italic;'>the Knight</span> opens <span style='color: red; font-style: italic;'>Dark Fountains</span>. Now, what does Kris do at the end of Chapter 2? They create a <span style='color: red; font-style: italic;'>Dark Fountain</span>.<br />Second, what does Kris look like in <span style='color: red; font-style: italic;'>Dark Worlds</span>? That's right, a Knight.<br /><img src='https://static.wikia.nocookie.net/deltarune/images/9/96/Kris_overworld_darkworld.png' width='100' align='left' />This is what Kris looks like in a <span style='color: red; font-style: italic;'>Dark World</span>, they're wearing plated armor. They even have a sword(not shown in image).<br />We know that Kris made a <span style='color: red; font-style: italic;'>Dark Fountain</span> at the end of Chapter 2, so is it really that far off to assume that they also made the one in the librarby's computer lab? Or the on in the closet for that matter. Well, we know that they had thier knife at the <a href='https://youtu.be/wBS1MNkVPGw'>end of chapter 1</a>, and only Toby Fox knows what they did before chapter 1.<br />In the end of chapter 2, they rips they soul out before creating the new fountain, and shuffeling around outside; and slashing Torial's tires. Infact, they rips out their heart in the end of chapter 1, too. Afterward, they presumably went to librarby and made a fountain in the computer lab.<br />This is a really common thereoy, but it really needs more evidence to be collected, and more speculating to be done.<br clear='left' /><span style='color: grey; font-size: 13px;'>taken from <a href='https://deltarune.fandom.com/wiki/'>Fandom</a>.</span>
blog-posts/The_song_that_we_didnt_get_in_undertale.md
@@ -2,4 +2,4 @@
title: The Song we didn't get in Undertale
date: 2021 Dec 20
---
<p>Undertale is an amazing game. I really enjoyed my time playing it. I listen to the sound track a lot(I'm doing it as I write this). I even read a fanmade <a href="https://undertale-au.fandom.com/wiki/Category:AUs">AU</a> called <a href="https://invertedfate.com/chapters">Inverted Fate</a>. The only thing that I haven't done(and don't intend on doing) is a <a href="https://undertale.fandom.com/wiki/Genocide_Route">Genocide Run</a>. But, there's one thing that's kinda been bugging me since it first found out about it. It's the fact that their's a version of <a href="https://undertale.fandom.com/wiki/Undertale_(Soundtrack)">Undertale(the song)</a> that wasn't added, and instead was replaced with the version we have now.</p><h1>The Current Version</h1><p>The version we got of Undertale was a pretty good one. It's a little sad, while also filled with hope(just like the monsters in the neutral route. It is kinda the song of their hope, since it only plays during the end of the neutral route). Below is the version we got in the game.</p><audio controls><source src="https://static.wikia.nocookie.net/undertale/images/6/66/Undertale_%28Soundtrack%29_music_1.ogg" type="audio/ogg"><source src="https://ia902907.us.archive.org/29/items/undertaleost_202004/Undertale%20-%20Lossless%20Soundtrack%20%28toby%20fox%29/toby%20fox%20-%20UNDERTALE%20Soundtrack%20-%2071%20Undertale.mp3" type="audio/mpeg"><source src="https://ia802907.us.archive.org/29/items/undertaleost_202004/Undertale%20-%20Lossless%20Soundtrack%20%28toby%20fox%29/toby%20fox%20-%20UNDERTALE%20Soundtrack%20-%2071%20Undertale.flac" type="audio/flac">It looks like your browser doesn't support the audio tag. <a href="https://static.wikia.nocookie.net/undertale/images/6/66/Undertale_%28Soundtrack%29_music_1.ogg">This is a link to the audio so that you can download it if you so choose.</a></audio><h1>The One that could have been</h1><p>This one is also greate, and I personally think I like it a lot better than the one we have. I feel like it's more happy in tone. Even if it might not fit with what the game would have been trying to fit it's context into, it's still a good song on it's own.</p><audio controls><source src="https://static.wikia.nocookie.net/undertale/images/6/64/Undertale_%28Soundtrack%29_music_unused.ogg" type="audio/ogg"><source src="https://a.tumblr.com/tumblr_odg4sv0r3Z1s58ev6o1.mp3" type="audio/mpeg">Again, it looks like you're browser doesn't support audio, so you can <a href="https://static.wikia.nocookie.net/undertale/images/6/64/Undertale_%28Soundtrack%29_music_unused.ogg">download the song</a> to listen to it. </audio>
<p>Undertale is an amazing game. I really enjoyed my time playing it. I listen to the sound track a lot(I'm doing it as I write this). I even read a fanmade <a href="https://undertale-au.fandom.com/wiki/Category:AUs">AU</a> called <a href="https://invertedfate.com/chapters">Inverted Fate</a>. The only thing that I haven't done(and don't intend on doing) is a <a href="https://undertale.fandom.com/wiki/Genocide_Route">Genocide Run</a>. But, there's one thing that's kinda been bugging me since it first found out about it. It's the fact that their's a version of <a href="https://undertale.fandom.com/wiki/Undertale_(Soundtrack)">Undertale(the song)</a> that wasn't added, and instead was replaced with the version we have now.</p><h1>The Current Version</h1><p>The version we got of Undertale was a pretty good one. It's a little sad, while also filled with hope(just like the monsters in the neutral route. It is kinda the song of their hope, since it only plays during the end of the neutral route). Below is the version we got in the game.</p><audio controls="true"><source src="https://static.wikia.nocookie.net/undertale/images/6/66/Undertale_%28Soundtrack%29_music_1.ogg" type="audio/ogg" /><source src="https://ia902907.us.archive.org/29/items/undertaleost_202004/Undertale%20-%20Lossless%20Soundtrack%20%28toby%20fox%29/toby%20fox%20-%20UNDERTALE%20Soundtrack%20-%2071%20Undertale.mp3" type="audio/mpeg" /><source src="https://ia802907.us.archive.org/29/items/undertaleost_202004/Undertale%20-%20Lossless%20Soundtrack%20%28toby%20fox%29/toby%20fox%20-%20UNDERTALE%20Soundtrack%20-%2071%20Undertale.flac" type="audio/flac" />It looks like your browser doesn't support the audio tag. <a href="https://static.wikia.nocookie.net/undertale/images/6/66/Undertale_%28Soundtrack%29_music_1.ogg">This is a link to the audio so that you can download it if you so choose.</a></audio><h1>The One that could have been</h1><p>This one is also greate, and I personally think I like it a lot better than the one we have. I feel like it's more happy in tone. Even if it might not fit with what the game would have been trying to fit it's context into, it's still a good song on it's own.</p><audio controls="true"><source src="https://static.wikia.nocookie.net/undertale/images/6/64/Undertale_%28Soundtrack%29_music_unused.ogg" type="audio/ogg" /><source src="https://a.tumblr.com/tumblr_odg4sv0r3Z1s58ev6o1.mp3" type="audio/mpeg" />Again, it looks like you're browser doesn't support audio, so you can <a href="https://static.wikia.nocookie.net/undertale/images/6/64/Undertale_%28Soundtrack%29_music_unused.ogg">download the song</a> to listen to it. </audio>
blog-posts/checkbox-custom-styles.md
@@ -2,4 +2,4 @@
title: Customize an HTML Checkbox
date: 2022 Feb 19
---
<p>Checkboxes are hard to style. But when you're making a website, they may look ugly.</p><input type="checkbox" style="appearance:checkbox"><p>As you can see here, this bland checkbox does not fit into my clearly great website(/s). But really, it does not fit in at all.</p><p>The first step toward styling it how we want it is to give it an appearence of none, and a width and height that are what you want.</p><div class="code-container"><div class="code">input[type="checkbox"] {<div style="margin-left:1em">appearance: none;<br>width: 15px;<br>height: 15px;</div>}</div><div class="preview"><input type="checkbox" style="appearance:none;width:15px;height:15px"></div></div><p>Now we can do whatever we want to it. Also, remeber to add a checked pseudo</p><div class="code-container"><div class="code">input[type="checkbox"] {<div style="margin-left:1em">appearance: none;<br>width: 15px;<br>height: 15px;<br>background: #555;<br>border: 1px #252525 solid;<br>border-radius: 2px;</div>}<br><br>input[type="checkbox"]:checked {<div style="margin-left:1em">background: #ce5aff;</div>}</div><div class="preview"><style>input[type="checkbox"].examplecheckbox3_:checked {background: #ce5aff;}input[type="checkbox"].examplecheckbox3_ {background: #555;}</style><input type="checkbox" class="examplecheckbox3_" style="appearance:none;width:15px;height:15px;border-radius:2px;border:1px #252525 solid"></div></div>
<p>Checkboxes are hard to style. But when you're making a website, they may look ugly.</p><input type="checkbox" style="appearance:checkbox" /><p>As you can see here, this bland checkbox does not fit into my clearly great website(/s). But really, it does not fit in at all.</p><p>The first step toward styling it how we want it is to give it an appearence of none, and a width and height that are what you want.</p><div class="code-container"><div class="code">input[type="checkbox"] {<div style="margin-left:1em">appearance: none;<br />width: 15px;<br />height: 15px;</div>}</div><div class="preview"><input type="checkbox" style="appearance:none;width:15px;height:15px"/></div></div><p>Now we can do whatever we want to it. Also, remeber to add a checked pseudo</p><div class="code-container"><div class="code">input[type="checkbox"] {<div style="margin-left:1em">appearance: none;<br />width: 15px;<br />height: 15px;<br />background: #555;<br />border: 1px #252525 solid;<br />border-radius: 2px;</div>}<br /><br />input[type="checkbox"]:checked {<div style="margin-left:1em">background: #ce5aff;</div>}</div><div class="preview"><style>input[type="checkbox"].examplecheckbox3_:checked {background: #ce5aff;}input[type="checkbox"].examplecheckbox3_ {background: #555;}</style><input type="checkbox" class="examplecheckbox3_" style="appearance:none;width:15px;height:15px;border-radius:2px;border:1px #252525 solid"/></div></div>
blog-posts/creating_a_theme_switch.md
@@ -2,4 +2,4 @@
title: Creating a simple theme switcher
date: 2021 Dec 08
---
This is a simple tutorial on how to make a simple theme switcher.<h1 id="step1">Step 1: Creating the themes</h1><p>The first step is to create the themes in your stylesheet, you can have as many as you want. Just make sure to remeber all their names within your CSS.</p><h1 id="step2">Step 2: Making an array</h1><p>This is why you need to remeber all their names within the CSS. You need to add them all to an array in your JS. Below is an example of an array containing some themes.</p><div class="code">const themes = ["light", "dark", "gamer"]</div><h1 id="step3">Step 3: Switching themes</h1><p>This is the part you've been waiting for! The actual content switcher. It's surprisingly simple.</p><p>First, get the index of the current theme using <span class="code">let currentTheme = themes.indexOf(document.documentElement.className)</span>. Then, use an if statement to see if it's more than or equal to the length of the array containing your themes.</p><div class="code">if (currentTheme + 1 >= themes.length) {<div style="margin-left:1em">document.documentElement.className = themes[0]</div>} else {<div style="margin-left:1em">document.documentElement.className = themes[currentTheme + 1]</div>}</div>Now just add a listener to the button(using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listener</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">getElement.onclick</a>, or <a href="https://www.w3schools.com/TAgs/att_onclick.asp">onclick</a>)<h1 id="finished">Final Product</h1>In the end, what you just made should look something like the iFrame below.<br><iframe id="finalProduct" srcdoc='<!doctype html><html class="light"><head><style>html.light {background: #fff;color: #000;--buttonBackground: #fefefe;--buttonBorder: #ccc;--buttonColor: #001;}html.dark {background: #000;color: #fff;--buttonBackground: #101010;--buttonBorder: #333;--buttonColor: #fff;}html.gamer {background: #f00;color: #00f;--buttonBackground: #050;--buttonBorder: #0a0;--buttonColor: #0f0;}button {background: var(--buttonBackground);border: var(--buttonBorder) solid 3px;color: var(--buttonColor);}</style></head><body><button id="themeSwitch">Switch Theme</button><br>This is epic!<script type="application/javascript">const themes = ["light", "dark", "gamer"];document.getElementById("themeSwitch").onclick = () => {let curTheme = themes.indexOf(document.documentElement.className);if (curTheme + 1 >= themes.length) {document.documentElement.className = themes[0]} else {document.documentElement.className = themes[curTheme + 1]}}</script></body></html>' style="border:none"></iframe>
This is a simple tutorial on how to make a simple theme switcher.<h1 id="step1">Step 1: Creating the themes</h1><p>The first step is to create the themes in your stylesheet, you can have as many as you want. Just make sure to remeber all their names within your CSS.</p><h1 id="step2">Step 2: Making an array</h1><p>This is why you need to remeber all their names within the CSS. You need to add them all to an array in your JS. Below is an example of an array containing some themes.</p><div class="code">const themes = ["light", "dark", "gamer"]</div><h1 id="step3">Step 3: Switching themes</h1><p>This is the part you've been waiting for! The actual content switcher. It's surprisingly simple.</p><p>First, get the index of the current theme using <span class="code">let currentTheme = themes.indexOf(document.documentElement.className)</span>. Then, use an if statement to see if it's more than or equal to the length of the array containing your themes.</p><div class="code">if (currentTheme + 1 >= themes.length) {<div style="margin-left:1em">document.documentElement.className = themes[0]</div>} else {<div style="margin-left:1em">document.documentElement.className = themes[currentTheme + 1]</div>}</div>Now just add a listener to the button(using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listener</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">getElement.onclick</a>, or <a href="https://www.w3schools.com/TAgs/att_onclick.asp">onclick</a>)<h1 id="finished">Final Product</h1>In the end, what you just made should look something like the iFrame below.<br /><iframe id="finalProduct" src="data:text/html;base64,PCFkb2N0eXBlIGh0bWw+PGh0bWwgY2xhc3M9ImxpZ2h0Ij48aGVhZD48c3R5bGU+aHRtbC5saWdodCB7YmFja2dyb3VuZDogI2ZmZjtjb2xvcjogIzAwMDstLWJ1dHRvbkJhY2tncm91bmQ6ICNmZWZlZmU7LS1idXR0b25Cb3JkZXI6ICNjY2M7LS1idXR0b25Db2xvcjogIzAwMTt9aHRtbC5kYXJrIHtiYWNrZ3JvdW5kOiAjMDAwO2NvbG9yOiAjZmZmOy0tYnV0dG9uQmFja2dyb3VuZDogIzEwMTAxMDstLWJ1dHRvbkJvcmRlcjogIzMzMzstLWJ1dHRvbkNvbG9yOiAjZmZmO31odG1sLmdhbWVyIHtiYWNrZ3JvdW5kOiAjZjAwO2NvbG9yOiAjMDBmOy0tYnV0dG9uQmFja2dyb3VuZDogIzA1MDstLWJ1dHRvbkJvcmRlcjogIzBhMDstLWJ1dHRvbkNvbG9yOiAjMGYwO31idXR0b24ge2JhY2tncm91bmQ6IHZhcigtLWJ1dHRvbkJhY2tncm91bmQpO2JvcmRlcjogdmFyKC0tYnV0dG9uQm9yZGVyKSBzb2xpZCAzcHg7Y29sb3I6IHZhcigtLWJ1dHRvbkNvbG9yKTt9PC9zdHlsZT48L2hlYWQ+PGJvZHk+PGJ1dHRvbiBpZD0idGhlbWVTd2l0Y2giPlN3aXRjaCBUaGVtZTwvYnV0dG9uPjxiciAvPlRoaXMgaXMgZXBpYyE8c2NyaXB0IHR5cGU9ImFwcGxpY2F0aW9uL2phdmFzY3JpcHQiPmNvbnN0IHRoZW1lcyA9IFsibGlnaHQiLCAiZGFyayIsICJnYW1lciJdO2RvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJ0aGVtZVN3aXRjaCIpLm9uY2xpY2sgPSAoKSA9Jmd0OyB7bGV0IGN1clRoZW1lID0gdGhlbWVzLmluZGV4T2YoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsYXNzTmFtZSk7aWYgKGN1clRoZW1lICsgMSAmZ3Q7PSB0aGVtZXMubGVuZ3RoKSB7ZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsYXNzTmFtZSA9IHRoZW1lc1swXX0gZWxzZSB7ZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsYXNzTmFtZSA9IHRoZW1lc1tjdXJUaGVtZSArIDFdfX08L3NjcmlwdD48L2JvZHk+PC9odG1sPg==" style="border:none"></iframe>
blog-posts/creatingaswitch.md
@@ -2,4 +2,4 @@
title: Creating a Switch in HTML and CSS
date: 2022 Feb 11
---
<p>A switch is something that is basically just a nicer checkbox. Here, I'll be showing you how to make one.</p>The first step is to create checkbox with any classname; I'll be using <span class="code">switch</span>.<div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {}</div></style><br><input type="checkbox" class="switch"></div><p>Next step is to add an appearance of none to the CSS--make sure to add <span class="code">-moz-</span> and <span class="code">-webkit-</span>. After that, you're going to want to set it so that the checkbox a rectangle--make sure it's in <span class="code">px</span>. We also want to set the position to relative</p><div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {<div style="margin-left:1em;">-webkit-appearance: none;<br>-moz-appearance: none;<br>appearance: none;<br>position: relative;<br>width: 30px;<br>height: 16px;</div>}</div></style><br><input type="checkbox" class="switch"></div><p>Next we want to create a <span class="code">::before</span> pseudo. In there we want to make it have a position of relative, a width and height that are abit less than the height of the main switch, a display of inline-block, a top and left of 0, a content of anything, color of transparent, and a background color that's different from the one in the main switch.</p><div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {<div style="margin-left:1em;">-webkit-appearance: none;<br>-moz-appearance: none;<br>appearance: none;<br>position: relative;<br>width: 30px;<br>height: 16px;</div>}<br>input[type=checkbox].switch::before {<div style="margin-left:1em;">top: 0;<br>left: 0;<br>position: relative;<br>background: red;<br>content: ".";<br>color: transparent;<br>width: 14px;<br>height: 14px;</div>}</div></style><br><input type="checkbox" class="switch"></div><p>Finally add a pseudo called <span class="code">:checked</span> which checks if a checkbox, or a radio, was checked; you'll want to change the before pseudo if the the checkbox is checked. You need to set the left to a bit less than the width of the checkbox; you can adjust it until it looks right to you.</p>Now, let's look at what it looks like<br><iframe style="background:#fff;border:none" srcdoc='<style>input[type=checkbox].switch {-webkit-appearance: none;-moz-appearance: none;appearance: none;background: #efefef;position: relative;border: 1px black solid;width: 30px;height: 16px;border-radius: 0;}input[type=checkbox].switch::before {top: 0;left: 0.24px;position: relative;background: red;content: ".";color: transparent;width: 20px;height: 14px;}input[type=checkbox].switch:checked::before {left: 25px;}</style><input type="checkbox" class="switch">'></iframe>
<p>A switch is something that is basically just a nicer checkbox. Here, I'll be showing you how to make one.</p>The first step is to create checkbox with any classname; I'll be using <span class="code">switch</span>.<div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {}</div></style><br /><input type="checkbox" class="switch"></div><p>Next step is to add an appearance of none to the CSS--make sure to add <span class="code">-moz-</span> and <span class="code">-webkit-</span>. After that, you're going to want to set it so that the checkbox a rectangle--make sure it's in <span class="code">px</span>. We also want to set the position to relative</p><div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {<div style="margin-left:1em;">-webkit-appearance: none;<br />-moz-appearance: none;<br />appearance: none;<br />position: relative;<br />width: 30px;<br />height: 16px;</div>}</div></style><br /><input type="checkbox" class="switch"></div><p>Next we want to create a <span class="code">::before</span> pseudo. In there we want to make it have a position of relative, a width and height that are abit less than the height of the main switch, a display of inline-block, a top and left of 0, a content of anything, color of transparent, and a background color that's different from the one in the main switch.</p><div class="code"><style><div style="margin-left:1em;">input[type=checkbox].switch {<div style="margin-left:1em;">-webkit-appearance: none;<br />-moz-appearance: none;<br />appearance: none;<br />position: relative;<br />width: 30px;<br />height: 16px;</div>}<br />input[type=checkbox].switch::before {<div style="margin-left:1em;">top: 0;<br />left: 0;<br />position: relative;<br />background: red;<br />content: ".";<br />color: transparent;<br />width: 14px;<br />height: 14px;</div>}</div></style><br /><input type="checkbox" class="switch"></div><p>Finally add a pseudo called <span class="code">:checked</span> which checks if a checkbox, or a radio, was checked; you'll want to change the before pseudo if the the checkbox is checked. You need to set the left to a bit less than the width of the checkbox; you can adjust it until it looks right to you.</p>Now, let's look at what it looks like<br /><iframe style="background:#fff;border:none" src="data:text/html;base64,PHN0eWxlPmlucHV0W3R5cGU9Y2hlY2tib3hdLnN3aXRjaCB7LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lOy1tb3otYXBwZWFyYW5jZTogbm9uZTthcHBlYXJhbmNlOiBub25lO2JhY2tncm91bmQ6ICNlZmVmZWY7cG9zaXRpb246IHJlbGF0aXZlO2JvcmRlcjogMXB4IGJsYWNrIHNvbGlkO3dpZHRoOiAzMHB4O2hlaWdodDogMTZweDtib3JkZXItcmFkaXVzOiAwO31pbnB1dFt0eXBlPWNoZWNrYm94XS5zd2l0Y2g6OmJlZm9yZSB7dG9wOiAwO2xlZnQ6IDAuMjRweDtwb3NpdGlvbjogcmVsYXRpdmU7YmFja2dyb3VuZDogcmVkO2NvbnRlbnQ6ICIuIjtjb2xvcjogdHJhbnNwYXJlbnQ7d2lkdGg6IDIwcHg7aGVpZ2h0OiAxNHB4O31pbnB1dFt0eXBlPWNoZWNrYm94XS5zd2l0Y2g6Y2hlY2tlZDo6YmVmb3JlIHtsZWZ0OiAyNXB4O308L3N0eWxlPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2xhc3M9InN3aXRjaCI+"></iframe>
blog-posts/symbols.md
@@ -1,5 +0,0 @@
---
title: Symbols
date: 2021 Oct 10
---
In our lifes on the internet, we see alot of characters that we don't normally see. Like @, #, &, [], {}, \, ;, and |. But what are thier names, what are their origins, and why do they look like they do? I'm going to try and find out!<br>Let's start with what they are used for most of the time on the web.<ol><li>@ is used to mean at. It can also be used to define a username(<span style="font-weight:bold">@</span>user), or even emails(person<span style="font-weight:bold">@</span>emailprovider.topleveldomain)</li><li>The hashtag, #, is used for tagging posts to topics(<span style="font-weight:bold">#</span>NumberOneProgrammer). It is also sometimes used to define a number(<span style="font-weight:bold">#</span>1). It's also used in CSS to define IDs, and in urls to scroll down to a certain part of the page(<span style="font-weight:bold">#</span>theMan).</li><li>& is a symbol used to mean "and"(the dog <span style="font-weight:bold">&</span> the cat). It is also used in urls to be an addition to the search(?q=look%20mom%20no%hands%21<span style="font-weight:bold">&</span>images)</li><li>Square brackets([]), are used to define a list in the most widely used programming language on the web, JavaScript(<span style="font-weight:bold">[</span>"the dog", "the cat", "the bird", "the plane"<span style="font-weight:bold">]</span>). They can also be used in the middle of quotes to give context("Have a nice day!" <span style="font-weight:bold">[</span>The mayor<span style="font-weight:bold">]</span> shouted)</li><li>Curly brackets({}) are used to define a JavaScript object( {person: "Jim", car: "JavaScript car :)"} )</li><li>backslash(\) is used in markdown, and JavaScript strings, to define a character that should remain itself, such as <span style="font-weight:bold">\</span># showing up as a # instead of a heading.</li><li>Semi-collins(;) are used to define the end of a command in lots of programming languages, like JavaScript(alert("hello world")<span style="font-weight:bold">;</span>), PHP(echo "hello world"<span style="font-weight:bold">;</span>)</li><li>|, or Vertical bar, has no <em>real</em> use on the web.</li><li>~, or tilde, also, doesn't find much use</li><li>Grave accents(`) are used to define a multi-lined JavaScript string(<span style="font-weight:bold">`</span>this has<br>2 lines<span style="font-weight:bold">`</span>)</li></ol>Those are what they are, but what about their original meanings?<ol><li>The At-Sign(@) is used to mean at(they're <span style="font-weight:bold">@</span> their house), it could also be used for a price(<span style="font-weight:bold">@</span>10 pence)</li><li>#(pound-sign, hashtag, number-sign, octothorpe, sharp-sign), it's used to mean lb(10 <span style="font-weight:bold">#</span>), define numbers(<span style="font-weight:bold">#</span>10), define a tag in social media(<span style="font-weight:bold">#</span>NumberOneCoder), to define the musical notes that are sharp, or used on telephones to do... something.</li><li>Ampersands(&) are used as &, that's it(doges <span style="font-weight:bold">&</span> golden retrievers).</li><li>[Square Brackets] are used as a way to add context to the middle of a sentence, like "he ate the sausage", but we don't know who "he" is, and what kind of sausage he is eating, so it should be "<span style="font-weight:bold">[the young boy]</span> ate the <span style="font-weight:bold">[cheese filled]</span> sausage"</li><li>{Curly Brackets} don't get much use. They would be used for <span style="font-weight:bold">{</span>defining words, lines, sentences as being in a group<span style="font-weight:bold">}</span>.</li><li>|s are used to define absolute value, like <span style="font-weight:bold">|-2|</span> = 2. It can also be used as a replacement for periods, and forward slashed</li><li>The backslash doesn't get much real use in writing. In math, it is used to represent the set difference(which I won't really explain), such as a<span style="font-weight:bold">\</span>n</li><li>The Semicolon is used to seperate ideas in a sentence filled with commas, add seperation between an explaination<span style="font-weight:bold">; and a seperator(,) in a list, and merge 2 sentences together without a compound(and, but, or). Such as "I am so happy for them, and I am proud" & "I am so happy; I am proud." act the same. If you'd like a better explaination, I'd suggest you to check out <a href="https://youtu.be/th-zyfvwDdI">How to use a semicolon</a> by Ted-Ed, it's a great whatch, and it's presented in an interesting and fun style.</li><li>Grave accents(`) are used in some words from other languages, but not much in English. However it can be used in songs and poems to indicate that silent letters aren't silent.</li><li>Tildes(~) can be used in a sentence to mean about, for example, <span style="font-weight:bold">~</span>10.</li></ol>
symbols.md
@@ -0,0 +1,5 @@
---
title: Symbols
date: 2021 Oct 10
---
In our lifes on the internet, we see alot of characters that we don't normally see. Like @, #, &, [], {}, \, ;, and |. But what are thier names, what are their origins, and why do they look like they do? I'm going to try and find out!<br />Let's start with what they are used for most of the time on the web.<ol><li>@ is used to mean at. It can also be used to define a username(<span style="font-weight:bold">@</span>user), or even emails(person<span style="font-weight:bold">@</span>emailprovider.topleveldomain)</li><li>The hashtag, #, is used for tagging posts to topics(<span style="font-weight:bold">#</span>NumberOneProgrammer). It is also sometimes used to define a number(<span style="font-weight:bold">#</span>1). It's also used in CSS to define IDs, and in urls to scroll down to a certain part of the page(<span style="font-weight:bold">#</span>theMan).</li><li>& is a symbol used to mean "and"(the dog <span style="font-weight:bold">&</span> the cat). It is also used in urls to be an addition to the search(?q=look%20mom%20no%hands%21<span style="font-weight:bold">&</span>images)</li><li>Square brackets([]), are used to define a list in the most widely used programming language on the web, JavaScript(<span style="font-weight:bold">[</span>"the dog", "the cat", "the bird", "the plane"<span style="font-weight:bold">]</span>). They can also be used in the middle of quotes to give context("Have a nice day!" <span style="font-weight:bold">[</span>The mayor<span style="font-weight:bold">]</span> shouted)</li><li>Curly brackets({}) are used to define a JavaScript object( {person: "Jim", car: "JavaScript car :)"} )</li><li>backslash(\) is used in markdown, and JavaScript strings, to define a character that should remain itself, such as <span style="font-weight:bold">\</span># showing up as a # instead of a heading.</li><li>Semi-collins(;) are used to define the end of a command in lots of programming languages, like JavaScript(alert("hello world")<span style="font-weight:bold">;</span>), PHP(echo "hello world"<span style="font-weight:bold">;</span>)</li><li>|, or Vertical bar, has no <em>real</em> use on the web.</li><li>~, or tilde, also, doesn't find much use</li><li>Grave accents(`) are used to define a multi-lined JavaScript string(<span style="font-weight:bold">`</span>this has<br />2 lines<span style="font-weight:bold">`</span>)</li></ol>Those are what they are, but what about their original meanings?<ol><li>The At-Sign(@) is used to mean at(they're <span style="font-weight:bold">@</span> their house), it could also be used for a price(<span style="font-weight:bold">@</span>10 pence)</li><li>#(pound-sign, hashtag, number-sign, octothorpe, sharp-sign), it's used to mean lb(10 <span style="font-weight:bold">#</span>), define numbers(<span style="font-weight:bold">#</span>10), define a tag in social media(<span style="font-weight:bold">#</span>NumberOneCoder), to define the musical notes that are sharp, or used on telephones to do... something.</li><li>Ampersands(&) are used as &, that's it(doges <span style="font-weight:bold">&</span> golden retrievers).</li><li>[Square Brackets] are used as a way to add context to the middle of a sentence, like "he ate the sausage", but we don't know who "he" is, and what kind of sausage he is eating, so it should be "<span style="font-weight:bold">[the young boy]</span> ate the <span style="font-weight:bold">[cheese filled]</span> sausage"</li><li>{Curly Brackets} don't get much use. They would be used for <span style="font-weight:bold">{</span>defining words, lines, sentences as being in a group<span style="font-weight:bold">}</span>.</li><li>|s are used to define absolute value, like <span style="font-weight:bold">|-2|</span> = 2. It can also be used as a replacement for periods, and forward slashed</li><li>The backslash doesn't get much real use in writing. In math, it is used to represent the set difference(which I won't really explain), such as a<span style="font-weight:bold">\</span>n</li><li>The Semicolon is used to seperate ideas in a sentence filled with commas, add seperation between an explaination<span style="font-weight:bold">; and a seperator(,) in a list, and merge 2 sentences together without a compound(and, but, or). Such as "I am so happy for them, and I am proud" & "I am so happy; I am proud." act the same. If you'd like a better explaination, I'd suggest you to check out <a href="https://youtu.be/th-zyfvwDdI">How to use a semicolon</a> by Ted-Ed, it's a great whatch, and it's presented in an interesting and fun style.</li><li>Grave accents(`) are used in some words from other languages, but not much in English. However it can be used in songs and poems to indicate that silent letters aren't silent.</li><li>Tildes(~) can be used in a sentence to mean about, for example, <span style="font-weight:bold">~</span>10.</li></ol>