<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Magerman714</title>
    <description>The latest articles on Forem by Magerman714 (@magerman714).</description>
    <link>https://forem.com/magerman714</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1001102%2Fb20b9616-0cf6-41df-a57e-f55e1353e828.jpeg</url>
      <title>Forem: Magerman714</title>
      <link>https://forem.com/magerman714</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/magerman714"/>
    <language>en</language>
    <item>
      <title>Quantum Computers: The Weird Science of the Small</title>
      <dc:creator>Magerman714</dc:creator>
      <pubDate>Mon, 08 May 2023 03:08:21 +0000</pubDate>
      <link>https://forem.com/magerman714/quantum-computers-the-weird-science-of-the-small-1cl0</link>
      <guid>https://forem.com/magerman714/quantum-computers-the-weird-science-of-the-small-1cl0</guid>
      <description>&lt;p&gt;Quantum physics is an emerging and frankly baffling science that humanity is still struggling to understand. Its findings are confusing and even sometimes appear to be impossible given our current understanding of physics, but nonetheless have lead to designs of computers that could potentially greatly accelerate our ability to conduct experimental simulations, transmit information, or even enhance the processing speed of our current PCs.&lt;/p&gt;

&lt;p&gt;But what is a quantum computer exactly? To understand it, we must first examine how our current computers function.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hbdiTx2d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd3ijfkwrnm1mms8sql9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hbdiTx2d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd3ijfkwrnm1mms8sql9.jpg" alt="Image description" width="794" height="355"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Traditionally, the computers that are most in use today operate by using 'bits' at the base level. Bits are essentially switches that are either on (have power running through them) or off (don't have power running through them) at any given time; these are read as the 1's and 0's that most people know of. These 1's and 0's are known as 'binary code', and is used as the basic building blocks of a computer. Every process that we program in, every image or video we view from our monitors, every change that happens as a result of a keyboard button press or mouse click, all are essentially the result of programming languages being translated into (or reading) binary code. &lt;/p&gt;

&lt;p&gt;Quantum computers, however, use something different from a bit: a "Qubit" (pronounced CUE-bit). Qubits are quantum particles which you can envision as a sphere with a point inside of it which is constantly in motion; that point can at any time be in any position within the sphere. Because of this, a Qubit can equal 1, 0, or anywhere in between!. This concept is known as "Superposition". Here is a visualization of a Qubit:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--31a4Yjvm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d55h5t5s64y5nbw4b87o.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--31a4Yjvm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d55h5t5s64y5nbw4b87o.gif" alt="Image description" width="600" height="310"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Qubits (and quantum particles in general) have a few interesting properties. For one thing, while a Qubit &lt;em&gt;can&lt;/em&gt; be, say, 0.42 for instance, the moment it is actually measured or observed in any way, even secondhand through, for instance, the radiation it emits, its value will "collapse" into either a 1 or a 0 - nothing in between. This, of course, makes them difficult to measure properly, however another interesting property of the Qubit does assist to some extent: entanglement. &lt;/p&gt;

&lt;p&gt;If 2 or more Qubits are close enough to each other, they will become "entangled". If two entangled Qubits are measured at the same time, they will each always yield the same result - that is to say, for 2 entangled Qubits measured at the same time, their measurements would always be either 1 1 or 0 0; never 1 0 or 0 1. An especially intriguing aspect of this property is that it is true regardless of distance! If 2 entangled Qubits are on the opposite side of the planet, they will still always yield the same value if they are measured at the same time.&lt;/p&gt;

&lt;p&gt;So how do we measure Qubits such that we can use them in the same way we use bits in a computer? The answer is a concept known as "interference", which involves measuring Qubits strategically at certain points according to a complicated quantum algorithm known as "Grover's Algorithm" (seen below)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ySIhvfbU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj0jjj3l1bs7eirhr9v8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ySIhvfbU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj0jjj3l1bs7eirhr9v8.png" alt="Image description" width="390" height="129"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, the math of that algorithm is beyond me, but the effect is understandable: using said algorithm, it is possible to get a Qubit's true value, effectively expanding the amount of information a single Qubit can contain when compared to a traditional bit. To give some context, a quantum computer with only 10 qubits would theoretically have a storage capacity equal to 2^10 (1,024) values, which would require 16,000 bits in a traditional computer. For a traditional computer to equal the computational power of quantum computer that had 500 qubits, it would require more bits than there are atoms in the known universe!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fPFf74TZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os0pehz9wbl0fvuyrx0n.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fPFf74TZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os0pehz9wbl0fvuyrx0n.jpg" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This technology is still new, and though some functional quantum computers &lt;em&gt;have&lt;/em&gt; been made, but only on a small scale and certainly not in any way that would be commercially viable. Still, as the field grows and becomes more refined, who knows what wonders the quantum computer might unlock?&lt;/p&gt;

&lt;p&gt;&lt;u&gt;Sources&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=jHoEjvuPoB8"&gt;https://www.youtube.com/watch?v=jHoEjvuPoB8&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=lt4OsgmUTGI"&gt;https://www.youtube.com/watch?v=lt4OsgmUTGI&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=zhQItO6_WoI"&gt;https://www.youtube.com/watch?v=zhQItO6_WoI&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=ooDt9oaQZfE"&gt;https://www.youtube.com/watch?v=ooDt9oaQZfE&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=dAaHHGHuy1c"&gt;https://www.youtube.com/watch?v=dAaHHGHuy1c&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=OFFjECcv9Lc"&gt;https://www.youtube.com/watch?v=OFFjECcv9Lc&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=p-MNSLsjjdo"&gt;https://www.youtube.com/watch?v=p-MNSLsjjdo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=tt8gVXDsh7Q"&gt;https://www.youtube.com/watch?v=tt8gVXDsh7Q&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://physicsworld.com/a/retrieving-data-from-a-black-hole/"&gt;https://physicsworld.com/a/retrieving-data-from-a-black-hole/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.investopedia.com/terms/q/quantum-computing.asp"&gt;https://www.investopedia.com/terms/q/quantum-computing.asp&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.energy.gov/science/doe-explainsquantum-computing"&gt;https://www.energy.gov/science/doe-explainsquantum-computing&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://aws.amazon.com/what-is/quantum-computing/"&gt;https://aws.amazon.com/what-is/quantum-computing/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.ibm.com/topics/quantum-computing"&gt;https://www.ibm.com/topics/quantum-computing&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.wired.com/story/wired-guide-to-quantum-computing/"&gt;https://www.wired.com/story/wired-guide-to-quantum-computing/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>computerscience</category>
      <category>quantum</category>
      <category>datascience</category>
      <category>performance</category>
    </item>
    <item>
      <title>Git Gud: How to Avoid/Fix Detached HEAD and Hunt Buggy Commits</title>
      <dc:creator>Magerman714</dc:creator>
      <pubDate>Mon, 24 Apr 2023 04:01:54 +0000</pubDate>
      <link>https://forem.com/magerman714/git-gud-how-to-avoidfix-detached-head-and-hunt-buggy-commits-8gb</link>
      <guid>https://forem.com/magerman714/git-gud-how-to-avoidfix-detached-head-and-hunt-buggy-commits-8gb</guid>
      <description>&lt;p&gt;While Git is a very useful version control tool, it can also be harsh and unforgiving to those inexperienced with using it. All of us who've used Git have surely felt the frustrating sting of merge conflicts, branch mismatches, and the dreaded detached HEAD state. This guide will provide some rules of thumb for branch navigation, detached HEAD troubleshooting advice, and some bonus tips and tricks I've picked up in my studies.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;u&gt;Branch Management&lt;/u&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;One of the primary ways you can avoid a detached HEAD state is by effective usage of branches to organize your commit history and keep your working tree clean. So, if you're ever about to start making significant changes that might break things in your code, don't be afraid to use a branch!&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git checkout -b &amp;lt;branch name&amp;gt;&lt;/code&gt; will both create a branch named  and check it out at the same time. Efficient!&lt;/p&gt;

&lt;p&gt;Once you've finished whatever work you were doing on your branch, and have tested it to ensure it's working, simply use &lt;code&gt;git checkout &amp;lt;main branch name&amp;gt;&lt;/code&gt; (typically 'master' or 'main')  to move to the main/master branch, then use &lt;code&gt;git merge &amp;lt;branch name&amp;gt;&lt;/code&gt; to merge that branch into it.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;u&gt;Fixing Detached HEAD&lt;/u&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To fix this problem, let us briefly delve into what the problem actually is.&lt;/p&gt;

&lt;p&gt;The HEAD is essentially just a reference pointing to the most recent commit in a branch. It can be moved, however, with the &lt;code&gt;git checkout&lt;/code&gt; command, which will allow you to access a version of the code at that commit. Whenever the HEAD is pointing to a specific commit rather than the most recent commit of the currently checked out branch, it is said to be 'detached'. This can cause all sorts of annoying issues, but thankfully, there is an easy fix!&lt;/p&gt;

&lt;p&gt;The easiest and most straightforward way to correct this issue is to simply use &lt;code&gt;git checkout &amp;lt;commit id of the most recent commit on the currently checked out branch&amp;gt;&lt;/code&gt;. If you're not sure which commit this is, you can use &lt;code&gt;git status&lt;/code&gt;, which should show the HEAD among other commits. &lt;/p&gt;

&lt;p&gt;Of course, most of the time when you check out another commit it's because you want to use some or all of that commit's code. Simply checking out the HEAD won't accomplish that, but thankfully there's an easy solution to that too!&lt;/p&gt;

&lt;p&gt;If you want to merge changes from the commit you'd checked out which caused the detached HEAD state, first you just need to create a new branch using the command we'd previously discussed: &lt;code&gt;git checkout -b &amp;lt;branch name&amp;gt;&lt;/code&gt;. That will copy all of the changes in the currently checked out commit into a new branch. After that, just check out the current HEAD using the command described above. Once you've done that, run &lt;code&gt;git merge &amp;lt;name of the branch you created in the first step&amp;gt;&lt;/code&gt; and presto, the merge will be initiated! Once you've resolved any merge conflicts, you'll have ended the detached HEAD state and be ready to continue coding!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;u&gt;Using &lt;code&gt;git bisect&lt;/code&gt; To Find A Problem Commit&lt;/u&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Sometimes, a bug goes unnoticed for a long time and the commit that introduced it is unknown. In a situation like that, we might want to return to an earlier commit, but how can we find which one to return to? Enter &lt;code&gt;git bisect&lt;/code&gt;!&lt;/p&gt;

&lt;p&gt;&lt;code&gt;git bisect&lt;/code&gt; is a useful command that allows you to choose a starting commit (where you know the code was functional and the bug not present) and an ending commit (where you know the bug is present - typically the current HEAD) and test the commits in between to locate the one that introduced a bug. Here's how to use it:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Run &lt;code&gt;git bisect start&lt;/code&gt;. Nothing will appear to happen after running this command; that's expected.&lt;/li&gt;
&lt;li&gt;Run &lt;code&gt;git bisect bad &amp;lt;commit id of latest commit you know is bad&amp;gt;&lt;/code&gt; to start the process. Note that if you omit the commit id, it will use the commit you are currently on as a default.&lt;/li&gt;
&lt;li&gt;Run &lt;code&gt;git bisect good &amp;lt;commit id of latest commit you know is working&amp;gt;&lt;/code&gt; to give a starting point to the tool. The tool will then checkout a commit somewhere in between of the 'good' and 'bad' commits you indicated.&lt;/li&gt;
&lt;li&gt;Test the code at the commit that was checked out, then run either &lt;code&gt;git bisect good&lt;/code&gt; if the bug isn't present, or &lt;code&gt;git bisect bad&lt;/code&gt; if it is.&lt;/li&gt;
&lt;li&gt;After marking each commit the tool checks out as either good or bad, the tool will either checkout a new commit, or end; keep marking commits good or bad until it ends.&lt;/li&gt;
&lt;li&gt;When the tool ends, it will identify the earliest commit where the bug is present, which will allow you to search through the code there (particularly the changes specific to that commit) and determine what corrections will be needed to fix it&lt;/li&gt;
&lt;li&gt;Remember, at this point you will be in a detached HEAD state! In order to fix this, run &lt;code&gt;git bisect reset&lt;/code&gt; to end the bisect session.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;u&gt;Conclusion&lt;/u&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;I hope that this has helped you to get better at avoiding the detached HEAD state, empowered you to be able to fix that state should it occur, and given you some information on how to hunt out buggy commits more easily without encountering unintuitive Git errors. Happy coding!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sources&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging"&gt;https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.atlassian.com/git/tutorials/using-branches/git-merge"&gt;https://www.atlassian.com/git/tutorials/using-branches/git-merge&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-scm.com/docs/git-bisect"&gt;https://git-scm.com/docs/git-bisect&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://git-school.github.io/visualizing-git/"&gt;https://git-school.github.io/visualizing-git/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=U83Utlp3vYg"&gt;https://www.youtube.com/watch?v=U83Utlp3vYg&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=HvDjbAa9ZsY"&gt;https://www.youtube.com/watch?v=HvDjbAa9ZsY&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=wIY824wWpu4"&gt;https://www.youtube.com/watch?v=wIY824wWpu4&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=ecK3EnyGD8o"&gt;https://www.youtube.com/watch?v=ecK3EnyGD8o&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=P3ZR_s3NFvM"&gt;https://www.youtube.com/watch?v=P3ZR_s3NFvM&lt;/a&gt;&lt;/p&gt;

</description>
      <category>git</category>
      <category>learning</category>
      <category>development</category>
      <category>devops</category>
    </item>
    <item>
      <title>CSS Flexbox: How to Get Your Elements to Adjust to Page Size</title>
      <dc:creator>Magerman714</dc:creator>
      <pubDate>Mon, 10 Apr 2023 02:29:29 +0000</pubDate>
      <link>https://forem.com/magerman714/css-flexbox-how-to-get-your-elements-to-adjust-to-page-size-1adb</link>
      <guid>https://forem.com/magerman714/css-flexbox-how-to-get-your-elements-to-adjust-to-page-size-1adb</guid>
      <description>&lt;p&gt;Designing the layout for a website such that all of the elements end up appearing where you want them to can be surprisingly tricky, but fear not! Flexboxes can make this task less of a chore, and I'm here to teach you the basics of how to make use them.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;u&gt;Introduction&lt;/u&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;So first, what is a Flexbox? In short, it's a set of CSS properties that can be used on a container element to allow its child elements to dynamically position themselves based on the webpage's size. Let's take a look at the basics - say we have the following HTML code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div id="container"&amp;gt;
  &amp;lt;div&amp;gt;Element 1&amp;lt;/div&amp;gt;
  &amp;lt;div&amp;gt;Element 2&amp;lt;/div&amp;gt;
  &amp;lt;div&amp;gt;Element 3&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Without adding any CSS styling, the default values would have the child elements display top to bottom in a column.&lt;/p&gt;

&lt;p&gt;So let's add the first of the CSS properties needed to implement our Flexbox:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#container {
  display: flex;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With that CSS property in place, the child elements will now display left to right in a row instead of a column.&lt;/p&gt;

&lt;p&gt;Of note, if you want your elements to be displayed in a column, all you would need to do is add the following CSS property: &lt;code&gt;flex-direction: column;&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;u&gt;Aligning Your Child Elements&lt;/u&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;We now have a few options for how to align our items along the axis we have decided for them to appear on (i.e. in a column or row). For this, we use the &lt;code&gt;justify-content&lt;/code&gt; CSS property, which can have the following values: &lt;/p&gt;

&lt;p&gt;&lt;code&gt;flex-start&lt;/code&gt; - The default value, this will cause the child elements to start at the top (for columns) or left (for rows) of where the container is placed on the page.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;flex-end&lt;/code&gt; - The inverse of &lt;code&gt;flex-start&lt;/code&gt;, this will cause the child elements to start at the bottom/right depending on if it's a row or column&lt;/p&gt;

&lt;p&gt;&lt;code&gt;center&lt;/code&gt; - This will center the elements in the middle of the row or column they're on&lt;/p&gt;

&lt;p&gt;&lt;code&gt;space-between&lt;/code&gt; - This will evenly distribute the child elements along the row or column they're on&lt;/p&gt;

&lt;p&gt;&lt;code&gt;space-around&lt;/code&gt; - This is identical to &lt;code&gt;space-between&lt;/code&gt; except that it will include some space between the edges (that is to say, the left and right edges of the page for a row or top and bottom edges of the page for a column)&lt;/p&gt;

&lt;p&gt;&lt;code&gt;space-evenly&lt;/code&gt; - This is much like &lt;code&gt;space-between&lt;/code&gt; in that it will evenly distribute space between all of the items is the same, rather than distributing all items evenly along the row/column they're placed on. This distinction is most significant when the elements within the container are different sizes.&lt;/p&gt;

&lt;p&gt;The above values are also used for the &lt;code&gt;align-items&lt;/code&gt; CSS property, which pertains to the cross axis (i.e. if the child elements are being placed in a row, it would pertain to the vertical axis; if they were being placed in a column it would pertain to the horizontal access). This allows you to fine tune how the elements in your Flexbox are positioned on your page.&lt;/p&gt;

&lt;p&gt;To help illustrate how these values work, here's handy visual reference:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SVwT1m4i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn457xj77z7v8cdi3mx6.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SVwT1m4i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn457xj77z7v8cdi3mx6.jpg" alt="Flexbox Property Value Visualization" width="542" height="766"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;u&gt;Making Your Elements Wrap&lt;/u&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Now, if you were to try out a CSS styling object that looked something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then you might notice that when the page shrinks enough to compress the elements in your Flexbox, each individual element will scrunch up, maybe pushing some of its characters onto the line below. What if you wanted to have the elements themselves shift to lower rows rather than their contents? This is where &lt;code&gt;flex-wrap&lt;/code&gt; comes into play!&lt;/p&gt;

&lt;p&gt;Setting the &lt;code&gt;flex-wrap&lt;/code&gt; CSS property to the value &lt;code&gt;wrap&lt;/code&gt; will allow the child elements to be pushed onto a new line (or column) if the page is shrunk enough to compress them, rather than squishing them together on the same line as the default value &lt;code&gt;nowrap&lt;/code&gt; would do. The way these elements are repositioned can also be customized with the &lt;code&gt;align-content&lt;/code&gt; CSS property, which uses the same values as the other alignment based properties previously discussed (i.e. &lt;code&gt;flex-start&lt;/code&gt;, &lt;code&gt;flex-end&lt;/code&gt;, etc.) to determine how to handle where child elements are 'pushed' to along the cross axis.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;u&gt;Conclusion&lt;/u&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;And that's it, those are the basics of Flexboxes! I hope that this blog post has given you some insight into how to more easily position elements on your webpages! &lt;/p&gt;

&lt;p&gt;&lt;u&gt;Sources&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/"&gt;https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"&gt;https://css-tricks.com/snippets/css/a-guide-to-flexbox/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://css-tricks.com/almanac/properties/j/justify-content/#:%7E:text=space%2Daround%20%3A%20items%20are%20evenly,alignment%20subject%20is%20the%20same"&gt;https://css-tricks.com/almanac/properties/j/justify-content/#:~:text=space%2Daround%20%3A%20items%20are%20evenly,alignment%20subject%20is%20the%20same&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/css/css3_flexbox.asp"&gt;https://www.w3schools.com/css/css3_flexbox.asp&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/css/css3_flexbox_container.asp"&gt;https://www.w3schools.com/css/css3_flexbox_container.asp&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/css/css3_flexbox_items.asp"&gt;https://www.w3schools.com/css/css3_flexbox_items.asp&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/css/css3_flexbox_responsive.asp"&gt;https://www.w3schools.com/css/css3_flexbox_responsive.asp&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=phWxA89Dy94&amp;amp;list=PLSkg_1mheG-12IDNqSdHS02_nvaT4B_a1&amp;amp;index=9"&gt;https://www.youtube.com/watch?v=phWxA89Dy94&amp;amp;list=PLSkg_1mheG-12IDNqSdHS02_nvaT4B_a1&amp;amp;index=9&lt;/a&gt;&lt;/p&gt;

</description>
      <category>css</category>
      <category>programming</category>
      <category>html</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Hacking 101: Common Attacks and How to Stop Them</title>
      <dc:creator>Magerman714</dc:creator>
      <pubDate>Sun, 05 Mar 2023 22:39:25 +0000</pubDate>
      <link>https://forem.com/magerman714/hacking-101-common-attacks-and-how-to-stop-them-6po</link>
      <guid>https://forem.com/magerman714/hacking-101-common-attacks-and-how-to-stop-them-6po</guid>
      <description>&lt;p&gt;&lt;strong&gt;Welcome to the basics of some common hacking tactics, an overview of how they work, and what can be done to defend against them.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IhWfNaA4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj47nowhkixaqfr5jueq.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IhWfNaA4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj47nowhkixaqfr5jueq.jpg" alt="Image description" width="880" height="571"&gt;&lt;/a&gt;&lt;br&gt;
&lt;u&gt;&lt;strong&gt;Brute Force Attacks&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;One of the oldest hacking tactics is the brute force attack. This involves the hacker testing different username and password combinations until one works. While this can be technically be done manually, the sheer number of possible combinations is generally too time intensive to be realistic. Therefore, hackers usually employ some form of software to randomly generate passwords, and possibly usernames as well if they don't already have one. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Countermeasures&lt;/strong&gt;&lt;br&gt;
From the user's perspective, the best way to defend against a Brute Force Attack is to simply have a password that is difficult to guess. Most password generation software will try more common passwords first, such as variations of the word "password", common words with random numbers at the start or end, words with certain letters replaced with look-alike numbers, etc., so the more random your password is the less likely it is that such a program could quickly guess it.&lt;/p&gt;

&lt;p&gt;Most organizations nowadays employ a variety of methods that make Brute Force Attacks difficult or even impossible, such as password encryption algorithms, two-factor identification methods, or simply locking access to the login page for a few minutes after too many failed login attempts.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eG9Dr4Uh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqk4ze9ef0o7hlqrbogx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eG9Dr4Uh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqk4ze9ef0o7hlqrbogx.jpg" alt="Image description" width="800" height="388"&gt;&lt;/a&gt;&lt;br&gt;
&lt;u&gt;&lt;strong&gt;Denial of Service Attacks&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;These attacks come in two main varieties: DoS/DDoS attacks, and DNS attacks. Both serve to do the same thing: flood a target server with so many dummy requests that it's unable to process legitimate ones, effectively taking it offline.&lt;/p&gt;

&lt;p&gt;The DoS attack is the most basic form of this: a hacker simply sends rapid-fire requests from their own computer, often making use of a program to streamline the process. This version might slow down a server, but only until network security is able to identify the attack - after that all they need to do is block the hacker's IP address to stop it. The more advanced DDoS attack gets around this by recruiting a large number of "zombie" PCs with different IP addresses to assist. This is usually done by distributing some form of malware to as many different unsuspecting devices as possible, so that the hacker can activate them all at the same time to conduct the attack.&lt;/p&gt;

&lt;p&gt;While a DNS attack has the same goal of taking a server down by flooding it with dummy requests, its methodology is a little different. This attack works by spoofing DNS servers, which are what turn internet domain names into IP addresses, by redirecting DNS queries intended for other servers to the target server. After this, the hacker will typically rapidly send queries intended to generate large replies to the DNS server, effectively getting the server to do their dirty work for them. While this method can also make use of "zombie" PCs to increase effectiveness, the fact that the query responses are much larger than the code the hacker is sending effectively means that fewer computers are needed to reach the critical mass necessary to down a server.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Countermeasures&lt;/strong&gt;&lt;br&gt;
Though it is difficult to outright prevent these sorts of attacks, there are a few ways that a company can make them less effective. Firstly, the more bandwidth they have available to them, the harder a hacker needs to work to reach the critical mass of dummy requests needed to down the servers. Moving to the cloud is a good start, as the cloud typically has more bandwidth and stronger security than private networks. For DNS attacks specifically, using Domain Name System Security Extensions (DNSSEC) adds another layer of security for interactions with DNS server to ensure that no malicious redirections have occurred. Beyond these options, al companies can really do is monitor their network traffic for evidence of these attacks and have a plan of action for what to do if one occurs to ensure a swift response.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--imi0zmok--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hybpiv14i9z3r4rz6i3k.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--imi0zmok--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hybpiv14i9z3r4rz6i3k.jpg" alt="Image description" width="509" height="388"&gt;&lt;/a&gt;&lt;br&gt;
&lt;u&gt;&lt;strong&gt;Injection Attacks&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;These attacks involve tricking websites into executing code they did not intend to or modifying the execution of existing code in critical ways. The most common forms are SQL Injection, which targets server side code, and XSS attacks, which target client side code.&lt;/p&gt;

&lt;p&gt;XSS attacks involve the hacker exploiting vulnerabilities to inject their own script into a webpage which will later be executed by a victim's browser when they load that page. This can be done to steal data, install viruses, add phishing ads to the webpage, and more. For instance, they might record the login info of victims, or recruit a victim's computer as a "zombie" for a future DDoS attack.&lt;/p&gt;

&lt;p&gt;SQL attacks, on the other hand, involve strategically entering data into input boxes in order to trick a SQL query into doing what the hacker wants. To illustrate how this works, we will use a simplified example taken from &lt;a href="https://www.youtube.com/watch?v=2OPVViV-GQk"&gt;this YouTube video from channel NetworkChuck&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;Say we are logging in to a website that utilizes databases to store its data. We might be given an input box for Username and another for Password. Once we enter these and click the Login button, the system might be running a query that looks something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM users WHERE username='userNameInput' AND password='passwordInput'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Thus, if we inputted "George" as the username and "password123" as the password, the query would look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM users WHERE username='George' AND password='password123'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With this query, if the username and password don't both match with data from the users table, no value would be returned and the login would fail, but if there was a user "George" whose password was "password123" the query would find it and successfully log in. Well, what if a hacker wanted to log in to George's account, but didn't know their password? Since this hacker knows how SQL queries operate and how certain characters can affect them, and either knows or can guess at what SQL query is being run after the inputs are received, they might instead use the following input for the username field: George'--. Now, the query that is run looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM users WHERE username='George'-- 'AND password='password123'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So what's going on with that query? Well, '--' is the SQL code indicating a comment; essentially it means "ignore everything on this line after this", which means that the "AND password='password123'" line isn't being executed at all, allowing the hacker to login with just a username! And auto-logging in isn't even the worst thing a hacker could do with this exploit. A clever hacker can use it to obtain any sensitive data they want from the database, or even to delete critical information!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Countermeasures&lt;/strong&gt;&lt;br&gt;
Luckily, there are ways to prevent these sorts of attacks, though not all websites employ them. Firewalls, for instance, can be utilized to prevent XSS attacks by constantly patching the website. As for SQL Injection attacks, the most straightforward countermeasure is to "sanitize" the user input. This essentially means preventing user input from affecting queries by, for example, preventing certain characters (like ' for instance) from being read from user input, escaping user input before entering it into queries, or even constructing the code that executes the query in such a way as to prevent user inputs from being misinterpreted as code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sC6YyZi5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq42jxcbxz7i7ahc5v3u.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sC6YyZi5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq42jxcbxz7i7ahc5v3u.jpg" alt="Image description" width="880" height="503"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope that this has been an enlightening overview of some of the more common forms of attack that hackers can employ. Remember: use firewalls/antiviruses/anti-malware programs, keep your software up to date, and be careful what you click on!&lt;/p&gt;

</description>
      <category>hacking</category>
      <category>security</category>
      <category>database</category>
      <category>sql</category>
    </item>
    <item>
      <title>Virtual and Augmented Reality - Is It the Future Already?</title>
      <dc:creator>Magerman714</dc:creator>
      <pubDate>Tue, 28 Feb 2023 05:21:07 +0000</pubDate>
      <link>https://forem.com/magerman714/virtual-and-augmented-reality-is-it-the-future-already-3ofe</link>
      <guid>https://forem.com/magerman714/virtual-and-augmented-reality-is-it-the-future-already-3ofe</guid>
      <description>&lt;p&gt;&lt;strong&gt;VR headsets and virtual HUDs were once mere science fiction, but both exist in modern day! Are these burgeoning fields ripe for innovation, or just a passing fad? And how does one code VR/AR apps anyway?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flrrsporrvnvnzihbo87h.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flrrsporrvnvnzihbo87h.jpg" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Virtual Reality&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;VR has come a long way from the bulky VR arcade machines that some lucky few may have crawled into in the early 90's. Today, there exist a few different VR headset options for home use such as the HTC Vive or Oculus Quest, each costing about as much or even less than a modern gaming console. While these headsets do offer many different video game options such as the well known rhythm game Beat Saber (pictured above), there are other virtual experiences users can enjoy. For instance, many use the popular chat room like VR Chat program for online socialization, where they are able to customize virtual environments or even personal avatars for others to perceive them as. Another example is Google Earth VR, which allows one the experience of standing on any street corner in the world, or even soaring through the air like a superhero!&lt;/p&gt;

&lt;p&gt;VR is not without its flops, of course. Some of these, like the Virtual Boy, were simply too ambitious for the current level of tech. One of the most infamous modern VR flops, however, would be Facebook's "Metaverse", which was designed to be an immersive virtual world which users could shop, play, and even work in. Unfortunately, it was marred by poor design decisions, numerous delays, and a stunning lack of critical features. According to &lt;a href="https://www.slashgear.com/1012807/the-biggest-vr-and-ar-flops-of-all-time/" rel="noopener noreferrer"&gt;Slash Gear&lt;/a&gt;, Metaverse currently sees only about 400 users logged on at any given time, far from the revolutionary product it was pitched as.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqteoki53cw8nxx3l61xg.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqteoki53cw8nxx3l61xg.jpg" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Augmented Reality&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;While Virtual Reality seeks to create immersive virtual environments for users to interact with, Augmented Reality instead seeks to provide an altered view of the real world, usually through some sort of lens or overlay. Nowadays, this is most commonly experienced through a Smartphone, altering the view through the device's camera in some way. One of the most popular AR Smartphone apps is the well known Pokemon Go game, which allows users to find and capture various creatures by physically moving around in the real world. The widely used app Snapchat also sports popular AR technology in the form of various camera lenses which alter faces and/or environments in different ways.&lt;/p&gt;

&lt;p&gt;AR has some practical applications as well, though many of these are still new and not necessarily very widely available. One example of this would be in the automotive industry, where some new models of cars such as the 2022 Mercedes-Benz EQS have incorporated virtual overlays over video feeds on the dashboard or even the windshields of the vehicles themselves! These can communicate things like current speed, visual queues for GPS routes, and even highlighting the sides of the road at night or during visually impairing weather conditions like fog or heavy precipitation. &lt;/p&gt;

&lt;p&gt;Of course, Augmented Reality is not without its flops as well. Google Glass is perhaps the most well known - a product designed to project a virtual overlay onto a pair of glasses worn by the user. Unfortunately, the enthusiasm Google devs had for the device was not shared by their customer base; the product was seen as silly looking and not particularly game changing - few people ever purchased one.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ck6y625iclmkgucxd8t.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3ck6y625iclmkgucxd8t.PNG" alt=" " width="800" height="432"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Under the Hood: How Does the Code Work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;While ultimately providing a different form of functionality (visually modifying the surrounding environment versus creating an entirely new one), both AR and VR operate using the same basic principal: tracking patterns in 3D space using specialized cameras. There are a few ways this is typically done. The most well known method is to use Image Targets, which are graphics which physically exist in the real world and which programs are able to recognize. The most ubiquitous example of these is QR codes, barcode-like graphics that are scannable with most smartphones and which typically provide small bits of data, such as the URL for a restaurant's menu, or an image to display on your phone. Another example would be the controllers for VR headsets, which usually use LED lights or other subtle features to allow the headset cameras to track them. More complicated than that is Plane Detection, which uses  "feature points", patterns that weren't specifically placed to interact with the app. Examples of this would include face detection software as well as the feature of some VR headsets such as the Oculus Quest which detects hands, eliminating the need for controllers. Finally, there is Depth Sensoring, a cutting edge approach for AR which uses a device's depth sensor to measure distance, enabling the placement of virtual objects to be placed and tracked behind real world objects.&lt;/p&gt;

&lt;p&gt;So what does the code actually look like for this sort of thing? Given that, as shown in the graph above, the most commonly used language for VR apps is JavaScript, we will look at some  JavaScript code written by &lt;a href="https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/" rel="noopener noreferrer"&gt;Minhaz&lt;/a&gt; which is used in conjunction with a little bit of HTML to recognize QR codes:&lt;/p&gt;

&lt;p&gt;HTML:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script 
    src="https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js"&amp;gt;
&amp;lt;/script&amp;gt;

&amp;lt;div id="reader"&amp;gt;&amp;lt;/div&amp;gt;

&amp;lt;input type="file" id="qr-input-file" accept="image/*"&amp;gt;
&amp;lt;!-- 
  Or add captured if you only want to enable smartphone camera, PC browsers will ignore it.
--&amp;gt;

&amp;lt;input type="file" id="qr-input-file" accept="image/*" capture&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;JavaScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/**
 * Scans an Image File for QR Code.
 * 
 * This feature is mutually exclusive to camera based scanning, you should call
 * stop() if the camera based scanning was ongoing.
 * 
 * @param {File} imageFile a local file with Image content.
 * @param {boolean} showImage if true the Image will be rendered on given element.
 * 
 * @returns Promise with decoded QR code string on success and error message on failure.
 *            Failure could happen due to different reasons:
 *            1. QR Code decode failed because enough patterns not found in image.
 *            2. Input file was not image or unable to load the image or other image load
 *              errors.
*/
scanFile(imageFile, showImage /* default = true */) {}

const html5QrCode = new Html5Qrcode(/* element id */ "reader");

// File based scanning
const fileinput = document.getElementById('qr-input-file');
fileinput.addEventListener('change', e =&amp;gt; {
  if (e.target.files.length == 0) {
    // No file selected, ignore 
    return;
  }

  // Use the first item in the list
  const imageFile = e.target.files[0];
  html5QrCode.scanFile(imageFile, /* showImage= */true)
  .then(qrCodeMessage =&amp;gt; {
    // success, use qrCodeMessage
    console.log(qrCodeMessage);
  })
  .catch(err =&amp;gt; {
    // failure, handle it.
    console.log(`Error scanning file. Reason: ${err}`)
  });
});

html5QrCode.clear();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As explained by Minhaz in his &lt;a href="https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/" rel="noopener noreferrer"&gt;blog post&lt;/a&gt;, the code above uses a div tag with the placeholder element "reader" in the HTML to hold the scanned QR code, which it reads from the input tag (note that only one of the two input tags in the HTML code block is meant to be included, depending on whether the app is meant to work only with smartphone cameras or if it is intended to work on PCs as well). The JavaScript code then uses an event listener to constantly scan image files for a recognizable QR code. Upon detecting one, it uses a Promise based API system to decode and display the encoded message (or throws an error if a problem occurs). Finally, html5QrCode.clear() is used to clear the canvas after use, as start() and stop() are not supported by the API used for this code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F19jjry0i3i7ejs9x2p4a.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F19jjry0i3i7ejs9x2p4a.jpg" alt=" " width="800" height="578"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Future is Near!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;While the world of VR and AR has had its share of gaffes, both in the past and the present, it definitely has more than a foothold in the modern tech industry. We may not be plugging in to the Matrix in the near future, but these technologies are slowly picking up steam and will likely continue their refinement. With the right innovation, they may even see an explosion in popularity that changes the game in the same way that smartphones, television, or even the internet once did!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sources:&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://www.statista.com/statistics/1343292/coding-languages-used-in-ar-vr-worldwide/#:%7E:text=A%20survey%20conducted%20between%20late,projects%2C%20followed%20closely%20by%20Python" rel="noopener noreferrer"&gt;https://www.statista.com/statistics/1343292/coding-languages-used-in-ar-vr-worldwide/#:~:text=A%20survey%20conducted%20between%20late,projects%2C%20followed%20closely%20by%20Python&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://gamedevacademy.org/how-to-code-an-ar-application/" rel="noopener noreferrer"&gt;https://gamedevacademy.org/how-to-code-an-ar-application/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=YaWzVkI4v0Q" rel="noopener noreferrer"&gt;https://www.youtube.com/watch?v=YaWzVkI4v0Q&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://spectrum.ieee.org/augmented-reality-car-hud?utm_campaign=post-teaser&amp;amp;utm_content=8k7cu2ho" rel="noopener noreferrer"&gt;https://spectrum.ieee.org/augmented-reality-car-hud?utm_campaign=post-teaser&amp;amp;utm_content=8k7cu2ho&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://virtualspeech.com/blog/history-of-vr" rel="noopener noreferrer"&gt;https://virtualspeech.com/blog/history-of-vr&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.slashgear.com/1012807/the-biggest-vr-and-ar-flops-of-all-time/" rel="noopener noreferrer"&gt;https://www.slashgear.com/1012807/the-biggest-vr-and-ar-flops-of-all-time/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://techcrunch.com/2022/03/13/augmented-realitys-half-decade-of-stagnation/" rel="noopener noreferrer"&gt;https://techcrunch.com/2022/03/13/augmented-realitys-half-decade-of-stagnation/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.freecodecamp.org/news/augmented-reality-with-javascript-a-case-study-c9cffaadcf07/" rel="noopener noreferrer"&gt;https://www.freecodecamp.org/news/augmented-reality-with-javascript-a-case-study-c9cffaadcf07/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/" rel="noopener noreferrer"&gt;https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://circuitstream.com/blog/vr-controllers-the-way-of-interacting-with-the-virtual-worlds" rel="noopener noreferrer"&gt;https://circuitstream.com/blog/vr-controllers-the-way-of-interacting-with-the-virtual-worlds&lt;/a&gt;&lt;/p&gt;

</description>
      <category>python</category>
      <category>ai</category>
      <category>programming</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Ruby - How Many Carats is this Gem?</title>
      <dc:creator>Magerman714</dc:creator>
      <pubDate>Mon, 13 Feb 2023 03:55:52 +0000</pubDate>
      <link>https://forem.com/magerman714/ruby-how-many-carats-is-this-gem-3114</link>
      <guid>https://forem.com/magerman714/ruby-how-many-carats-is-this-gem-3114</guid>
      <description>&lt;p&gt;&lt;strong&gt;Ruby is a flexible, high level, object oriented language that prioritizes ease of use for programmers, but how does it compare to tried-and-true JavaScript?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gI83Z91O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0a7947idol2godur8ib.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gI83Z91O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0a7947idol2godur8ib.png" alt="Image description" width="880" height="1320"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;PRO - Easy to Learn and Use&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Ruby was designed by Yukihiro Matsumoto with the goal of being simple, easy to read, and to allow for multiple approaches to achieve a programming goal. The language is known for being easy to interpret, with code being generally intuitive to grasp based simply on the syntax and plain English word choice for various commands, and often less verbose than other languages. To illustrate this, here is a snippet of JavaScript code which creates and then calls a function that will will greet the name passed to it as an argument, followed by a snippet of Ruby code which does the same thing:&lt;/p&gt;

&lt;p&gt;JavaScript:&lt;br&gt;
&lt;code&gt;function greet(name){&lt;br&gt;
   const greeting = "Hello ${name}";&lt;br&gt;
   console.log(greeting);&lt;br&gt;
};&lt;br&gt;
greet("Marcus");&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Ruby:&lt;br&gt;
&lt;code&gt;def greet(name)&lt;br&gt;
   greeting = "Hello #{name}!"&lt;br&gt;
   puts greeting&lt;br&gt;
end&lt;br&gt;
greet("Marcus")&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;As you can see, the Ruby code has a more natural feel to it, eliminating a lot of the more technical characters used by JavaScript, such as the curly braces and variable declaration keyword "const", and uses the keyword "end" to indicate where the function code stops. This makes it easier for a reader to parse, particularly with larger code blocks.&lt;/p&gt;

&lt;p&gt;Of note, Ruby also allows more variation in syntax, allowing the programmer to choose what style they prefer. For instance, the function call in the code snippet above could have instead been written like this:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;greet "Marcus"&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CON - Sharing Code Between Programmers can be Problematic&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Because of the design goal of allowing many different approaches to a coding problem, and especially the syntactic variations the language allows for, two programmers with different coding styles may find it difficult to make use of each others' code, at least by copying. This can make collaboration between multiple programmers on a single project a little more difficult than with other more syntactically strict languages, though it is worth it to note that Ruby does contain functionality to create plug-and-play libraries of programs, called "gems", which can easily be added to other Ruby programs to be made use of, which mitigates this downside to some extent.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;PRO - Flexibility&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;While Ruby is most commonly used for GUIs and web apps/development, it is a highly adaptable language that can be used in a variety of situations. Since just about everything in Ruby is an object, even its base components can be altered or removed as needed to customize it to whatever end the programmer desires. This allows programmers to customize even the basic commands used in the program. &lt;/p&gt;

&lt;p&gt;For example, take this code snippet pulled from &lt;a href="https://www.ruby-lang.org/en/about/"&gt;the about section of the Ruby programming language webpage&lt;/a&gt; which adds a "plus" method that can be used in place of the addition operation:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;class Numeric&lt;br&gt;
  def plus(x)&lt;br&gt;
    self.+(x)&lt;br&gt;
  end&lt;br&gt;
end&lt;br&gt;
y = 5.plus 6&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CON - Programs Run Slowly Compared to Other Languages&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Making just about everything an object does have its price: Ruby programs run notably slower than other coding languages, about 50-200% slower than JavaScript programs in fact. That may sound like a huge problem, but given that most code runs in almost imperceptible amounts of time regardless of language, this really only comes into play with code that requires extremely large numbers of operations to complete. Thus, while it is definitely an issue worthy of consideration, it's also true that it is not even a noticeable problem most of the time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;PRO - Robust and Welcoming Developer Community&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Ruby is an open source language, a fact which draws many developers to it and generally encourages sharing and collaboration in its use. This has resulted in a large, friendly community which is very welcoming to those new to the language, be they beginner programmers or experienced ones looking to add a new language to their repertoire; the community continues to grow even to this day. This gives a lifeline to those still learning the language and those who have been using it for years alike, which is definitely a feather in Ruby's cap. A supportive community not only means updates, improvements, and sharing of tips and tricks, but also a place to go to for help or advice when a programmer's code isn't functioning properly despite their debugging attempts. And speaking of debugging...&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CON - Debugging can be Difficult&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Yes, even with help from the community debugging Ruby can be more difficult than with other languages. This is due in large part to some of the advantages mentioned earlier, namely the highly variable/adaptable syntax and the fact that Ruby is a simple to look at but fairly complex under the hood high level object oriented language. The variety in approach when using this language also means a wide variety of errors, with different users doing the same tasks potentially encountering very different hurdles to face. It is worth it to note that Ruby does have exception handling features to aid in error management, though the underlying complexity of the language means that those may not be enough in every situation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The advantages that Ruby was designed to include are often double edged swords, but given how easy the language is to learn coupled with how adaptable it is, I would argue that it makes both a good first language for a beginner to learn and and a good "back pocket" language for any experienced programmer to pick up. While other programming languages like JavaScript might outclass it in certain areas, the fact is that Ruby is still a widely used language across a variety of coding professions, so learning it will certainly expand your portfolio without consuming too much of your time.&lt;/p&gt;

&lt;p&gt;&lt;u&gt;Sources&lt;/u&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.ruby-lang.org/en/about/"&gt;https://www.ruby-lang.org/en/about/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://blog.boot.dev/javascript/ruby-vs-javascript-which-language-should-you-learn-first/"&gt;https://blog.boot.dev/javascript/ruby-vs-javascript-which-language-should-you-learn-first/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://careerkarma.com/blog/ruby-vs-javascript/"&gt;https://careerkarma.com/blog/ruby-vs-javascript/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://careerkarma.com/blog/what-is-ruby-used-for/"&gt;https://careerkarma.com/blog/what-is-ruby-used-for/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://activebridge.org/blog/what-do-experienced-developers-think-of-ruby-the-ultimate-ruby-guide"&gt;https://activebridge.org/blog/what-do-experienced-developers-think-of-ruby-the-ultimate-ruby-guide&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.youtube.com/watch?v=UYm0kfnRTJk"&gt;https://www.youtube.com/watch?v=UYm0kfnRTJk&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.youtube.com/watch?v=vFEPkXybAlo"&gt;https://www.youtube.com/watch?v=vFEPkXybAlo&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ruby</category>
      <category>javascript</category>
      <category>programming</category>
      <category>writing</category>
    </item>
    <item>
      <title>Recursion</title>
      <dc:creator>Magerman714</dc:creator>
      <pubDate>Tue, 03 Jan 2023 16:16:32 +0000</pubDate>
      <link>https://forem.com/magerman714/recursion-2093</link>
      <guid>https://forem.com/magerman714/recursion-2093</guid>
      <description>&lt;p&gt;&lt;strong&gt;&lt;u&gt;How to Think About Recursion&lt;/u&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Recursion is when a function calls itself in a return statement&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This may be confusing at first - "won't this make an infinite loop?" you might ask. The key in recursive functions is that every time they call themselves, they change their parameters slightly so that an included if statement can check for an end state and properly stop the function from continuing&lt;/p&gt;

&lt;p&gt;for example:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;function recur(count){&lt;br&gt;
if(count === 0){&lt;br&gt;
  return;&lt;br&gt;
}&lt;br&gt;
console.log(count);&lt;br&gt;
return recur(count - 1);&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The above function would print the numbers from count down to 1 to the console; note that it would not print "0" because when count eventually becomes 0, the if statement will simply return. If we wanted to print 0 as well, we'd need another console.log within the return statement.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Another looping mechanism for your repertoire&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The best way I have found to think of recursion is that it's simply another way to do loops. It has all the pieces of, say, a for loop, just in a different order. For instance, if we wanted to print the above function using a for loop it would look like this:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;function forLoop(count){&lt;br&gt;
   for(let i = count; i &amp;gt; 0; i--){&lt;br&gt;
     console.log(i);&lt;br&gt;
   }&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Let's break this down:&lt;/p&gt;

&lt;p&gt;the first part of the for loop, "let i = count", sets up how many iterations we will go through based what argument is passed to the function. No "i" variable is needed in the recursive function, but the argument passed to "count" still serves the same purpose.&lt;/p&gt;

&lt;p&gt;The second part of the for loop, "i &amp;lt; 0", indicates the stop statement for the loop; the loop will continue iterating so long as i is greater than 0. The same functionality is served by the if statement at the top of the recursive function; once count = 0, the loop is ended by a return statement.&lt;/p&gt;

&lt;p&gt;The third part of the for loop, "i--", is what changes the variable that is tested for in order to stop the function once it has gone through all the iterations we want it to, and to prevent it from becoming an infinite loop. The same purpose is covered by the return statement at the end of the recursive function: "return recur(count - 1);". &lt;/p&gt;

&lt;p&gt;So if we think about this, if count = 5, then the first time we go through the recursive function it will console.log count (5), then it will return itself with count - 1 as the argument, so it will essentially return "recur(4)". It will do this until the if statement's condition is met (i.e. it runs "recur(0)"), at which point it will hit the return statement and stop iterating.&lt;/p&gt;

&lt;p&gt;In summary, a recursive function has all of the pieces of a for loop, just in different locations. &lt;/p&gt;

&lt;p&gt;I hope this helps your understanding of recursion!&lt;/p&gt;

</description>
      <category>emptystring</category>
    </item>
  </channel>
</rss>
