<?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: Jake</title>
    <description>The latest articles on Forem by Jake (@jakekbuckner).</description>
    <link>https://forem.com/jakekbuckner</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%2F1236914%2Fe7b4dd29-3895-4b1b-9594-ab487b48dafc.jpeg</url>
      <title>Forem: Jake</title>
      <link>https://forem.com/jakekbuckner</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/jakekbuckner"/>
    <language>en</language>
    <item>
      <title>Interactive Mario/Luigi Pixel Art</title>
      <dc:creator>Jake</dc:creator>
      <pubDate>Mon, 22 Jan 2024 15:55:08 +0000</pubDate>
      <link>https://forem.com/jakekbuckner/interactive-marioluigi-pixel-art-fco</link>
      <guid>https://forem.com/jakekbuckner/interactive-marioluigi-pixel-art-fco</guid>
      <description>&lt;p&gt;I created &lt;a href="https://codepen.io/jakekbuckner/pen/BabBLog"&gt;interactive Mario and Luigi pixel art&lt;/a&gt;. I’m super proud of this one and I worked really hard on it. I generate the pixel art via JavaScript and arrays. Then depending on what arrow key you press, I display a corresponding pixel art. It’s almost like you’re playing Super Mario World for real life! 😎&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/jakekbuckner/embed/BabBLog?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>html</category>
      <category>javascript</category>
      <category>css</category>
    </item>
    <item>
      <title>Light and Dark CodePen Challenge - Star Wars</title>
      <dc:creator>Jake</dc:creator>
      <pubDate>Thu, 21 Dec 2023 21:17:11 +0000</pubDate>
      <link>https://forem.com/jakekbuckner/light-and-dark-star-wars-1a7p</link>
      <guid>https://forem.com/jakekbuckner/light-and-dark-star-wars-1a7p</guid>
      <description>&lt;p&gt;I used JavaScript to generate &lt;a href="https://codepen.io/jakekbuckner/pen/VwRwvPP"&gt;pixel art of Yoda and Darth Vader&lt;/a&gt;, representations of Light and Dark. This was for CodePen’s light and dark challenge.&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/jakekbuckner/embed/VwRwvPP?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>html</category>
      <category>css</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Yoshi Pixel Art - Generated w/ JS</title>
      <dc:creator>Jake</dc:creator>
      <pubDate>Tue, 19 Dec 2023 16:30:28 +0000</pubDate>
      <link>https://forem.com/jakekbuckner/yoshi-pixel-art-generated-w-js-22ge</link>
      <guid>https://forem.com/jakekbuckner/yoshi-pixel-art-generated-w-js-22ge</guid>
      <description>&lt;p&gt;I used JavaScript to create a &lt;a href="https://codepen.io/jakekbuckner/pen/vYborVx"&gt;Yoshi pixel art&lt;/a&gt; (best viewed in browser). You can change the color of Yoshi, add a grid to it, view the numbers of each created div, and scale the image up and down. &lt;/p&gt;

&lt;p&gt;The way I did it was I used a for loop to generate 900 divs in a grid (30x30). Then I created arrays with the corresponding number (references i in the loop) which colors the div based on the number found in the array. &lt;/p&gt;

&lt;p&gt;I was really excited to create this, as it really helped me continue develop my skills in JavaScript. &lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/jakekbuckner/embed/vYborVx?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>javascript</category>
      <category>css</category>
      <category>html</category>
    </item>
  </channel>
</rss>
