XML 1.0 document, Unicode text, UTF-8 text, with very long lines (945)
1
<?xml version="1.0" encoding="UTF-8"?>
2
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/">
3
<id>https://steve0greatness.github.io/blog/</id>
4
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/" />
5
<link type="application/atom+xml" rel="self" href="https://steve0greatness.github.io/blog/feed.atom" />
6
<title>Steve0Greatness' Blog</title>
7
<subtitle>A blog by a human being</subtitle>
8
<author>
9
<name>Steve0Greatness</name>
10
<uri>https://steve0greatness.github.io</uri>
11
</author>
12
<generator>Custom w/Jinja</generator>
13
<updated>2024-03-13T00:00:00Z</updated>
14
15
<entry>
16
<title>About my Username</title>
17
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/name.html" />
18
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/name.txt" />
19
<content type="html">
20
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/name.html">read this article online</a>,</p>
21
<p>There's a lot of information about my username. So I thought I'd make this blog post to explain basically everything about it.</p>
22
<h2 id="pronounciation">Pronounciation</h2>
24
<p>The pronounciation is Steve (/stiːv/) Zero (/ˈzɪərəʊ/, /ˈzɪroʊ/, or /ˈziroʊ/) Greatness (/ˈɡɹeɪtnəs/). </p>
26
<p><audio controls="true">
28
<source src="/blog-files/Steve0Greatness-Pronounciation.oga" type="audio/ogg" />
29
Oh no! Your browser does not support audio controls. Maybe try <a href="/blog-files/Steve0Greatness-Pronounciation.oga">downloading the audio file</a>?
30
</audio></p>
31
<p>The above audio file was generated with <a href="https://github.com/espeak-ng/espeak-ng/">eSpeak</a>.</p>
33
<h2 id="history">History</h2>
35
<p>Fun fact: when it was still I around, I was fairly active on <a href="https://blocksworld.com/">Blocksworld</a>. If you don't know: Blocksworld is a sandbox, similar to <a href="https://scratch.mit.edu/">Scratch</a>, but in 3D.</p>
37
<p>On Blocksworld, I went by the username <em>Steve's Greatness</em>. This name was because I really liked Minecraft(hence the Steve) and the Greatness... is because I really liked Minecraft, and I thought it was great.</p>
39
<p>Eventually, when signing up for Scratch, to my dismay they didn't allow apostrophes or spaces. As a result: I decided to use a 0 inplace of the "'s ", hence the name: <em>Steve0Greatness</em>.</p>
41
<p>You can still see remnants of this name original name: my <a href="https://replit.com/@StevesGreatness">Replit username is <em>StevesGreatness</em></a>; and in 2020 I had made <a href="https://scratch.mit.edu/users/Steves_greatness">a new Scratch account</a>, with intentions of moving there.</p>
43
</content>
45
<id>https://steve0greatness.github.io/blog/name.html</id>
46
<published>2024-03-13T00:00:00Z</published>
47
<updated>2024-03-13T00:00:00Z</updated>
48
</entry>
49
50
<entry>
51
<title>My HTML Tag Ranking</title>
52
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/html-tag-ranking.html" />
53
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/html-tag-ranking.txt" />
54
<content type="html">
55
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/html-tag-ranking.html">read this article online</a>,</p>
56
<p>I like HTML. I recently found a video of <a href="t3.gg">Theo</a> ranking HTML tags with a tierlist, the video is available on YouTube(<a href="https://youtu.be/EtYtYnhxeNc">URL</a>), and the tierlist is on TierMaker(<a href="https://tiermaker.com/create/html-elements-16095055">URL</a>). Without further ado, here is how I ranked all* HTML elements.</p>
57
<p><img src="/blog-files/HTML_tierlist.png" style="width: 97%; height: auto" alt="S: h1, html, ul, link, details, summary, form, title, kbd, a, main, p, b, head, body, img, meta, br, footer, label, input; A: track, blockquote, q, h2, h3, hr svg, tfoot, i, u, textarea, style, code, tbody, optgroup, th, tr, option, select, pre, datalist, s, nav, td, em, iframe, embed, video, dialog, button, mark, ol, noscript, table, article, header, col, field, figcaption, samp, thead, area, colgroup; B: sup, progress, sub, h4, cite, strong, strike, picture, audio, h5, source, h6, canvas, abbr, script, caption; C: figure, math, wbr, hgroup, section, div, small, center, span, template; D: data, object, slot, marquee" /></p>
59
</content>
61
<id>https://steve0greatness.github.io/blog/html-tag-ranking.html</id>
62
<published>2024-02-14T00:00:00Z</published>
63
<updated>2024-02-21T00:00:00Z</updated>
64
</entry>
65
66
<entry>
67
<title>My blog is now in one place</title>
68
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/singular-blog.html" />
69
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/singular-blog.txt" />
70
<content type="html">
71
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/singular-blog.html">read this article online</a>,</p>
72
<p>Alright, I've now moved all my full blog posts over to this one website. There might be other I miss in other places, but I'll add them here soon. I will not be moving over my micro-blogs, however. Those are too small, and I'd rather keep those separated anyway.</p>
73
<p>I'm not a fan of how I wrote before December of 2022, everything there is filled with spelling mistakes and grammar issues, I also think most of it was rude towards the reader, which is not a good impression.</p>
75
</content>
77
<id>https://steve0greatness.github.io/blog/singular-blog.html</id>
78
<published>2024-01-01T00:00:00Z</published>
79
<updated>2024-01-01T00:00:00Z</updated>
80
</entry>
81
82
<entry>
83
<title>How to Store a Passwords</title>
84
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/How-to-Store-Passwords.html" />
85
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/How-to-Store-Passwords.txt" />
86
<content type="html">
87
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/How-to-Store-Passwords.html">read this article online</a>,</p>
88
<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>
89
<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>
91
<p>Basically, it's just this sequence of steps:</p>
93
<ul>
95
<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>
96
<li>Prepend(or append, it doesn't matter, just keep it consistent) this to the user's password</li>
97
<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>
98
<li>Store the salt and hash in the same place, <em>do not</em> store the password on it's own.</li>
99
</ul>
100
<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>
102
<h2 id="why-do-this">Why Do <em>This</em>?</h2>
104
<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>
106
<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>
108
<h3 id="plaintext-passwords">Plaintext Passwords</h3>
110
<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>
112
<h3 id="encrypted-passwords">Encrypted Passwords</h3>
114
<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>
116
<h3 id="bare-hashing">Bare Hashing</h3>
118
<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>
120
<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>
122
</content>
124
<id>https://steve0greatness.github.io/blog/How-to-Store-Passwords.html</id>
125
<published>2023-11-02T00:00:00Z</published>
126
<updated>2023-11-02T00:00:00Z</updated>
127
</entry>
128
129
<entry>
130
<title>Satisfactory Concept: Farming</title>
131
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/satisfactory-farming-idea.html" />
132
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/satisfactory-farming-idea.txt" />
133
<content type="html">
134
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/satisfactory-farming-idea.html">read this article online</a>,</p>
135
<p>Here is my idea for automating the collection of healing materials(such as Beryl Nuts) in Satisfactory</p>
136
<h2 id="plant-pods">Plant Pods</h2>
138
<p>Plant pods would be researchable in the Nutrients section of the MAM. It would cost:</p>
140
<ul>
142
<li>5 modular frames </li>
143
<li>10 steel pipes</li>
144
<li>20 biofuel</li>
145
</ul>
146
<p>to research.</p>
148
<p>You'd be able to build it in a new <em>Farming</em> section in the production category of the build menu. It would cost the user:</p>
150
<ul>
152
<li>4 steel pipes</li>
153
<li>2 quickwire</li>
154
<li>5 biofuel</li>
155
</ul>
156
<p>to build. It would require 1 MW of power to function. Plants that are left without power while in there will not continue growing or providing harvest, however they will not die(that'd be annoying if they did).</p>
158
<p>The user would be able to interact with the planting pod to bring up a menu that tells them what stage of growing it's at(baby, growing, fully grown), how ripe for harvest the plant is(out of 3 states: none, starting, ripe). The UI will have a button to harvest at the bottom, and a box that will allow the plant to be exchanged for another--which would give you a few leaves, proportional to how long it's been growing(0 if baby, 4 if growing, 10 if fully grown), and the amount of fruit they would have gotten from the harvest + 1 extra(for the fruit they put in).</p>
160
<h2 id="robot-farmers">Robot Farmers</h2>
162
<p>Researchable under the <em>Crystal Oscillator</em>. The research cost is:</p>
164
<ul>
166
<li>10 Crystal Oscillators</li>
167
<li>5 AI limiter</li>
168
<li>3 quickwire</li>
169
</ul>
170
<p>These little farmers need power to survive, which is why the <em>ROBOT charger</em> is unlocked with them.
172
This building can be built in the power section. They cost:</p>
173
<ul>
175
<li>15 quickwire</li>
176
<li>2 modular frames</li>
177
<li>5 crystal oscillators</li>
178
</ul>
179
<p>to build.</p>
181
<p>Once built, this building acts like the truck station, but instead of coal, it loads power, and it can only unload items from the bot's inventory.</p>
183
<p>The Robo-Farmer is then buildable under the <em>Farming</em> section in the production category of the build menu. It costs:</p>
185
<ul>
187
<li>1 Factory Cart</li>
188
<li>2 Crystal Oscillators</li>
189
<li>1 AI limiter</li>
190
<li>3 quickwire</li>
191
<li>5 steal pipes</li>
192
</ul>
193
<p>to build.</p>
195
<p>These little robots have themselves a little UI that allows you to select items they should farm. Once given a task, these robots will always return to the nearest <em>ROBOT charger</em> when their inventory is full, or they are running low on power(robots will always attempt to keep themselves powered). If the robot cannot find a plant within range that is harvestable, then the they will wait until there is one. </p>
197
<h2 id="getting-the-most-out-of-these-resources">Getting the most out of these resources</h2>
199
<p>Robot Farmers are best at traversing on foundations(they spend less power). As such, it is recommended, that the player create a flat platform that has plant pods with some space between for the bots to traverse between them. In the center, the player should build a <em>ROBOT charger</em>, as it will allow the robots the run around equally in each direction. Players should also utilize the <em>Conveyor Lift</em> to bring materials to a layer above for sorting, or other purposes.</p>
201
</content>
203
<id>https://steve0greatness.github.io/blog/satisfactory-farming-idea.html</id>
204
<published>2023-04-16T00:00:00Z</published>
205
<updated>2024-03-24T00:00:00Z</updated>
206
</entry>
207
208
<entry>
209
<title>TF2 disguise Command</title>
210
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/tf2-disguise-cmd.html" />
211
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/tf2-disguise-cmd.txt" />
212
<content type="html">
213
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/tf2-disguise-cmd.html">read this article online</a>,</p>
214
<p>A Spy class-specific command</p>
215
<h2 id="layout">Layout</h2>
217
<p>The basic layout of the disguise command is very simple.</p>
219
<pre><code>disguise [class] [team]
221
</code></pre>
222
<h2 id="class-parameter"><code>class</code> Parameter</h2>
224
<p><code>1</code> : Scout</p>
226
<p><code>2</code> : Sniper</p>
228
<p><code>3</code> : Soldier</p>
230
<p><code>4</code> : Demoman</p>
232
<p><code>5</code> : Medic</p>
234
<p><code>6</code> : Heavy</p>
236
<p><code>7</code> : Pyro</p>
238
<p><code>8</code> : Spy</p>
240
<p><code>9</code> : Engineer</p>
242
<p>The reason the classes are in this order is that they were added in that order. As mentioned in <a href="https://wiki.teamfortress.com/wiki/Team_Fortress#Versions"><em>Quake World Team Fortress</em> § Versions</a> on the Team Fortress wiki, it mentions the classes were added in the order of <em>scout</em>, <em>sniper</em>, <em>soldier</em>, <em>demoman</em>, and <em>medic</em>; then <em>heavy</em>; <em>pyro</em>; and finally <em>spy</em> and <em>engineer</em>.</p>
244
<h2 id="team-parameter"><code>team</code> Parameter</h2>
246
<p>These depend upon what team you're on.</p>
248
<p><code>-1</code> : Enemy Team</p>
250
<p><code>-2</code> : Friendly Team</p>
252
<h3 id="specific-teams">Specific Teams</h3>
254
<p>These aren't extremely useful, but they exist. They are independent of the team you're on. </p>
256
<p><code>1</code> : Blu Team</p>
258
<p><code>2</code> : Red Team</p>
260
<h2 id="example">Example</h2>
262
<p>Normally, when you disguise as a spy of your team, you undisguise. This also applies to the disguise command, allowing for an "undisguise" command.</p>
264
<pre><code>disguise "8" "-2"
266
</code></pre>
267
<p>You're also able to put this into a bind, allowing for an undisguise bind.</p>
269
</content>
271
<id>https://steve0greatness.github.io/blog/tf2-disguise-cmd.html</id>
272
<published>2022-12-17T00:00:00Z</published>
273
<updated>2024-01-17T00:00:00Z</updated>
274
</entry>
275
276
<entry>
277
<title>Fortress Forever on Linux!</title>
278
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/fortress-forever-on-linux.html" />
279
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/fortress-forever-on-linux.txt" />
280
<content type="html">
281
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/fortress-forever-on-linux.html">read this article online</a>,</p>
282
<p>Fortress Forever is finally playable fully on Linux using Proton-GE version 7-41, although there's a bug where if you change the settings then try to connect to a server: the game crashes. This issue, however, is very easily solved by rebooting the game.</p>
283
<p>If you need a quick rundown on how to download and install Proton-GE, <a href="https://youtu.be/B2LZ8nYd3Bw">I've made a video about that already</a>. It is technically about a different game, but the problem is still similar enough to apply pretty much the same steps.</p>
285
<p>It plays pretty well, the only problem is when a local server changes maps, and the font for some of the menus(and the chat) being very... bad looking. It's not the game's fault for the second one, however, it is still something that's annoying if you don't want to do too much tinkering(I was never able to fix it, though).</p>
287
<p>I'm glad to be able to play this great game on my (used to be) daily drive OS without having to open <a href="https://usebottles.com/">Bottles</a> every time I want to play Fortress Forever.</p>
289
<p>Whenever I'm playing Fortress Forever, I'm usually on <a href="https://www.gametracker.com/server_info/server2.maxcommunity.net:270150">MaxTF's Midwest server</a>. The reason why is that it's the server that I have the lowest ping on, still not <em>great</em> ping though.</p>
291
</content>
293
<id>https://steve0greatness.github.io/blog/fortress-forever-on-linux.html</id>
294
<published>2022-12-16T00:00:00Z</published>
295
<updated>2024-02-04T00:00:00Z</updated>
296
</entry>
297
298
<entry>
299
<title>MacOS Keyboard Navigation</title>
300
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/macos-page-tab-nav.html" />
301
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/macos-page-tab-nav.txt" />
302
<content type="html">
303
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/macos-page-tab-nav.html">read this article online</a>,</p>
304
<p>Ok, so I feel like a complete idiot right now.</p>
305
<p>I've been trying to use <kbd>Tab</kbd> to navigate webpages on my MacBook for what feels like forever now. Turns out, it was as simple as hitting <kbd><kbd>Ctrl</kbd>+<kbd>F7</kbd></kbd>.</p>
307
<p>To be honest, I thought that it was just an issue with FireFox, and then I read <a href="https://www.a11yproject.com/posts/macos-browser-keyboard-navigation/">Browser keyboard navigation in macOS</a> by <a href="https://scottvinkle.me/">Scott Vinkle</a> for <a href="https://www.a11yproject.com/">The A11Y Project</a> and realized that it was an issue with MacOS! This should really be enabled by default, but Apple is stupid.</p>
309
<p>Just thought I'd share this encase anyone else was having this issue.</p>
311
</content>
313
<id>https://steve0greatness.github.io/blog/macos-page-tab-nav.html</id>
314
<published>2022-02-26T00:00:00Z</published>
315
<updated>2024-02-14T00:00:00Z</updated>
316
</entry>
317
318
<entry>
319
<title>The FizzBuzz Program</title>
320
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/fizzbuzz.html" />
321
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/fizzbuzz.txt" />
322
<content type="html">
323
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/fizzbuzz.html">read this article online</a>,</p>
324
<p>A FizzBuzz Program is a program used in many job interviews to see if a programmer is good at problem solving. There are many ways to make one.</p>
325
<p>First let me tell you why I write these programs. These programs, at least in my opinion, are good when you're learning a new programming language. It gives you a problem to solve, and all you need to do to solve it. Incase you're wondering, the problem is to make a program that counts from 1 to 100 and replaces all multiples of 3 with Fizz, all multiples of 5 with Buzz, and multiples of both with FizzBuzz. Generally in interviews, they also ask you to add on more multiples, such as multiples of 7 are replaced with Fuzz, and multiples of 11 are replaced with Bizz.</p>
327
<p>Now that I've told you what a FizzBuzz Program is, let me show you how I make them in Python.</p>
329
<div class="codehilite">
331
<pre><span></span><code><span class="k">for</span> <span class="n">Index</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">100</span><span class="p">):</span>
332
<span class="n">Response</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span>
333
<span class="nb">print</span><span class="p">(</span><span class="n">Response</span><span class="p">)</span>
334
</code></pre>
335
</div>
336
<p>The first thing I do is I create a for loop, and within it I put a print statement and a variable named toPrint.</p>
338
<div class="codehilite">
340
<pre><span></span><code><span class="k">def</span> <span class="nf">FizzCompute</span><span class="p">(</span><span class="n">Number</span><span class="p">,</span> <span class="n">Divisor</span><span class="p">,</span> <span class="n">String</span><span class="p">):</span>
341
<span class="k">return</span> <span class="n">String</span> <span class="k">if</span> <span class="n">Number</span> <span class="o">%</span> <span class="n">Divisor</span> <span class="o">==</span> <span class="mi">0</span> <span class="k">else</span> <span class="s2">&quot;&quot;</span>
342
<span class="k">def</span> <span class="nf">SubstituteEmpty</span><span class="p">(</span><span class="n">String</span><span class="p">,</span> <span class="n">Number</span><span class="p">):</span>
344
<span class="k">return</span> <span class="n">String</span> <span class="k">if</span> <span class="n">String</span> <span class="o">!=</span> <span class="s2">&quot;&quot;</span> <span class="k">else</span> <span class="n">Number</span>
345
<span class="k">for</span> <span class="n">Index</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">100</span><span class="p">):</span>
347
<span class="n">Response</span> <span class="o">=</span> <span class="n">SubstituteEmpty</span><span class="p">(</span><span class="n">FizzCompute</span><span class="p">(</span><span class="n">Index</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="s2">&quot;Fizz&quot;</span><span class="p">)</span> <span class="o">+</span> <span class="n">FizzCompute</span><span class="p">(</span><span class="n">Index</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="s2">&quot;Buzz&quot;</span><span class="p">),</span> <span class="n">Index</span><span class="p">)</span>
348
<span class="nb">print</span><span class="p">(</span><span class="n">Response</span><span class="p">)</span>
349
</code></pre>
350
</div>
351
<p><details>
353
<summary>Output</summary>
354
<samp>1
355
2
356
Fizz
357
4
358
Buzz
359
Fizz
360
7
361
8
362
Fizz
363
Buzz
364
11
365
Fizz
366
13
367
14
368
FizzBuzz
369
16
370
17
371
Fizz
372
19
373
Buzz
374
Fizz
375
22
376
23
377
Fizz
378
Buzz
379
26
380
Fizz
381
28
382
29
383
FizzBuzz
384
31
385
32
386
Fizz
387
34
388
Buzz
389
Fizz
390
37
391
38
392
Fizz
393
Buzz
394
41
395
Fizz
396
43
397
44
398
FizzBuzz
399
46
400
47
401
Fizz
402
49
403
Buzz
404
Fizz
405
52
406
53
407
Fizz
408
Buzz
409
56
410
Fizz
411
58
412
59
413
FizzBuzz
414
61
415
62
416
Fizz
417
64
418
Buzz
419
Fizz
420
67
421
68
422
Fizz
423
Buzz
424
71
425
Fizz
426
73
427
74
428
FizzBuzz
429
76
430
77
431
Fizz
432
79
433
Buzz
434
Fizz
435
82
436
83
437
Fizz
438
Buzz
439
86
440
Fizz
441
88
442
89
443
FizzBuzz
444
91
445
92
446
Fizz
447
94
448
Buzz
449
Fizz
450
97
451
98
452
Fizz</samp>
453
</details></p>
454
<p>The next thing I do is I define a function that checks if one number is a multiple of another, and if it is, then it returns the string, otherwise, it returns an empty string.</p>
456
<p>Then I make a function that checks if a string is an empty one, if it is, then it returns a number.</p>
458
<p>Once I have these 2 functions, I go back into the for loop and make the <code>Response</code> variable have the variable for checking if a string is empty(and if it is replace it with a number) check if 2 of the other function that check if one number is a multiple of another(and if it is, return a string). Finally, it prints the output.</p>
460
<p>I've tried this method many times. Below are some examples of this method in action!</p>
462
<ul>
464
<li><a href="https://replit.com/@StevesGreatness/FizzBuzzKotlin">Kotlin</a></li>
465
<li><a href="https://replit.com/@StevesGreatness/FizzBuzzlua">Lua</a></li>
466
<li><a href="https://replit.com/@StevesGreatness/FizzBuzzpython">Python</a></li>
467
<li><a href="https://replit.com/@StevesGreatness/FizzBuzzRuby">Ruby</a></li>
468
</ul>
469
</content>
471
<id>https://steve0greatness.github.io/blog/fizzbuzz.html</id>
472
<published>2022-02-20T00:00:00Z</published>
473
<updated>2024-02-02T00:00:00Z</updated>
474
</entry>
475
476
<entry>
477
<title>Customize an HTML Checkbox</title>
478
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/checkbox-custom-styles.html" />
479
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/checkbox-custom-styles.txt" />
480
<content type="html">
481
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/checkbox-custom-styles.html">read this article online</a>,</p>
482
<p><strong>TL;DR</strong>: <code>appearance: none;</code>.</p>
483
<p>Checkboxes are hard to style. But when you're making a website, they may look ugly.</p>
485
<p><input type="checkbox" style="all: revert;" /></p>
487
<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>
489
<p>The first step toward styling it how we want it is to give it an appearance of none, and a width and height that are what you want.</p>
491
<div class="codehilite">
493
<pre><span></span><code><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
494
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
495
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
496
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
497
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">grey</span><span class="p">;</span>
498
<span class="p">}</span>
499
</code></pre>
500
</div>
501
<p><br /></p>
503
<iframe src="/blog-files/checkbox-custom-styles-ex1.html" style="background: #000; border: none"></iframe>
505
<p><a href="/blog-files/checkbox-custom-styles-ex1.txt">View Source</a></p>
507
<p>Now we can do whatever we want to it. You're also able to add a <code>:checked</code> sudo to change certain elements(like the <code>background-color</code>) depending on if the checkbox is checked or not.</p>
509
<div class="codehilite">
511
<pre><span></span><code><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
512
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
513
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
514
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
515
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
516
<span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="mh">#fff</span><span class="w"> </span><span class="kc">solid</span><span class="p">;</span>
517
<span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="kt">px</span><span class="p">;</span>
518
<span class="p">}</span>
519
<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span><span class="o">]</span><span class="p">:</span><span class="nd">checked</span><span class="w"> </span><span class="p">{</span>
521
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#ce5aff</span><span class="p">;</span>
522
<span class="p">}</span>
523
</code></pre>
524
</div>
525
<p><br /></p>
527
<iframe src="/blog-files/checkbox-custom-styles-ex2.html" style="background: #000; border: none"></iframe>
529
<p><a href="/blog-files/checkbox-custom-styles-ex2.html">View Source</a></p>
531
</content>
533
<id>https://steve0greatness.github.io/blog/checkbox-custom-styles.html</id>
534
<published>2022-02-19T00:00:00Z</published>
535
<updated>2024-02-02T00:00:00Z</updated>
536
</entry>
537
538
<entry>
539
<title>Creating a Switch in HTML and CSS</title>
540
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/creatingaswitch.html" />
541
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/creatingaswitch.txt" />
542
<content type="html">
543
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/creatingaswitch.html">read this article online</a>,</p>
544
<p>A switch is something that is basically just a nicer looking checkbox. Here, I'll be showing you how to make one.</p>
545
<p>The first step is to create checkbox with any class; I'll be using <code>switch</code>, because it's a switch.</p>
547
<div class="codehilite">
549
<pre><span></span><code><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
550
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{}</span>
551
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
552
<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;switch&quot;</span> <span class="p">/&gt;</span>
553
</code></pre>
554
</div>
555
<p>Next step is to add an appearance of none to the CSS--make sure to add <code>-moz-</code> and <code>-webkit-</code>. After that, you're going to want to set it so that the checkbox a rectangle--make sure it's in <code>px</code>. We also want to set the position to relative</p>
557
<div class="codehilite">
559
<pre><span></span><code><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
560
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{</span>
561
<span class="w"> </span><span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
562
<span class="w"> </span><span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
563
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
564
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
565
<span class="w"> </span><span class="p">}</span>
566
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
567
<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;switch&quot;</span> <span class="p">/&gt;</span>
568
</code></pre>
569
</div>
570
<p>Next we want to create <code>::before</code> pseudo. In there we want to make it have a position of relative, a width and height that are <code>-1px</code> less than the height of the main switch, a display of block, top and left set to <code>1px</code>, a content of <code>""</code>, and a background color that's different from the one in the main switch.</p>
572
<div class="codehilite">
574
<pre><span></span><code><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
575
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{</span>
576
<span class="w"> </span><span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
577
<span class="w"> </span><span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
578
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
579
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
580
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
581
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
582
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
583
<span class="w"> </span><span class="p">}</span>
584
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
585
<span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
586
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
587
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
588
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
589
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
590
<span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">;</span>
591
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
592
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
593
<span class="w"> </span><span class="p">}</span>
594
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
595
<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;switch&quot;</span> <span class="p">/&gt;</span>
596
</code></pre>
597
</div>
598
<p>Finally add a pseudo called <code>:checked</code> which checks if a checkbox was checked, you'll want to change the before pseudo if the the checkbox is checked. You'll need to put it on the opposite side of where it started, for me, that's on the right-side.</p>
600
<div class="codehilite">
602
<pre><span></span><code><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
603
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{</span>
604
<span class="w"> </span><span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
605
<span class="w"> </span><span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
606
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
607
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
608
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
609
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
610
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
611
<span class="w"> </span><span class="p">}</span>
612
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
613
<span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
614
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
615
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
616
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
617
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
618
<span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">;</span>
619
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
620
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
621
<span class="w"> </span><span class="p">}</span>
622
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">:</span><span class="nd">checked</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
623
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="c">/* .switch width - .switch::before width - 1px */</span>
624
<span class="w"> </span><span class="p">}</span>
625
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
626
<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;switch&quot;</span> <span class="p">/&gt;</span>
627
</code></pre>
628
</div>
629
<p>I'm using the <code>left</code> property instead of the <code>right</code> property as it makes it easier to transition between the 2 positions. Here is the CSS with the transition added in, plus a background change(also dark mode):</p>
631
<div class="codehilite">
633
<pre><span></span><code><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
634
<span class="w"> </span><span class="p">:</span><span class="nd">root</span><span class="w"> </span><span class="p">{</span>
635
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
636
<span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
637
<span class="w"> </span><span class="p">}</span>
638
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="w"> </span><span class="p">{</span>
639
<span class="w"> </span><span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
640
<span class="w"> </span><span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
641
<span class="w"> </span><span class="k">appearance</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
642
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span>
643
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
644
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
645
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span>
646
<span class="w"> </span><span class="p">}</span>
647
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
648
<span class="w"> </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
649
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
650
<span class="w"> </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span>
651
<span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">block</span><span class="p">;</span>
652
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#ff5c1c</span><span class="p">;</span>
653
<span class="w"> </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">;</span>
654
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
655
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
656
<span class="w"> </span><span class="k">transition</span><span class="p">:</span><span class="w"> </span><span class="k">background-color</span><span class="w"> </span><span class="mf">.5</span><span class="kt">s</span><span class="p">,</span><span class="w"> </span><span class="kc">left</span><span class="w"> </span><span class="mf">.5</span><span class="kt">s</span><span class="p">;</span>
657
<span class="w"> </span><span class="p">}</span>
658
<span class="w"> </span><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">checkbox</span><span class="o">]</span><span class="p">.</span><span class="nc">switch</span><span class="p">:</span><span class="nd">checked</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span>
659
<span class="w"> </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="c">/* .switch width - .switch::before width - 1px */</span>
660
<span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="mh">#3f9b00</span><span class="p">;</span>
661
<span class="w"> </span><span class="p">}</span>
662
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
663
<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;switch&quot;</span> <span class="p">/&gt;</span>
664
</code></pre>
665
</div>
666
<p>All of this results in a final product that looks like:</p>
668
<iframe style="background: #fff; border: none" src="/blog-files/switch-final.html"></iframe>
670
<p><a href="/blog-files/switch-final.txt">See Code</a></p>
672
</content>
674
<id>https://steve0greatness.github.io/blog/creatingaswitch.html</id>
675
<published>2022-02-11T00:00:00Z</published>
676
<updated>2023-02-02T00:00:00Z</updated>
677
</entry>
678
679
<entry>
680
<title>Why local variables are called "let"</title>
681
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/whyLocalVarCallLet.html" />
682
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/whyLocalVarCallLet.txt" />
683
<content type="html">
684
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/whyLocalVarCallLet.html">read this article online</a>,</p>
685
<p>In JavaScript there are 3 different kinds of variables, global variables(using <code>var</code>), constants(<code>const</code>, and local variables<code>let</code>). All of the act a little differently from each other. Allow me to explain what they do.</p>
686
<p>Global variables, made using <code>var</code>, are as they sound, global variables. Once defined, they can be used, edited, or redefined anywhere.</p>
688
<p>Constants, defined with <code>const</code>, are constant, they cannot change, at all.</p>
690
<p>Local variables, defined with <code>let</code>, are variables that can only be used in the place that it is defined, like a function, and it's children.</p>
692
<p>Now that we has that established, <em>let</em>'s talk about how local variables got their name.</p>
694
<p>Turns out "let" is a mathematical term.</p>
696
<blockquote>
698
<p>The <strong>"let" expression</strong> may also be defined in mathematics, where it associates a Boolean condition with a restricted scope.
699
<cite>Quote from <a href="https://en.wikipedia.org/w/index.php?title=Let_expression&oldid=1187985658">Wikipedia "Let expression"</a> as of <time>2024 Feb 2</time></cite></p>
700
</blockquote>
701
<p>It was first used in programming in early languages like Basic.</p>
703
<p>In case you're wondering, the main source is an answer on Stack Overflow: <em>"Why was the name 'let' chosen for block-scoped variable declarations in JavaScript?"</em>, answer by <a href="https://stackoverflow.com/users/1968972">exebook</a>, edited by <a href="https://stackoverflow.com/users/1741346">Pikamander2</a>; <a href="https://stackoverflow.com/a/37917071">link</a>.</p>
705
</content>
707
<id>https://steve0greatness.github.io/blog/whyLocalVarCallLet.html</id>
708
<published>2022-01-10T00:00:00Z</published>
709
<updated>2024-02-02T00:00:00Z</updated>
710
</entry>
711
712
<entry>
713
<title>The Song we didn't get in Undertale</title>
714
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/The_song_that_we_didnt_get_in_undertale.html" />
715
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/The_song_that_we_didnt_get_in_undertale.txt" />
716
<content type="html">
717
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/The_song_that_we_didnt_get_in_undertale.html">read this article online</a>,</p>
718
<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 fan-made <abbr title="Alternate Universe"><a href="https://undertale-au.fandom.com/wiki/Category:AUs">AU</a></abbr> 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>
719
<h2 id="the-current-version">The Current Version</h2>
721
<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>
723
<p><audio controls="true">
725
<source src="/blog-files/Undertale_(Soundtrack)_music_1.ogg" type="audio/ogg" />
726
<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" />
727
<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" />
728
It looks like your browser doesn't support the audio tag. Here is it's source: <a href="/blog-files/Undertale_(Soundtrack)_music_1.ogg">anchor</a>.
729
</audio></p>
730
<h2 id="the-one-that-could-have-been">The One that could have been</h2>
732
<p>This one is also great, 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>
734
<p><audio controls="true">
736
<source src="/blog-files/Undertale_(Soundtrack)_music_unused.oga" type="audio/ogg" />
737
<source src="https://a.tumblr.com/tumblr_odg4sv0r3Z1s58ev6o1.mp3" type="audio/mpeg" />
738
Again, it looks like you're browser doesn't support audio, so you can <a href="/blog-files/Undertale_(Soundtrack)_music_unused.oga">download the song</a> to listen to it.
739
</audio></p>
740
</content>
742
<id>https://steve0greatness.github.io/blog/The_song_that_we_didnt_get_in_undertale.html</id>
743
<published>2021-12-20T00:00:00Z</published>
744
<updated>2024-02-02T00:00:00Z</updated>
745
</entry>
746
747
<entry>
748
<title>Create a Theme Switch</title>
749
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/creating_a_theme_switch.html" />
750
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/creating_a_theme_switch.txt" />
751
<content type="html">
752
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/creating_a_theme_switch.html">read this article online</a>,</p>
753
<p>This is a simple tutorial on how to make a simple theme switcher.</p>
754
<p>First step is to create the themes you'll want on your site. You may just want a light and dark mode, however, you may also want other themes. As an example: a clown theme that makes the page absurdly colorful, like a GeoCities site in the early 2000s. For these themes, you can use CSS variables set on the <code>html</code> parent tag(all other elements are considered children of <code>html</code>). Variables can be set in CSS using double hyphens followed by a sequence of text that can use numbers(but not at the start), letters(capital or lowercase), underscores, and hyphens; these variables can then be accessed within your text using the <code>var()</code> function with the name of the variable(including the starting hyphens). You can change out the CSS variables using different selectors on the <code>html</code> tag within the CSS, for me: I'm using the <code>[data-theme]</code> attribute; however, you can use classes if you want. Here is the CSS I wrote:</p>
756
<div class="codehilite">
758
<pre><span></span><code><span class="nt">html</span><span class="o">[</span><span class="nt">data-theme</span><span class="o">=</span><span class="nt">light</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
759
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
760
<span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
761
<span class="w"> </span><span class="nv">--buttonBackground</span><span class="p">:</span><span class="w"> </span><span class="mh">#fefefe</span><span class="p">;</span>
762
<span class="w"> </span><span class="nv">--buttonBorder</span><span class="p">:</span><span class="w"> </span><span class="mh">#ccc</span><span class="p">;</span>
763
<span class="w"> </span><span class="nv">--buttonColor</span><span class="p">:</span><span class="w"> </span><span class="mh">#001</span><span class="p">;</span>
764
<span class="p">}</span>
765
<span class="nt">html</span><span class="o">[</span><span class="nt">data-theme</span><span class="o">=</span><span class="nt">dark</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
766
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#000</span><span class="p">;</span>
767
<span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
768
<span class="w"> </span><span class="nv">--buttonBackground</span><span class="p">:</span><span class="w"> </span><span class="mh">#101010</span><span class="p">;</span>
769
<span class="w"> </span><span class="nv">--buttonBorder</span><span class="p">:</span><span class="w"> </span><span class="mh">#333</span><span class="p">;</span>
770
<span class="w"> </span><span class="nv">--buttonColor</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span>
771
<span class="p">}</span>
772
<span class="nt">html</span><span class="o">[</span><span class="nt">data-theme</span><span class="o">=</span><span class="nt">clown</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
773
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#f00</span><span class="p">;</span>
774
<span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#00f</span><span class="p">;</span>
775
<span class="w"> </span><span class="nv">--buttonBackground</span><span class="p">:</span><span class="w"> </span><span class="mh">#050</span><span class="p">;</span>
776
<span class="w"> </span><span class="nv">--buttonBorder</span><span class="p">:</span><span class="w"> </span><span class="mh">#0a0</span><span class="p">;</span>
777
<span class="w"> </span><span class="nv">--buttonColor</span><span class="p">:</span><span class="w"> </span><span class="mh">#0f0</span><span class="p">;</span>
778
<span class="p">}</span>
779
<span class="nt">button</span><span class="w"> </span><span class="p">{</span>
780
<span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--buttonBackground</span><span class="p">);</span>
781
<span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--buttonBorder</span><span class="p">)</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mi">3</span><span class="kt">px</span><span class="p">;</span>
782
<span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nf">var</span><span class="p">(</span><span class="nv">--buttonColor</span><span class="p">);</span>
783
<span class="p">}</span>
784
</code></pre>
785
</div>
786
<p>Now we need to create a button that we will use to change the <code>[data-theme]</code> attribute. You (probably) already know what buttons are, so I won't go in depth about then. However: you will need to add an <code>[id]</code> to the button, this will come in play shortly.</p>
788
<div class="codehilite">
790
<pre><span></span><code><span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;theme-switch&quot;</span><span class="p">&gt;</span>Switch Theme<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
791
</code></pre>
792
</div>
793
<p>Now, it is time to write the JavaScript. First, you'll want to make a constant with the themes you filled into your CSS, for me, that was <code>dark</code>, <code>light</code>, and <code>clown</code>. I'll name this <code>themes</code>.</p>
795
<div class="codehilite">
797
<pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">themes</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;light&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;dark&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;clown&quot;</span><span class="p">];</span>
798
</code></pre>
799
</div>
800
<p>We now need to query the <abbr title="Document Object Model">DOM</abbr> for our theme switch button. This can be done in 2 ways: <code>document.querySelector</code> or <code>document.getElementById</code>; personally, I prefer <code>querySelector</code>, as it allows you to write a CSS selector to get an element from the DOM, allowing for shorter, more digestible, code.</p>
802
<p>We have to add a click event to the button. This can be done in 2 ways within JavaScript: <code>addEventListener("click", ...)</code> and <code>onclick</code>. I personally like <code>addEventListener</code> more, so I'll use that. Within the <code>addEventListener</code> function, you need to put a function. This function will control the logic of our theme switch. I'll call this function <code>SwitchTheme</code>, to reflect it's functionality.</p>
804
<div class="codehilite">
806
<pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">ThemeSwitchButton</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">&quot;#theme-switch&quot;</span><span class="p">);</span>
807
<span class="nx">ThemeSwitchButton</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;click&quot;</span><span class="p">,</span><span class="w"> </span><span class="nx">SwitchTheme</span><span class="p">());</span>
808
<span class="kd">function</span><span class="w"> </span><span class="nx">SwitchTheme</span><span class="p">()</span><span class="w"> </span><span class="p">{}</span>
809
</code></pre>
810
</div>
811
<p>Explaining each part of this function as it's written out would take awhile, so instead, I'll add comments to the ends of each line giving a short explanation. Also, for the sake of shortness, I've placed <code>document.documentElement</code> inside the constant <code>HTML</code>, giving us access to the root element in the DOM(<code>html</code>).</p>
813
<div class="codehilite">
815
<pre><span></span><code><span class="kd">let</span><span class="w"> </span><span class="nx">CurrentTheme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">themes</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">HTML</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">theme</span><span class="p">);</span><span class="w"> </span><span class="c1">// Gets how far in the current theme is into the &quot;themes&quot; constant.</span>
816
<span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">CurrentTheme</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="w"> </span><span class="o">&gt;=</span><span class="w"> </span><span class="nx">themes</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c1">// Checks if it&#39;s at the end of the array,</span>
817
<span class="w"> </span><span class="nx">HTML</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">themes</span><span class="p">[</span><span class="mf">0</span><span class="p">];</span><span class="w"> </span><span class="c1">// If so, reset at the start.</span>
818
<span class="w"> </span><span class="k">return</span><span class="p">;</span><span class="w"> </span><span class="c1">// Ends the function here, preventing next bit of code from running.</span>
819
<span class="p">}</span>
820
<span class="nx">HTML</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">theme</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">themes</span><span class="p">[</span><span class="nx">CurrentTheme</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">];</span><span class="w"> </span><span class="c1">// Goes to the next theme.</span>
821
</code></pre>
822
</div>
823
<p>Now we have a finished product. Here's the expected output:</p>
825
<iframe id="finalProduct" src="/blog-files/theme-change-final.html" style="border:none"></iframe>
827
<p><a href="/blog-files/theme-change-final.txt">See Code</a></p>
829
</content>
831
<id>https://steve0greatness.github.io/blog/creating_a_theme_switch.html</id>
832
<published>2021-12-08T00:00:00Z</published>
833
<updated>2024-02-03T00:00:00Z</updated>
834
</entry>
835
836
<entry>
837
<title>Is Kris the Knight?</title>
838
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/Is_Kris_the_Knight.html" />
839
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/Is_Kris_the_Knight.txt" />
840
<content type="html">
841
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/Is_Kris_the_Knight.html">read this article online</a>,</p>
842
<p>Is Kris <span style="color: hotpink; font-style: italic;">the Knight</span>? At face value, this seems insane. Right? Well, let's look at the evidence.</p>
843
<p>First and foremost, <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>.</p>
845
<p>Second, what does Kris look like in <span style="color: red; font-style: italic;">Dark Worlds</span>? That's right, a Knight.</p>
847
<p><img src="/blog-files/Kris_battle_idle.gif" type="image/gif" width="100" align="left" style="image-rendering:pixelated" alt="Kris, the primary player character from Deltarune, dressed as a knight, minus a helmet." /></p>
849
<p>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.</p>
851
<p>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 library's computer lab? Or the on in the closet for that matter. Well, we know that they had their 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 shuffling around outside; and slashing Toriel's tires. In fact, they rips out their heart in the end of chapter 1, too. Afterward, they presumably went to library and made a fountain in the computer lab.</p>
853
<p>This is a really common theory, but it really needs more evidence to be collected, and more speculating to be done.<br clear="left"/></p>
855
<p><em>Image taken from <a href="https://deltarune.fandom.com/wiki/">Fandom</a>.</em></p>
857
<p><em>Quick note from 2024: I'm aware of the design of Kris from that rodeo teaser. I'm pretty much keeping this up for historical reasons at this point. Encase you're wondering, here's Kris' design from there:</em></p>
859
<p><center><img src="/blog-files/yeehowdy.webp" type="image/webp" width="100" style="image-rendering:pixelated" alt="Kris, from Deltarune, dressed up in a cowboy outfit." /></center></p>
861
</content>
863
<id>https://steve0greatness.github.io/blog/Is_Kris_the_Knight.html</id>
864
<published>2021-10-23T00:00:00Z</published>
865
<updated>2024-02-21T00:00:00Z</updated>
866
</entry>
867
868
<entry>
869
<title>Symbols</title>
870
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/symbols.html" />
871
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/symbols.txt" />
872
<content type="html">
873
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/symbols.html">read this article online</a>,</p>
874
<p>In our lifes on the internet, we see alot of characters that we don't normally see. Like @, #, &amp;, [], {}, \, ;, 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>&amp; is a symbol used to mean "and"(the dog <span style="font-weight:bold">&amp;</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">&amp;</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(&amp;) are used as &amp;, that's it(doges <span style="font-weight:bold">&amp;</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">;</span> 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" &amp; "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></p>
875
</content>
877
<id>https://steve0greatness.github.io/blog/symbols.html</id>
878
<published>2021-10-10T00:00:00Z</published>
879
<updated>2021-10-10T00:00:00Z</updated>
880
</entry>
881
882
<entry>
883
<title>Creating a HTML drop-down list</title>
884
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/Creating_HTML_DD_List.html" />
885
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/Creating_HTML_DD_List.txt" />
886
<content type="html">
887
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/Creating_HTML_DD_List.html">read this article online</a>,</p>
888
<p>In order to create a drop-down selection list in HTML, we must first understand why they are important.</p>
889
<p>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).</p>
891
<p>Before we start, here is an example:</p>
893
<p><strong>Select Image:</strong> <select id="select" onchange="document.getElementById('img').src = document.getElementById('select').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></p>
895
<p><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;" /></p>
897
<p><small>Images from <a href="https://en.wikipedia.org">Wikipedia</a>, on <a href="https://web.archive.org/web/20211001135954/https://en.wikipedia.org/wiki/Main_Page">Oct. 2nd</a> &amp; <a href="https://web.archive.org/web/20211002095505/https://en.wikipedia.org/wiki/Main_Page">1st, 2021</a></small></p>
899
<p>For some weird reason, it's not in <code>&lt;input&gt;</code>, it has it's own tags: <code>&lt;select&gt;</code> and <code>&lt;option&gt;</code>. Using these is a little like making a list, if you've ever made one. Here's an example bit of HTML:</p>
901
<div class="codehilite">
903
<pre><span></span><code><span class="p">&lt;</span><span class="nt">select</span><span class="p">&gt;</span>
904
<span class="p">&lt;</span><span class="nt">option</span><span class="p">&gt;</span>op 1<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
905
<span class="p">&lt;</span><span class="nt">option</span><span class="p">&gt;</span>op 2<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
906
<span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
907
</code></pre>
908
</div>
909
<p>Like all <code>input</code>s, <code>select</code> can have an id and name, and like <code>input[type=radio]</code>, <code>option</code> can have a value.</p>
911
<p>However, you may not know some things that could be useful here, such as defaulting, or making things update upon being changed, well, you can do defaulting with <code>selected</code> in the <code>&lt;option&gt;</code> 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 <code>onchange="submitFunction()"</code> being placed in the <code>&lt;select&gt;</code>.</p>
913
<p>Let's check back on the code that we made at the code example:</p>
915
<div class="codehilite">
917
<pre><span></span><code><span class="p">&lt;</span><span class="nt">select</span> <span class="na">onchange</span><span class="o">=</span><span class="s">&quot;submitFunction()&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;selection&quot;</span><span class="p">&gt;</span>
918
<span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;op1&quot;</span> <span class="na">selected</span><span class="p">&gt;</span>op 1<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
919
<span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;op2&quot;</span><span class="p">&gt;</span>op 2<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
920
<span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
921
</code></pre>
922
</div>
923
<p>Inorder to access the selected option with JavaScript, use <code>document.getElementById("selection").value</code>.</p>
925
<p>That's basically it, feel free to <code>CTRL + C</code> <code>CTRL + V</code> it. /s</p>
927
</content>
929
<id>https://steve0greatness.github.io/blog/Creating_HTML_DD_List.html</id>
930
<published>2021-10-01T00:00:00Z</published>
931
<updated>2024-01-26T00:00:00Z</updated>
932
</entry>
933
934
<entry>
935
<title>YouTube needs to have an open REST API</title>
936
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/Youtube_needs_a_Rest_API.html" />
937
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/Youtube_needs_a_Rest_API.txt" />
938
<content type="html">
939
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/Youtube_needs_a_Rest_API.html">read this article online</a>,</p>
940
<p><em>2024 Note: I don't care anymore. I'm keeping this around for historical reasons at this point.</em></p>
941
<p>Youtube needs an open Rest API. Here are some reasons:
943
1. It makes my life easier, as I don't need to write a billion lines of code, and not go thought the <strong><em>paid service</em></strong> known as google cloud console, to get an api key.
944
2. It means that you only need to use <code>fetch()</code> on it.
945
3. We don't need the most in depth api.</p>
946
</content>
948
<id>https://steve0greatness.github.io/blog/Youtube_needs_a_Rest_API.html</id>
949
<published>2021-09-29T00:00:00Z</published>
950
<updated>2024-02-02T00:00:00Z</updated>
951
</entry>
952
953
<entry>
954
<title>How to Make the perfect Tea.</title>
955
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/How_To_Make_Tea.html" />
956
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/How_To_Make_Tea.txt" />
957
<content type="html">
958
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/How_To_Make_Tea.html">read this article online</a>,</p>
959
<p><em>This post is subjective, there's no <strong>right</strong> answer to "what is the perfect tea."</em></p>
960
<p>Tea is the perfect fit for most meals, breakfast, 2nd breakfast, morning tea, lunch, afTernoon tea, dinner, or supper.</p>
962
<p>But how do I make it? Here's how I make my tea.</p>
964
<h2 id="step-1">Step 1</h2>
966
<p>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.</p>
968
<h2 id="step-2">Step 2</h2>
970
<p>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.</p>
972
<h2 id="step-3">Step 3</h2>
974
<p>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.</p>
976
<h2 id="final-step">Final Step</h2>
978
<p>Enjoy.</p>
980
<p>You can add sugar and <s>milk</s> cream, if you're into those kinda things... even lemon if you really want.</p>
982
<p><img src="/blog-files/English_teaware.jpg" type="image/jpeg" width="250" /></p>
984
<p><em>Image source: <a href="https://commons.wikimedia.org/wiki/User:Sgtblackpepper">@Sgtblackpepper@en.wikipedia.org</a>; <a href="https://en.wikipedia.org/wiki/File:English_teaware.jpg">image</a>; Licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0</a>. This upload is not endorsed by the image rights holder.</em></p>
986
</content>
988
<id>https://steve0greatness.github.io/blog/How_To_Make_Tea.html</id>
989
<published>2021-09-28T00:00:00Z</published>
990
<updated>2024-02-02T00:00:00Z</updated>
991
</entry>
992
993
<entry>
994
<title>Why inspect-element is useful</title>
995
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/Why-inspect-element-is-a-useful-tool.html" />
996
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/Why-inspect-element-is-a-useful-tool.txt" />
997
<content type="html">
998
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/Why-inspect-element-is-a-useful-tool.html">read this article online</a>,</p>
999
<p><div class="notice">This post isn't very good, and I'm not proud of it.</div>So, as of currently, my <a href="https://ocular.jeffalo.net/user/Steve0Greatness">Ocular Status</a> is <span style="font-style: italic; color: #0dbfb7; background-color: #0f0f0f;">Mobile needs a better browser! #MobileSmartBrowser! (Er/Him)</span>. Part of the reason for this is so that inspect can be on mobile.<p>but what makes inspect so important?</p>Well I'm glad I asked!<div>So on GitHub, you only have 2000 actions you can do(on the free plan). So that means you need to use them carefully, make sure that you won't do something that wastes an action.</div>It helps you fix any mistake, before you make anymore. <div>Of course, you can always download the file, and edit it offline. But inspect element is easier, live, and requires less space in your hard-drive.</div>Thanks for coming to my Ted-talk.😜🤪</p>
1000
</content>
1002
<id>https://steve0greatness.github.io/blog/Why-inspect-element-is-a-useful-tool.html</id>
1003
<published>2021-05-17T00:00:00Z</published>
1004
<updated>2021-05-17T00:00:00Z</updated>
1005
</entry>
1006
1007
<entry>
1008
<title>How to Copy and Paste on mobile</title>
1009
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/How-to-copy-and-paste-on-mobile.html" />
1010
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/How-to-copy-and-paste-on-mobile.txt" />
1011
<content type="html">
1012
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/How-to-copy-and-paste-on-mobile.html">read this article online</a>,</p>
1013
<div class="notice">This post isn't very good, and I'm not proud of it.</div>
1014
<p>Recently, I've been seeing a lot of people coming up with one excuse for not linking the duplicate topic in the suggestions forum. They say something like, <q>I'm on mobile!!!!! &#128534;&#128557;&#128555;</q> this is not a correct argument, so I've decided to make this post to prove it.</p>
1016
<h2 id="safariios">Safari/iOS</h2>
1018
<p>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(the next bit works for links, not this)</p>
1020
<h3 id="coping-links">Coping links</h3>
1022
<p>Tap and hold on the link until you see:</p>
1024
<p><img src="/blog-files/iOS_Copy.jpg" type="image/jpeg" alt="open, open in background, open in new window, download link file, add to reading list, *copy*, share" loading="lazy" width="300" height="242" /></p>
1026
<h3 id="paste">Paste</h3>
1028
<p>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 red).</p>
1030
<h2 id="chromeandroid">Chrome/Android</h2>
1032
<p><em>Note: I don't own an android tablet or phone, so take this with a grain of salt</em></p>
1034
<p>Press and hold until a few selection boxes come up(might work for links)</p>
1036
<p><strong>Chromium</strong></p>
1038
<p><img src="/blog-files/Android_Chrome_Copy.png" type="image/png" loading="lazy" width="300" height="551" /></p>
1040
<p><strong>Firefox/Gecko</strong></p>
1042
<p><img src="/blog-files/Android_Firefox_Copy.png" type="image/png" loading="lazy" width="300" height="289" /></p>
1044
<h3 id="pasting">Pasting</h3>
1046
<p>Tap and hold on the text box, you should see "paste," now click that(highlighted in red).</p>
1048
<p><img src="/blog-files/Android_Paste.png" type="image/png" loading="lazy" width="300" height="115" /></p>
1050
<p><small>All images are self-sourced.</small></p>
1052
</content>
1054
<id>https://steve0greatness.github.io/blog/How-to-copy-and-paste-on-mobile.html</id>
1055
<published>2021-05-05T00:00:00Z</published>
1056
<updated>2024-01-03T00:00:00Z</updated>
1057
</entry>
1058
1059
<entry>
1060
<title>How to Make Scratch Mockups</title>
1061
<link type="text/html" rel="alternate" href="https://steve0greatness.github.io/blog/How-To-make-mockups.html" />
1062
<link type="text/plain" rel="alternate" href="https://steve0greatness.github.io/blog/How-To-make-mockups.txt" />
1063
<content type="html">
1064
<p>Depending on your Feed reader, you may want to <a href="https://steve0greatness.github.io/blog/How-To-make-mockups.html">read this article online</a>,</p>
1065
<p>The first step to making a mockup is to open the <abbr title="Developer Tools"><a href="https://developer.chrome.com/docs/devtools/">DevTools</a></abbr>. This can be done with the keyboard shortcuts <code>ctrl</code> + <code>shift</code> + <code>i</code> or <code>F12</code>.</p>
1066
<p>This DevTools menu allows you to do many cool things, such as create new elements, and modify existing ones. In all browsers(that I know of) you can use a little selector at the top-left of the DevTools panel to enable a mode that if you click on an area of the screen, it brings you to the element in question within the DevTools panel.</p>
1068
<p>There's not much else advice I can give you. Just look around the Scratch site to get inspiration, and then either create or edit an element on a page you like to fit your needs.</p>
1070
</content>
1072
<id>https://steve0greatness.github.io/blog/How-To-make-mockups.html</id>
1073
<published>2021-04-22T00:00:00Z</published>
1074
<updated>2024-01-03T00:00:00Z</updated>
1075
</entry>
1076
1077
</feed>