<?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>DEV Community: Blake Cooley</title>
    <description>The latest articles on DEV Community by Blake Cooley (@tehbakey).</description>
    <link>https://dev.to/tehbakey</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%2F318373%2Fd9b1a9c5-6f8c-4af8-8433-8cb92829fb75.jpeg</url>
      <title>DEV Community: Blake Cooley</title>
      <link>https://dev.to/tehbakey</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tehbakey"/>
    <language>en</language>
    <item>
      <title>VR with A-Frame</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Sun, 05 Apr 2020 22:44:07 +0000</pubDate>
      <link>https://dev.to/tehbakey/vr-with-a-frame-18d3</link>
      <guid>https://dev.to/tehbakey/vr-with-a-frame-18d3</guid>
      <description>&lt;p&gt;Last week I talked about the awesome &lt;a href="https://github.com/AR-js-org/AR.js"&gt;AR.js&lt;/a&gt;that allows you to create cool augmented reality applications with only Javascript. This week I'm going to dive into AR.js's one dependency, &lt;a href="https://aframe.io/"&gt;A-Frame&lt;/a&gt;, and see how it makes the magic happen.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is A-Frame?
&lt;/h2&gt;

&lt;p&gt;Originally conceived within Mozilla, A-Frame is a web-framework for building virtual reality experiences. Being based on top of HTML makes it simple to get started. A-Frame is now maintained by Supermedium and is an independent open-source project. It can be used within the browsers with mouse controls and supports most VR headsets such as the Vive, Rift, Gear-VR, and Oculus using motion controls.&lt;/p&gt;

&lt;p&gt;The core of A-Frame is it's entity component that lets you define objects and their attributes: these can be your own 3D models or some of the primitives objects provided by the frame work(a-box, a-sphere, a-sky, etc).&lt;/p&gt;

&lt;h2&gt;
  
  
  Code example
&lt;/h2&gt;

&lt;p&gt;Here is an example of A-Frame at works, you can see this example live &lt;a href="https://glitch.com/~aframe"&gt;here&lt;/a&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"https://aframe.io/releases/1.0.4/aframe.min.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;a-scene&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;a-box&lt;/span&gt; &lt;span class="na"&gt;position=&lt;/span&gt;&lt;span class="s"&gt;"-1 0.5 -3"&lt;/span&gt; &lt;span class="na"&gt;rotation=&lt;/span&gt;&lt;span class="s"&gt;"0 45 0"&lt;/span&gt; &lt;span class="na"&gt;color=&lt;/span&gt;&lt;span class="s"&gt;"#4CC3D9"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/a-box&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;a-sphere&lt;/span&gt; &lt;span class="na"&gt;position=&lt;/span&gt;&lt;span class="s"&gt;"0 1.25 -5"&lt;/span&gt; &lt;span class="na"&gt;radius=&lt;/span&gt;&lt;span class="s"&gt;"1.25"&lt;/span&gt; &lt;span class="na"&gt;color=&lt;/span&gt;&lt;span class="s"&gt;"#EF2D5E"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/a-sphere&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;a-cylinder&lt;/span&gt; &lt;span class="na"&gt;position=&lt;/span&gt;&lt;span class="s"&gt;"1 0.75 -3"&lt;/span&gt; &lt;span class="na"&gt;radius=&lt;/span&gt;&lt;span class="s"&gt;"0.5"&lt;/span&gt; &lt;span class="na"&gt;height=&lt;/span&gt;&lt;span class="s"&gt;"1.5"&lt;/span&gt; &lt;span class="na"&gt;color=&lt;/span&gt;&lt;span class="s"&gt;"#FFC65D"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/a-cylinder&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;a-plane&lt;/span&gt; &lt;span class="na"&gt;position=&lt;/span&gt;&lt;span class="s"&gt;"0 0 -4"&lt;/span&gt; &lt;span class="na"&gt;rotation=&lt;/span&gt;&lt;span class="s"&gt;"-90 0 0"&lt;/span&gt; &lt;span class="na"&gt;width=&lt;/span&gt;&lt;span class="s"&gt;"4"&lt;/span&gt; &lt;span class="na"&gt;height=&lt;/span&gt;&lt;span class="s"&gt;"4"&lt;/span&gt; &lt;span class="na"&gt;color=&lt;/span&gt;&lt;span class="s"&gt;"#7BC8A4"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/a-plane&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;a-sky&lt;/span&gt; &lt;span class="na"&gt;color=&lt;/span&gt;&lt;span class="s"&gt;"#ECECEC"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/a-sky&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/a-scene&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, the only thing we have to do is toss in A-Frame as a script tag in the head, no installation required.&lt;/p&gt;

&lt;p&gt;Inside the body we have our a-scene, the container for the 3D scene we're trying to create. Inside of that we have five primitives. A-Box, a-sphere, and a-cylinder, each being an entity we declare with size and color properties. Under there, both in the code and the render, we declare a a-plane, and finally, we declare an off-white a-sky entity.&lt;/p&gt;

&lt;p&gt;Aframe's site has a lot of other examples, both using mouse controls and VR motion controllers. This &lt;a href="https://aframe.io/examples/showcase/hello-metaverse/"&gt;one&lt;/a&gt; is my favorite, nothing says VR like 80's vaporwave &lt;em&gt;a&lt;/em&gt; &lt;em&gt;e&lt;/em&gt; &lt;em&gt;s&lt;/em&gt; &lt;em&gt;t&lt;/em&gt; &lt;em&gt;h&lt;/em&gt; &lt;em&gt;e&lt;/em&gt; &lt;em&gt;h&lt;/em&gt; &lt;em&gt;i&lt;/em&gt; &lt;em&gt;c&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;You can check out the collection of example available &lt;a href="https://aframe.io/"&gt;here&lt;/a&gt; at A-Frame's website, if you click "View Source" in the top corner it will open them in a separate tab and you can use the developer tools to look at the code, or click "Visual Inspector" to see how each entity is defined, you can even click each one to mess with their properties and watch the scene change in real time!&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;VR doesn't have to be hard and it's certainly not as daunting of a task as it might seem. Using A-Frame you can create 3D VR environments in a matter of minutes instead of hours, and being an open-source project means it's completely free and will constantly be made better by the community. I look forward to playing around with A-Frame and seeing VR continue to grow. &lt;/p&gt;

&lt;p&gt;As VR headset development continues they'll become cheaper and more accessible to the public, so now is a good time to get ahead of the curve and create some awesome VR experinces!&lt;/p&gt;

</description>
      <category>aframe</category>
      <category>vr</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Augment Reality with AR.JS</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Mon, 30 Mar 2020 04:44:55 +0000</pubDate>
      <link>https://dev.to/tehbakey/augment-reality-with-ar-js-3i58</link>
      <guid>https://dev.to/tehbakey/augment-reality-with-ar-js-3i58</guid>
      <description>&lt;p&gt;If you ever want proof that we're truly living in the cyberpunk future you can look at our corrupt governments, massive megacorporations and the massive spread of misinformation. Or, on the more fun side, augmented and virtual reality is pretty neat too.&lt;/p&gt;

&lt;p&gt;It seems like it would be pretty hard to do, using a camera to track an area and render out a 3D model where no such thing exists, but with &lt;a href="https://aframe.io/"&gt;A-Frame&lt;/a&gt; and &lt;a href="https://github.com/AR-js-org/AR.js"&gt;AR.JS&lt;/a&gt; it's surprisingly easy.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is AR.JS?
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NKePA6rc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://ar-js-org.github.io/AR.js-Docs/intro-image.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NKePA6rc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://ar-js-org.github.io/AR.js-Docs/intro-image.gif" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;AR.JS is a lightweight javascript framework that allows you to create image tracking, marker tracking, and location based AR experiences for either mobile devices or the web using a camera.&lt;/p&gt;

&lt;p&gt;It's completely web-based, requiring no installation, just Javascript and the A-Frame or three.js VR frame work to work. It's also completely free and open source bringing the awesomeness of AR to the masses! &lt;/p&gt;

&lt;p&gt;Below is a example of the image tracking code. Visit this &lt;a href="https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft/"&gt;link&lt;/a&gt; and point your camera at this &lt;a href="https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex-image-big.jpeg"&gt;image&lt;/a&gt; to see it live.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;arjs&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;loader&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="o"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;absolute&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;top&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;background&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;rgba&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.8&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;index&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;9999&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;justify&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;arjs&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;loader&lt;/span&gt; &lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;center&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;font&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;1.25&lt;/span&gt;&lt;span class="nx"&gt;em&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/style&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt; &lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;margin : 0px; overflow: hidden;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="c"&gt;&amp;lt;!--&lt;/span&gt; &lt;span class="nx"&gt;minimal&lt;/span&gt; &lt;span class="nx"&gt;loader&lt;/span&gt; &lt;span class="nx"&gt;shown&lt;/span&gt; &lt;span class="nx"&gt;until&lt;/span&gt; &lt;span class="nx"&gt;image&lt;/span&gt; &lt;span class="nx"&gt;descriptors&lt;/span&gt; &lt;span class="nx"&gt;are&lt;/span&gt; &lt;span class="nx"&gt;loaded&lt;/span&gt; &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;arjs-loader&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Loading&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;please&lt;/span&gt; &lt;span class="nx"&gt;wait&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;scene&lt;/span&gt;
    &lt;span class="nx"&gt;vr&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;mode&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;ui&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;enabled: false;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="nx"&gt;renderer&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;logarithmicDepthBuffer: true;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="nx"&gt;embedded&lt;/span&gt;
    &lt;span class="nx"&gt;arjs&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;trackingMethod: best; sourceType: webcam;debugUIEnabled: false;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
  &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="c"&gt;&amp;lt;!--&lt;/span&gt; &lt;span class="nx"&gt;we&lt;/span&gt; &lt;span class="nx"&gt;use&lt;/span&gt; &lt;span class="nx"&gt;cors&lt;/span&gt; &lt;span class="nx"&gt;proxy&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;avoid&lt;/span&gt; &lt;span class="nx"&gt;cross&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;origin&lt;/span&gt; &lt;span class="nx"&gt;problems&lt;/span&gt; &lt;span class="o"&gt;--&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;nft&lt;/span&gt;
      &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;nft&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="nx"&gt;smooth&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;true&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="nx"&gt;smoothCount&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;10&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="nx"&gt;smoothTolerance&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="nx"&gt;smoothThreshold&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;entity&lt;/span&gt;
        &lt;span class="nx"&gt;gltf&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;model&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
        &lt;span class="nx"&gt;scale&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;5 5 5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
        &lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;50 150 0&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/a-entity&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/a-nft&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;entity&lt;/span&gt; &lt;span class="nx"&gt;camera&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/a-entity&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/a-scene&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/body&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To briefly explain what's going on here:&lt;/p&gt;

&lt;p&gt;"a-scene" defines the the A-Frame container where all of the magic will happen, nested inside of that is "a-nft" which define the Natural Feature Tracking (NFT) marker that will be used to render out our 3-d model defined in "a-entity".&lt;/p&gt;

&lt;p&gt;Combine all three of these and now you can render out a 3-d T-Rex wherever the image is detected by your webcam or mobile camera.&lt;/p&gt;

&lt;p&gt;This same effect can be achieved using markers, such as QR codes, some default ones are provided in the AR.JS docs.&lt;/p&gt;

&lt;p&gt;This is just the tip of the iceberg, and I'm pretty excited to explore more AR in the future, hopefully with how easy AR.JS is to implement we can see AR become more than the neat gimmick it has been so far.&lt;/p&gt;

</description>
      <category>ar</category>
      <category>javascript</category>
      <category>augmentedreality</category>
    </item>
    <item>
      <title>Linden Scripting Language</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Tue, 24 Mar 2020 01:11:04 +0000</pubDate>
      <link>https://dev.to/tehbakey/linden-scripting-language-3aea</link>
      <guid>https://dev.to/tehbakey/linden-scripting-language-3aea</guid>
      <description>&lt;h2&gt;
  
  
  Into the Metaverse
&lt;/h2&gt;

&lt;p&gt;Way back in 2006 while watching TechTV I got my first glimpse at Second Life, the online social game that would take up huge chunks of my life from then on. At the time, and in a lot of ways even now, it was the coolest thing I had ever seen. This huge 3D world where everything was made by the users. The clothes you wear, the places you visit, and most importantly, the scripts that make everything run were all created by the people playing the game.&lt;/p&gt;

&lt;p&gt;The scripting part in particular took my interest, and it's one of the primary reasons I started to learn coding. Making interactive creations, no matter how simple or silly they were, and watching them work was like magic. Now I just do it with mobile phones and browsers but the spark that created it all started off in Second Life.&lt;/p&gt;

&lt;p&gt;It's for that reason I'm going to give you all a brief glimpse into the code that runs that digital world, LSL, or Linden Scripting Language. &lt;/p&gt;

&lt;h2&gt;
  
  
  What is LSL?
&lt;/h2&gt;

&lt;p&gt;LSL is the language that all the scripts in Second Life run on. These sets of instructions can be put into any object you create inside of the game. It can be used to make all kinds of crazy things, from cars, guns, lights, doors, even games inside a game (meta, right?).&lt;/p&gt;

&lt;p&gt;These scripts can be written and compiled in an in-game editor where they are executed by the game's servers. It's structure is largely based on Java and C but with an emphasis on states and events. But besides that it has many of the features you'd come to expect from a programming language: functions, flow-control with if and while statements, and operators.&lt;/p&gt;

&lt;p&gt;If you want to script a door, it can have a state such as "open" or "closed", a lamp would have the states of "on" and "off", a digital firearm can be "loaded" or "empty", etc etc.&lt;/p&gt;

&lt;p&gt;Events are the triggers in Second Life that fire off functions and change the state of an object. These event can be a variety of things, saying a certain string in the chatbox, clicking or bumping into an object, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  Hello &lt;del&gt;World&lt;/del&gt; Avatar
&lt;/h2&gt;

&lt;p&gt;Here is the most basic script in LSL, a simple "Hello World" that fires off when the object is "rezzed", or loaded into the world, and a chat message of "touched" when a user clicks on the object.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;default
{
    state_entry()
    {
        llSay(0, "Hello, Avatar!");
    }

    touch_start(integer total_number)
    {
        llSay(0, "Touched.");
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And here's a breakdown of whats happening on each line:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;default // All Scripts need a Default State

{ // this open curly bracket denotes the start of the state
    state_entry() // an event
    {
        llSay(0, "Hello, Avatar!"); // a function inside the event's curly brackets
    } // closed curly bracket closes the state_entry event

    touch_start(integer total_number)  // another event inside default state
    {
        llSay(0, "Touched."); // a function between the brackets of the touch_start body
    } // end of touch start
} // Code end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And here's an example of script that turns an object from a white texture to black on click, something that could be useful for, say, a lamp or light fixture:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;default //default state is mandatory
{
    state_entry() // runs each time the state is entered
    {
        llSay(0, "turning on!"); //object speaks!
        llSetColor(&amp;lt;1.0, 1.0, 1.0&amp;gt;, ALL_SIDES); // sets no tint (white)
        // note the semicolons at the end of each instruction
        // (do not put them at the end of "if" statements)
    }

    touch_end(integer total_number) // another event with only one function inside
    {
        state off; // sets the script to a new "state" and starts running "state off"
    }
} // this curly bracket ends the body of the default state.

state off // a second state besides "default"
{
    state_entry() // this is run as soon as the state is entered
    {
        llSay(0, "turning off!");
        llSetColor(&amp;lt;0.0, 0.0, 0.0&amp;gt;, ALL_SIDES); // sets black tint
    }

    touch_end(integer total_number)
    {
        state default;
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally, here's something I created. This script takes an image consisting of each still frame of an animated gif and modifies it's positioning on each tick to create an animated texture in game, which I then tossed into a pair of sunglasses someone made to create this cool static effect on the lenses. &lt;/p&gt;

&lt;p&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; integer animOn = TRUE; //Set to FALSE and call initAnim() again to stop the animation.
  5 //Effect parameters: (can be put in list together, to make animation have all of said effects)
  6 //LOOP - loops the animation
  7 //SMOOTH - plays animation smoothly
  8 //REVERSE - plays animation in reverse
  9 //PING_PONG - plays animation in one direction, then cycles in the opposite direction
 10 list effects = [LOOP];
 11 //Movement parameters (choose one):
 12 //ROTATE - Rotates the texture
 13 //SCALE - Scales the texture
 14 //Set movement to 0 to slide animation in the X direction, without any special movement.
 15 integer movement = 0;
 16 integer face = ALL_SIDES; //Number representing the side to activate the animation on.
 17 integer sideX = 1; //Represents how many horizontal images (frames) are contained in your texture.
 18 integer sideY = 1; //Same as sideX, except represents vertical images (frames).
 19 float start = 0.0; //Frame to start animation on. (0 to start at the first frame of the texture)
 20 float length = 0.0; //Number of frames to animate, set to 0 to animate all frames.
 21 float speed = 10.0; //Frames per second to play.
 22 initAnim() //Call this when you want to change something in the texture animation.
 23 {
 24     if(animOn)
 25     {
 26         integer effectBits;
 27         integer i;
 28         for(i = 0; i &amp;lt; llGetListLength(effects); i++)
 29         {
 30             effectBits = (effectBits | llList2Integer(effects,i));
 31         }
 32         integer params = (effectBits|movement);
 33         llSetTextureAnim(ANIM_ON|params,face,sideX,sideY,     start,length,speed);
 34     }
 35     else
 36     {
 37         llSetTextureAnim(0,face,sideX,sideY, start,length,speed);
 38     }
 39 }
 40 
 41 fetch()
 42 {
 43      string texture = llGetInventoryName(INVENTORY_TEXTURE,0);
 44             llSetTexture(texture,face);
 45             list data  = llParseString2List(texture,[";"],[]);
 46             llOwnerSay( llDumpList2String(data ,","));
 47             string X = llList2String(data,1);
 48             string Y = llList2String(data,2);
 49             string Z = llList2String(data,3);
 50             
 51             // llOwnerSay("X=" + X + " Y=" + Y + " Z = " + (string) Z);
 52             
 53             sideX = (integer) X;
 54             sideY = (integer) Y;
 55             speed = (float) Z;
 56             if(speed) 
 57                 initAnim();
 58 }
 59 
 60 default
 61 {
 62     state_entry()
 63     {
 64         llSetTextureAnim(FALSE, face, 0, 0, 0.0, 0.0, 1.0); // V2 - remove all anims
 65         fetch();
 66     }
 67     changed(integer what)
 68     {
 69         if(what &amp;amp; CHANGED_INVENTORY)
 70         {
 71             fetch();
 72         }
 73     }
 74 }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And this is, obviously, just the tip of the iceberg of what you can do with LSL. Better coders than I have made some truly amazing things in the game. If you'd like to know more about LSL check out the SL &lt;a href="http://wiki.secondlife.com/wiki/LSL_Portal"&gt;wiki&lt;/a&gt; and maybe even download the game and give it a shot (just, uh, avoid the adult sims).&lt;/p&gt;

</description>
      <category>secondlife</category>
      <category>java</category>
      <category>c</category>
      <category>games</category>
    </item>
    <item>
      <title>Intro To Mobile Development</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Mon, 16 Mar 2020 09:59:14 +0000</pubDate>
      <link>https://dev.to/tehbakey/into-to-mobile-development-1m1l</link>
      <guid>https://dev.to/tehbakey/into-to-mobile-development-1m1l</guid>
      <description>&lt;p&gt;So far the applications I've made throughout my bootcamp journey have all been browser based web apps but for our final project our group decided to make the jump into mobile development.&lt;/p&gt;

&lt;p&gt;Developing on mobile has some unique differences and hurdles to overcome over what we're used to as we learned, but in a world where everyone has a little black mirror in their pocket you'd be selling yourself short as a software developer not to make the jump.&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Differences
&lt;/h2&gt;

&lt;p&gt;Working as a front-end developer for a web application has you manipulating the DOM, Document Object Model, the source of all the HTML that makes your (hopefully) awesome website work. First we did it just by hammering out HTML, then came JQuery, and finally MVC's like React or Angular.&lt;/p&gt;

&lt;p&gt;In mobile, you'd don't have a DOM, instead you work with Views. All those old tricks you used before to make stuff look fancy no longer apply. Even styling libraries like &lt;a href="https://getbootstrap.com/"&gt;Bootstrap&lt;/a&gt; can no longer give you fancy buttons and such, as there's no HTML to be had, instead you have to use something like &lt;a href="https://react-native-elements.github.io/react-native-elements/"&gt;React Native Elements&lt;/a&gt; (or an equivalent for whichever native framework you're using) to render those elements out as components instead.&lt;/p&gt;

&lt;p&gt;The next big hurdle is your server side code, for a web application connecting your front-end and back-end is much easier. There's no issue at all hosting both of the code on your deployment server of choice- but for mobile applications you can't bundle the two together. Your backend code needs to be hosted somewhere on the web your mobile application can hit, leaving all the heavy lifting to that server while your client end stays fairly lightweight.&lt;/p&gt;

&lt;p&gt;This is a process that, as one of my partners found out, is not so easy. All those nice debugger tools like the Chrome Dev Console are no where to be found. So when something doesn't work, you don't have the luxury of console logs and breakpoints to give you a quick easy look at whats going on under the hood.&lt;/p&gt;

&lt;p&gt;And one of the biggest hurdles I've had to face so far is actually getting to see  how your application is going to look on a mobile device. Using Expo does give you a nice feature that lets you scan a QR code to display a version of code on an actual mobile device, but that presents it's own difficulties during local testing when trying to hit your backend code. &lt;/p&gt;

&lt;p&gt;The more practical solution is to use an emulator, either through Android Studio or XCode for Android and iOS repectfully (as well as some third party software like &lt;a href="https://www.genymotion.com/"&gt;Genymotion&lt;/a&gt;). Though if you're running a fossil of a laptop like mine, be prepared for headache. You're running a simulated version of an entire device, so be prepared for lag, locks ups, or if you're me, just straight up crashing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Not Hard, Just New
&lt;/h2&gt;

&lt;p&gt;Despite all the hoops I have to jump through, I'm looking forward to learning more about mobile development- both for the boost it'll give to my hire-ability but also for the challenge of learning something new. Right now I don't have many answers for the problems I've listed here, but I'm excited to figure them all out and hopefully share them with you all soon!&lt;/p&gt;

&lt;p&gt;Wish me luck, and email me some RAM, please.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Google Cloud</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Mon, 09 Mar 2020 04:55:27 +0000</pubDate>
      <link>https://dev.to/tehbakey/google-cloud-2m2m</link>
      <guid>https://dev.to/tehbakey/google-cloud-2m2m</guid>
      <description>&lt;p&gt;If you're new to deployment and are thinking of using Google Cloud, I have one word of advice: Don't.&lt;/p&gt;

&lt;p&gt;Don't get me wrong, there's a lot to like about their systems. If you're deploying a simple app or a webpage the process is fairly painless, but as I found after three days of frustration, furious Google searches, and page after page of lengthy documentation it's not always as easy as those friendly videos would lead you to believe.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Good
&lt;/h2&gt;

&lt;p&gt;Before I regal you with my tales of Google-based woe, first lets talk about what it does right.&lt;/p&gt;

&lt;p&gt;If you're making a new account, Google gives you a rather generous free trial to test out their services- 300$ dollars worth to be exact. If you're deploying something that doesn't use a database those dollars will stretch a long way, standing in stark contrast to a certain other cloud-computing service that is quick to bill you.&lt;/p&gt;

&lt;p&gt;You have the option of either using the SDK which let you run the various commands you might need directly from your local machine's terminal or failing that there's always a handy web-based terminal waiting for you in the top right of your dashboard. &lt;/p&gt;

&lt;p&gt;There's a few cloud computing options for whatever needs you might have, though the one I used was App Engine: &lt;br&gt;
-App Engine is a scalable option that automatically creates new instances as your traffic increases. It also takes much of the legwork away from you, all you need to do is add an .yaml file with some basic configuration then either push your repo from Github or, if you have the handy SDK installed, use 'gcloud app deploy' from your app's directory and a few minutes later- you're live, baby!&lt;/p&gt;

&lt;h2&gt;
  
  
  The Bad
&lt;/h2&gt;

&lt;p&gt;First, let's talk about documentation. It all sucks, it's just a fact of life that you're future as a software engineer would be filled with two brands of crappy documentation: horribly vague lists of functions and keywords with maybe a 'hello world' quick-start guide OR massive tombs of information that would put encyclopedias to shame and leave your head spinning.&lt;/p&gt;

&lt;p&gt;Google's doc's come in the latter form. Page after page with links that lead to more and more pages, until your is so full of tabs you can barely find the x's to close them. It's a rabbit hole you'll find yourself diving into the second you have a problem and the sheer amount of information at hand means finding the solution you need is like finding a needle in a exponentially large haystack.&lt;/p&gt;

&lt;p&gt;My three day long dive into their documentation was over what seemed to be a simple problem, connecting the CloudSQL database to the NodeJS backend on my app. The guide they provided was simple enough to follow...the problem is, it didn't work. It was only by the grace of one of my colleges who'd face my problem before did I finally find the answer I needed: an obscure beta setting I pasted into my .yaml file that suddenly made the entire thing work- and the only reason she had found that was due to her having twice the time I had to dig through the wizardly tome of information on the web.&lt;/p&gt;

&lt;h2&gt;
  
  
  The &lt;del&gt;Ugly&lt;/del&gt; Conclusion
&lt;/h2&gt;

&lt;p&gt;Despite my protests to the contrary, Google Cloud isn't the worst thing in the world. When it works, it works well, but when it doesn't it can be a nightmare. Though, in my brief experience with deployment: it's always going to suck. Just be prepared for the pain, have a bottle of aspirin ready, and solider on through.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Document vs Relational Databases</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Mon, 10 Feb 2020 03:36:42 +0000</pubDate>
      <link>https://dev.to/tehbakey/document-vs-relational-databases-4km7</link>
      <guid>https://dev.to/tehbakey/document-vs-relational-databases-4km7</guid>
      <description>&lt;p&gt;When it comes time to pick the database you'd like to use for the back-end of your particular application you have two choices for the type you'd like to use. Relational, or SQL, databases and Document, or noSQL databases.&lt;/p&gt;

&lt;p&gt;In general terms, a SQL database is any that uses Structured Query Language and a noSQL database is well...those that do not. So, lets get into what exactly that entails.&lt;/p&gt;

&lt;h2&gt;
  
  
  SQL/Relational
&lt;/h2&gt;

&lt;p&gt;As mentioned above, SQL databases use Structured Query Language which was developed by IBM in the 1970's. SQL stores data in a schema that uses tables with columns and rows. In the most basic example, you can think of a SQL database like a phone book: each column would be the phone-number, name, and address while each row would be relation for each particular person. You can use one of of those three data-points to find the others, if you know a person's name you can find their address and number. (Especially if you can scan through the entire phonebook in a matter of seconds like a computer.)&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ngnIrWbR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://emarcel.com/wp-content/uploads/data_scrap.jpg" alt=""&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Each of these tables can also cross-reference other tables where those data-points might intersect. These relationship are either a one-to-many relationship (one users can have many blog posts), or a many-to-many relationship (each of those blog posts can have many comments). Below you can see an example of a schema for a chat application  using &lt;a href="https://dbdiagram.io/home"&gt;dbdiagram.io&lt;/a&gt;. &lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vWCyb0tw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/0HGzyAI.png" alt="example"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;CREATE&lt;/span&gt; &lt;span class="nx"&gt;DATABASE&lt;/span&gt; &lt;span class="nx"&gt;chat&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;USE&lt;/span&gt; &lt;span class="nx"&gt;chat&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;CREATE&lt;/span&gt; &lt;span class="nx"&gt;TABLE&lt;/span&gt; &lt;span class="s2"&gt;`messages`&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="s2"&gt;`id`&lt;/span&gt; &lt;span class="nx"&gt;int&lt;/span&gt; &lt;span class="nx"&gt;PRIMARY&lt;/span&gt; &lt;span class="nx"&gt;KEY&lt;/span&gt; &lt;span class="nx"&gt;AUTO_INCREMENT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;username&lt;/span&gt; &lt;span class="nx"&gt;varchar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="s2"&gt;`id_user`&lt;/span&gt; &lt;span class="nx"&gt;int&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="s2"&gt;`room_id`&lt;/span&gt; &lt;span class="nx"&gt;int&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="s2"&gt;`text`&lt;/span&gt; &lt;span class="nx"&gt;varchar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;250&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="nx"&gt;roomname&lt;/span&gt; &lt;span class="nx"&gt;varchar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;CREATE&lt;/span&gt; &lt;span class="nx"&gt;TABLE&lt;/span&gt; &lt;span class="s2"&gt;`rooms`&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="s2"&gt;`id`&lt;/span&gt; &lt;span class="nx"&gt;int&lt;/span&gt; &lt;span class="nx"&gt;PRIMARY&lt;/span&gt; &lt;span class="nx"&gt;KEY&lt;/span&gt; &lt;span class="nx"&gt;AUTO_INCREMENT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="s2"&gt;`name`&lt;/span&gt; &lt;span class="nx"&gt;varchar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;CREATE&lt;/span&gt; &lt;span class="nx"&gt;TABLE&lt;/span&gt; &lt;span class="s2"&gt;`users`&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="s2"&gt;`id`&lt;/span&gt; &lt;span class="nx"&gt;int&lt;/span&gt; &lt;span class="nx"&gt;PRIMARY&lt;/span&gt; &lt;span class="nx"&gt;KEY&lt;/span&gt; &lt;span class="nx"&gt;AUTO_INCREMENT&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="s2"&gt;`username`&lt;/span&gt; &lt;span class="nx"&gt;varchar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Relational databases are very useful for situations where you might have a lot of data that intersects with each others, though it takes a fair bit of planning as each field must have it's data-type specified, and in the case of strings you also need to declare the maximum character limit.&lt;/p&gt;

&lt;h2&gt;
  
  
  Document/NoSQL
&lt;/h2&gt;

&lt;p&gt;Document databases don't require the careful planning of a SQL database but are more limited in their use. They instead store data in collections consisting of documents (something like a JSON). You can picture a document database like a filing cabinet and the collections as folders. The folders/collections will tell you what type of document is inside them but you can't access the information inside those documents until you pull them out of the folder.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2Hrjsa3K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.safe.com/wp-content/uploads/2016/09/07141757/Data-to-JSON-to-NoSQL.png" alt="nosql"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;This offers a lot more flexibility as you don't have to meticulously plan out your data into tables but this comes at the cost of speed and size. Since you're just storing full on objects you'll have to pull them out of the database and into your application to get any specif data instead of just querying what information you're looking for in particular like in a SQL database.&lt;/p&gt;

&lt;h2&gt;
  
  
  Which should you use?
&lt;/h2&gt;

&lt;p&gt;That depends entirely on what kind of data you're working with and what you plan to do with it. If you're working with lots of unorganized data then a document database might suit you better, if your data is more structured and you application needs to access specific information and how it related to other data-points then a relational database is a better fit.&lt;/p&gt;

</description>
      <category>database</category>
      <category>sql</category>
      <category>nosql</category>
    </item>
    <item>
      <title>Dealing With Impostor Syndrome</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Mon, 03 Feb 2020 05:00:15 +0000</pubDate>
      <link>https://dev.to/tehbakey/dealing-with-impostor-syndrome-5cmg</link>
      <guid>https://dev.to/tehbakey/dealing-with-impostor-syndrome-5cmg</guid>
      <description>&lt;p&gt;Every Monday morning is motivational Monday at Operation Spark, where the students and teachers gather up in a circle to sum up the coming week's events after a mantra:&lt;/p&gt;

&lt;p&gt;"I belong, you belong. I'm smart, you're smart. I'm talented, you're talented...."&lt;/p&gt;

&lt;p&gt;When I first had to do it, it made my eyes roll and gave me flashbacks of working at Wal-Mart with their equally cringe chants every morning of my painful stint in retail. But after one of my roughest weeks in the program, I understand the importance of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What you're getting into
&lt;/h2&gt;

&lt;p&gt;If you ever take a look at the Programmer Humor subreddit, you'll notice a common theme: Coding is pain. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Countless hours of debugging and scary red error messages- only to find it was a typo your brain just completely ignored. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Installing a program you desperately need to make a project that won't work and finding one forum post from 2008 with no solution to the exact obscure error you're having.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scouring page after page of documentation that reads like a stereo manual just to find that one freakin' command you need.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Making a Stack Overflow post for what you felt like was a insurmountable problem only to be meet with snark and bile because god forbid you ask a question that someone else already did.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is just a small list of the frustration that awaits you.&lt;/p&gt;

&lt;p&gt;But the worst part is, sometimes you just don't get it. You sit there staring at the screen and your bajillion tabs open in Chrome and all you want to do is bash you face against the keyboard. Tossing code at the wall, hoping it sticks. &lt;/p&gt;

&lt;p&gt;All the while frustration mounts as the clock ticks down to your deadline, and if you're anything like me: you just snap.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Downward Spiral
&lt;/h2&gt;

&lt;p&gt;Sitting on the steps outside of the building, puffing on a cigarette, the thoughts started creeping in. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;"You're not cut out for this, you're too dumb to figure this stuff out, you're going to fail the test and waste six weeks of your life thinking you could be some code cowboy."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Next thing I knew I was hiding in the bathroom, tearing steaming down my face, seriously debating swearing off every touching a keyboard again. But as my colleagues and teachers reminded me: Everyone has been there.&lt;/p&gt;

&lt;p&gt;That feeling of being lost, frustrated, and confused is a common experience- not just in coding but in life in general. Nothing worth doing comes without pain and hurting now only makes you stronger later.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pulling Yourself Back Up
&lt;/h2&gt;

&lt;p&gt;The most important thing is, don't beat yourself up for that moment of weakness. Anxiety, doubt, and depression have been plaguing people for as long as there have been people. As Shakespeare had written in &lt;em&gt;Measure for Measure&lt;/em&gt;:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;“Our doubts are traitors,&lt;br&gt;
and make us lose the good we oft might win,&lt;br&gt;
by fearing to attempt.”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;And we've been talking about that guy for hundreds of years, so he must of been onto something.&lt;/p&gt;

&lt;p&gt;So, just remember, 'I belong, I'm smart, I'm talented. You belong, you're smart, you're talented.'&lt;/p&gt;

&lt;p&gt;Keep fighting, struggle through the pain, come out the end a better person, and don't feel discouraged when the darker parts of your mind creep in.&lt;/p&gt;

</description>
      <category>bootcamp</category>
    </item>
    <item>
      <title>Installing Linux or How I Stopped Worrying and Learned to Love the Penguin</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Mon, 27 Jan 2020 04:32:35 +0000</pubDate>
      <link>https://dev.to/tehbakey/installing-linux-or-how-i-stopped-worrying-and-learned-to-love-the-penguin-3i1m</link>
      <guid>https://dev.to/tehbakey/installing-linux-or-how-i-stopped-worrying-and-learned-to-love-the-penguin-3i1m</guid>
      <description>&lt;h2&gt;
  
  
  Why I made the jump:
&lt;/h2&gt;

&lt;p&gt;Windows is great for a lot of things but using it as your development environment, not so much. Sure, Microsoft has made some advancements recently that makes things easier: virtual desktop support on Windows 10, Windows Subsystem for Linux, and the oh so wonderful VSCode, but it's not without it's headaches even still.&lt;/p&gt;

&lt;p&gt;One of the problems is you actually need Windows 10 to get the aforementioned features and if you were like me with a absolutel fossil of a laptop still running Windows 7 you're left with the nightmare of actually installing it. I still have PTSD over loosing an entire day's worth of course work due to downloading 40 gigs worth of OS. Who knows many hours of sleep I've lost to  waking up in a cold sweat, the memory of that sky blue screen mocking me with it's slowly creeping percentage while my colleagues coded away. &lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vU8E31rk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.pinimg.com/originals/5e/32/8d/5e328dc11b7b8b20154c39779fae3aa8.jpg" alt="windows10install"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt; THE HORROR &lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Afterwards my experience with coding on Windows was still a bumpy ride- often times things never worked out of the box and needed some asinine work-around I'd spend way too long googling, and I was assured by many that it wouldn't get any better. So I decided to make the jump into the scary new world of an unfamiliar OS.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to actually get it installed:
&lt;/h2&gt;

&lt;p&gt;The first step you have to make is picking your distribution or distro. Linux just isn't one Linux, as an open-source OS there's a variety of versions that all have a different focus. Fancy yourself an ethical hacker who wants to find security holes to fix then give &lt;a href="https://www.kali.org/"&gt;Kali&lt;/a&gt; a try. Maybe you want to fully embrace that open-source life and grab &lt;a href="https://getfedora.org/"&gt;Fedora&lt;/a&gt;. Me? I just wanted to code with minimal headache and switch to a new OS with little learning curve- so I settled on &lt;a href="https://linuxmint.com/"&gt;Mint&lt;/a&gt;: a lightweight distro that comes preloaded with a Windows-esque GUI.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rw5Ahtcu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://tr3.cbsistatic.com/hub/i/r/2017/06/19/0e787ac4-a038-4eaf-bbcc-9b4f33bf116b/resize/1200x675/86401820f410cd010605341d27fced52/distrohero.jpg" alt="linuxdistros"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt; Seriously, there's a lot of 'em &lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;From there, you actually got to install the sucker- thankfully Mint has some easy to follow &lt;a href="https://linuxmint.com/documentation.php"&gt;documentation&lt;/a&gt; that lays out the process. You'll need some sort of boot medium- a usb drive preferably, but burning the ISO on a disk will also work. Next you'll slap your boot medium into your computer, restart it and change the boot order in your BIOS to load Mint. If you've never messed with BIOS before, check out &lt;a href="https://www.howtogeek.com/129815/beginner-geek-how-to-change-the-boot-order-in-your-computers-bios/"&gt;this guide&lt;/a&gt;, it's not as scary as you might think.&lt;/p&gt;

&lt;p&gt;Once you've set that up you'll boot into a live version of Mint that's running off of the boot medium. It'll operate the same as the real deal, though you won't be able to save any changes you make, this will give you a opportunity to click some buttons and make sure nothing exploded. Once you're satisfied that everything is in working order, run the install wizard located on the desktop which will walk you through the process of either formatting your drive for a pure Linux install, or set up a partition so you can dual-boot into either OS. And that's it. It was such a surprisingly easy experience I was left wondering why I was so worried in the first place.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I think about it:
&lt;/h2&gt;

&lt;p&gt;I've been using Mint for about a week now, and so far, I love it. All your familiar shortcuts work, and minus a few slight changes in the UI, it works almost exactly like a Windows OS. It feels natural to use and your average user will barely notice the difference. But the thing I really love the most is that if you start digging around and pushing buttons...you can break the crap out of it.&lt;/p&gt;

&lt;p&gt;I know that sounds counter-intuitive. Why would you want something you can break? Because to truly get the most out of something you've got to take off the training wheels. Way back when dinosaurs roamed the earth and I got my first computer with Windows 98- I pressed every button, typed things in the command line I really shouldn't of, deleted files that bricked the entire OS, and had to re-install multiple times. But in doing so, I learned the in's and out's of that machine. Pulling it apart and looking at all the parts gave me a more intimate understanding of how to fix things when everything went fubar.&lt;/p&gt;

&lt;p&gt;Linux gives you a lot of power. Can't run a command normally? Prepend sudo (super user do) to the front of it and &lt;em&gt;BAM&lt;/em&gt;, you're the master of your own destiny. But, as Uncle Ben said in the superior Raimi Spiderman flicks (don't @ me), "Great power comes with great responsibility." If you run 'sudo rm -rf' in your root folder, &lt;em&gt; you won't feel so good.&lt;/em&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KRqHJZR---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.tenor.com/images/934ff60b97a0c35667b2210e786cdc5a/tenor.gif%3Fitemid%3D12094481" alt="spooderman"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt; A visual representation of your hard drive when you run '$root sudo rm -rf' &lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;On the topic of the terminal commands: they're likely my biggest gripe about Linux. Apparently the Linux devs have an allergic reaction to typing or easy to understand alias for commands. They're all some esoteric acronym followed by an entire alphabet of -flags that only a Google search will reveal the meaning of. &lt;em&gt;grep&lt;/em&gt; stands for "Global regular expression print" which is a very useful command who's acronym sounds like a sound a dying animal would make.&lt;/p&gt;

&lt;p&gt;Regardless, I've very much enjoyed my experience with Linux and I'm quickly becoming one of 'those people'. It's only a matter of time before I slap a penguin sticker on the back of my laptop and start making childish jokes about 'fsck', and I invite you to become one too.&lt;/p&gt;

</description>
      <category>linux</category>
    </item>
    <item>
      <title>Binary Search Trees</title>
      <dc:creator>Blake Cooley</dc:creator>
      <pubDate>Sat, 18 Jan 2020 04:28:05 +0000</pubDate>
      <link>https://dev.to/tehbakey/binary-search-trees-eh2</link>
      <guid>https://dev.to/tehbakey/binary-search-trees-eh2</guid>
      <description>&lt;p&gt;When you're coding you're going to use a lot of data. And when you're dealing with complex problems that use a lot of it, that data needs to be structured- you don't want it floating around all willy-nilly in the ether. &lt;/p&gt;

&lt;p&gt;These data structures can be all kind of things, linked lists, arrays, hash tables. But today I'm going to be talking about trees: Binary Search Trees in particular, as one might of guessed from my uninspired title.&lt;/p&gt;

&lt;h1&gt;
  
  
  So, what the heck is a tree?
&lt;/h1&gt;

&lt;p&gt;In computer science, a tree doesn't refer to those green leafy things you see scattered about the landscape, but rather a branching collection of nodes representing whatever values you're working with. These start with a singular root node (also called a parent) that is then connected to branches (or children) flowing downward. &lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9qU0w6mJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://laughingsquid.com/wp-content/uploads/2018/12/Upside-Down-Trimmed-Tree-With-Gifts.jpg%3Fh%3D300" alt=""&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;em&gt;Kinda like this, but with a lot more 1's and 0's&lt;/em&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Where a Binary Search Tree, or BST's (much like military, coders love acronyms) differ is the amount of child nodes and how those nodes are structured. Each node in a BST can only have up to two nodes- that's where the binary part comes in- and are structured in such a way where the lower value is always to the left, higher to the right.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Zlu8fr51--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://cppbetterexplained.com/wp-content/uploads/2016/02/binary-search-tree-diagram.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Zlu8fr51--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/http://cppbetterexplained.com/wp-content/uploads/2016/02/binary-search-tree-diagram.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And this is how the above example might appear as a JavaScript object:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;parentNode&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
&lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="na"&gt;leftChild&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="na"&gt;rightChild&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Why the heck are they useful?
&lt;/h1&gt;

&lt;p&gt;"So what's the big deal?", you might ask, "what makes BST's so special instead of an array or something similar?". Speed. Look-up speed in particular. Imagine if our tree wasn't just that one binary node, but a series of binary nodes, linked to more binary nodes, all structured in such a way that the lower value is always to the left, higher always to the right.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N9SHP7wd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://algorithmtutor.com/images/BinarySearchTrees.png" alt=""&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;em&gt;Like this one right here&lt;/em&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;If this was structured in an array instead, we might have to iterate over every index to find the value of, say, 42. This would give us a linear &lt;a href="https://en.wikipedia.org/wiki/Big_O_notation"&gt;big O&lt;/a&gt; time complexity or O(n). But using a BST we can check the if the value of each child node is higher or lower than 42, and each time eliminate an entire branch of the tree from our potential search. This gives us a logarithmic big O time complexity or O(log n).  &lt;/p&gt;

&lt;h1&gt;
  
  
  Where the heck are they used?
&lt;/h1&gt;

&lt;p&gt;"Well, that's cool and all", I can hear you saying, "but what good has a BST ever done for me?" Here's a few examples of some real world implementations of binary search trees:&lt;/p&gt;

&lt;p&gt;*&lt;a href="https://en.wikipedia.org/wiki/Radix_tree"&gt;Radix Tree&lt;/a&gt; - Used in almost every high-bandwidth router for storing router tables&lt;/p&gt;

&lt;p&gt;*&lt;a href="https://en.wikipedia.org/wiki/Huffman_coding"&gt;Huffman coding&lt;/a&gt; - compression algorithm used in .jpeg and .mp3 file-formats&lt;/p&gt;

&lt;p&gt;And my personal favorite:&lt;/p&gt;

&lt;p&gt;*&lt;a href="https://en.wikipedia.org/wiki/Binary_space_partitioning"&gt;Binary Space Partition&lt;/a&gt; - Used in 3D video games to determine which objects to render. The first ever use of Binary Space Partition being 1993's Doom.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--amX3sHlS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://steamcdn-a.akamaihd.net/steam/apps/2280/ss_0316d2cb78eed32d21a90f197da0e0ea4b06e776.1920x1080.jpg%3Ft%3D1573223879" alt=""&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;em&gt;This means by the virtue of &lt;a href="https://doom.fandom.com/wiki/Doom_in_workplaces"&gt;association&lt;/a&gt;, BSTs are "the number one cause of decreased productivity in businesses around the world"&lt;/em&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;So the next time you crawl away from the cold blue glare of you computer screen and get a brief glimpse of those green leafy things outside, imagine them being upside down and full of data you can look up quickly. And then crawl back inside and implement a BST to handle whatever massive set of data you're working with.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
