<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>About Me | TheBestJohn</title><linkrel="stylesheet"href="/libs/font-awesome/css/font-awesome.min.css"><linkrel="stylesheet"href="/css/index.css"><linkrel="stylesheet"href="/css/highlights/dracula.css"><linkrel="canonical"href="http://blog.thebestjohn.com/about/"/>
<metaname="description"content="My name is John. I’m a Embedded Developer. Over the years I’ve dabbled in a lot of side projects. I have a deep interest in making IoT and…">
<metaproperty="og:description"content="My name is John. I’m a Embedded Developer. Over the years I’ve dabbled in a lot of side projects. I have a deep interest in making IoT and…">
<metaname="twitter:description"content="My name is John. I’m a Embedded Developer. Over the years I’ve dabbled in a lot of side projects. I have a deep interest in making IoT and…">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><articleclass="article"id="article"itemscopeitemtype="https://schema.org/BlogPosting"><h1class="article__title"itemprop="headline">About Me</h1><divclass="article__meta"><timeclass="article__meta__time"datetime="2018-04-26T17:54:48.000Z"itemprop="datePublished">April 26th 2018</time></div><hr><divclass="article__contents"><p>My name is John. I’m a Embedded Developer. Over the years I’ve dabbled in a lot of side projects. I have a deep interest in making IoT and smart home systems, setting up offline backups of information/Digital archiving, and alternative network technologies.</p>
<p>Contained within is my attempt to chronicle my efforts, share idea and projects, and at the end of the day, teach. I’ve always thought at some point I would like to teach. Lately I realized that there is no barrier to teaching other than what we impose on ourselves. I have a platform, It’s the internet. Please join me and feel free to ask some questions. I’d love to try to answer them, or at least point you in the right direction.</p>
<p>–John</p>
</div><divclass="article__author"itemscopeitemprop="author"itemtype="https://schema.org/Person"><imgclass="article__author__image"src="/images/avatar.jpg"alt="John Warren"><aclass="article__author__link"title="About John Warren"rel="author">John Warren</a><pclass="article__author__desc">Just a place to make stuff</p><divclass="article__author__socials"><aclass="article__author__socials__item"href="/atom.xml"title="rss"target="_blank"><iclass="fa fa-rss"></i></a></div><metaitemprop="name"content="John Warren"></div><divclass="sharer"id="sharer"><divclass="sharer-inner"><divclass="sharer__right"><buttonclass="sharer__item"id="sharer-facebook"><iclass="fa fa-facebook-official"></i></button><buttonclass="sharer__item"id="sharer-twitter"><iclass="fa fa-twitter"></i></button><buttonclass="sharer__item"id="sharer-pinterest"><iclass="fa fa-pinterest"></i></button><buttonclass="sharer__item"id="sharer-pocket"><iclass="fa fa-get-pocket"></i></button></div></div></div><!-- Disqus Code--><divid="disqus_thread"></div><script>(function(){
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><header><h2>Archives: 8/2012</h2></header><hr><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/tableCode.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><header><h2>Archives: 2012</h2></header><hr><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/tableCode.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><header><h2>Archives</h2></header><hr><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/static-what-generator/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/static-what-generator/"title="Static what Generator?!">Static what Generator?!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and they’re so...</p></div></article><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/tableCode.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Category: Web Dev | TheBestJohn</title><linkrel="stylesheet"href="/libs/font-awesome/css/font-awesome.min.css"><linkrel="stylesheet"href="/css/index.css"><linkrel="stylesheet"href="/css/highlights/dracula.css"><linkrel="canonical"href="http://blog.thebestjohn.com/categories/Web-Dev/"/>
<metaname="description"content="Just a place to make stuff">
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><header><h2>Category: Web Dev</h2></header><hr><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/static-what-generator/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/static-what-generator/"title="Static what Generator?!">Static what Generator?!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and they’re so...</p></div></article><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/tableCode.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/static-what-generator/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/static-what-generator/"title="Static what Generator?!">Static what Generator?!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and they’re so...</p></div></article><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/tableCode.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Create Own Membrane Matrix Keypad (and Hooking It Up to the Arduino) | TheBestJohn</title><linkrel="stylesheet"href="/libs/font-awesome/css/font-awesome.min.css"><linkrel="stylesheet"href="/css/index.css"><linkrel="stylesheet"href="/css/highlights/dracula.css"><linkrel="canonical"href="http://blog.thebestjohn.com/posts/matrix-keypad/"/>
<metaname="description"content="So you want to create your own membrane keypad? Why? well making your own keypad can be useful for many reasons. It’s cheap and easy to…">
<metaproperty="og:type"content="article">
<metaproperty="og:title"content="Create Own Membrane Matrix Keypad (and Hooking It Up to the Arduino)">
<metaproperty="og:description"content="So you want to create your own membrane keypad? Why? well making your own keypad can be useful for many reasons. It’s cheap and easy to…">
<metaname="twitter:title"content="Create Own Membrane Matrix Keypad (and Hooking It Up to the Arduino)">
<metaname="twitter:description"content="So you want to create your own membrane keypad? Why? well making your own keypad can be useful for many reasons. It’s cheap and easy to…">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/matrix/finished.jpg"><metaproperty="article:author"content="John Warren"><metaproperty="twitter:label1"content="Published at"><metaproperty="twitter:data1"content="February 16th 2010 00:00:00"><metaproperty="twitter:label2"content="Written by"><metaproperty="twitter:data2"content="John Warren"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><articleclass="article"id="article"itemscopeitemtype="https://schema.org/BlogPosting"><h1class="article__title"itemprop="headline">Create Own Membrane Matrix Keypad (and Hooking It Up to the Arduino)</h1><divclass="article__meta"><timeclass="article__meta__time"datetime="2010-02-16T05:00:00.000Z"itemprop="datePublished">February 16th 2010</time><divclass="article__meta__categories"><aclass="article__meta__categories__item"href="/categories/Other-Electronics/">Other Electronics</a></div></div><divclass="article__contents"><imgsrc="/images/matrix/finished.jpg"/><p>So you want to create your own membrane keypad? Why? well making your own keypad can be useful for many reasons. It’s cheap and easy to do, it can be placed in situations where it may be vandalized or stolen without much frustration, It can be fully customized to display whatever you like, and you can make as large a keypad as you like with as many inputs as you can handle. I created my keypad to go on the exterior of my door in residence to act as a keypad entry in much the same way as colin353 did <ahref="www.instructables.com/id/An-Electronic-Door-Opener/">here</a>.</p>
<p><strong>NOTE:</strong> This is not a complete tutorial for the time being. It goes through the construction of a keypad fully, however it does not yet fully demonstrate the means to make it useful.</p>
<h1id="Step-1-Understanding-the-Keypad"><ahref="#Step-1-Understanding-the-Keypad"class="headerlink"title="Step 1: Understanding the Keypad"></a>Step 1: Understanding the Keypad</h1><p>The first thing I want you to understand is how this keypad works. I know what you’re thinking… Matrix keypad?… “I’m not going to have to take any blue pills to get this to work am I?”. No its not that matrix.. The best way to think about a matrix style keypad is to think about battleship.</p>
<p>A matrix is pretty much a grid like in battleship consisting of rows and columns. each button corresponds to a certain row and column. See the first picture to help illustrate this better. On a 9 button keypad you would use 3 rows and 3 columns. The first button would make a link between Row 1 and Column 1 (R1C1) just like in battleship. 2 would be R1C2, 3 R1C3, and lets say 8 would be R3C2… the rest are illustrated on the image.</p>
<p>The point of this is instead of having 9 different buttons to wire up, all you would need to do is wire up 3 columns and 3 rows for significantly less wires. The real benefits come when you begin adding buttons. adding another row and column (2 wires) would add 7 buttons… see where I’m going?</p>
<p>Step 2: Collecting the Materials.</p>
<p>The really cool thing about this project is you probably already have all the things you need to build this in your house! Yes when I say that this is a simple, cheap, effective way of making a keypad I mean that it is simple and cheap. You will need:</p>
<ul>
<li>A Microcontroller (in this case an Arduino)</li>
<li>Aluminum Foil (tin foil… some sort of foil) <em>foil tape works well also</em></li>
<li>Some sort of paper or flat material (what you choose here will effect the durability. I’m using a dry erase pad for my fridge)</li>
<li>Glue (unless you’re using foil tape)</li>
<li>A spacer of some sort (a few layers of paper with holes cut in them may work I’m using double sided sticky foam pads)</li>
<p>The first step to putting your keypad together is deciding what you want it to look like/how many buttons do you want on it. For this project I will be using a 3X3 setup with the numbers from 1 to 9 on it. Once you have decided what it will look like draw it out and decide where you want all the wires to go. I want a lead off from my keypad so it will go around my door so see image 2 for what mine should look like. Make a mock up on your computer using whatever software you like (paint, photoshop, illustrator…) and proceed to the next step.</p>
<h1id="Step-4-Mapping-Out-Your-Cheap-Matrix"><ahref="#Step-4-Mapping-Out-Your-Cheap-Matrix"class="headerlink"title="Step 4: Mapping Out Your Cheap Matrix"></a>Step 4: Mapping Out Your Cheap Matrix</h1><p>What we are going to be doing is gluing on foil to make a flexible, cheap, however effective circuit board. What we need to do now is on our computer mock up we need to make how our columns and rows are going to be set-up. If you are using Photoshop make 2 new layers, one called rows the other columns. if you’re just using paint make a copy of the file called rows and another columns.</p>
<p>On these new layers we will put large black lines where we want our “Circuits” to go. See image 2 for rows and image 3 columns if you are confused. Image 4 shows what both layers turned on looks like. Starting to look familiar?<br>Now you need to flip one of your images vertically… or is it horizontally… see image 5 you’ll get what I mean.</p>
<p>Go ahead and print these out for the next step.</p>
<h1id="Step-5-Faux-Circuit-Making-Time"><ahref="#Step-5-Faux-Circuit-Making-Time"class="headerlink"title="Step 5: Faux Circuit Making Time!"></a>Step 5: Faux Circuit Making Time!</h1><p><imgsrc="/images/matrix/realhoriz.jpg"alt="horizontal foil"><br><imgsrc="/images/matrix/realboth.jpg"alt="both foil pieces ready to be joined"></p>
<p>Here is the fun part… well in my opinion the whole thing is fun but whatever…<br>Now that you have your printed out templates you can start making your circuit. Now is the time to glue down your foil where ever your rows and columns are supposed to go. Look at figure 2 for both of my circuits, yours should look somewhat like this. Also, notice how my leads go away from the keypad in an organized way to facilitate easy hook-up? Just like I planned!</p>
<p><strong>NOTE</strong> At this point its a good idea to re-make your front design to include labels for the hookup at the end of the leads with the labels<br>R1<br>R2<br>R3<br>C3<br>C2<br>C1</p>
<p>This is just going to make it easier for you.</p>
<h1id="Step-6-Putting-It-All-Together"><ahref="#Step-6-Putting-It-All-Together"class="headerlink"title="Step 6: Putting It All Together."></a>Step 6: Putting It All Together.</h1><p><imgsrc="/images/matrix/padded.jpg"alt=""><br><imgsrc="/images/matrix/joined.jpg"alt=""><br><imgsrc="/images/matrix/finished.jpg"alt=""></p>
<p>In the next step we will be putting it all together. Take your spacers and apply them to one side of your keypad. come to think of it you could technically use silicone (the type used for caulking) as a really decent spacer… I may try this in the future actually…. hmm..</p>
<p>Anyways back on topic. To apply these spacers we need to make sure that there is a hole in the center of them so that the rows and columns can contact one another when they are depressed (not sad… pressed down). I kinda just tiled everything but you could use a hole punch or something to get better results. The spacers are also there to make sure other parts of our circuit do not touch each-other incidentally.</p>
<p>Take a look at image 1 to see all the spacers applied appropriately. Once your spacers have been applied (you may need to glue whatever you are using) you may put the other side of your keypad on top of this one (image 2). Luckily you made sure that everything was mapped out properly on your template on the computer… you did make a template didn’t you?</p>
<p>Image 3 is the pieced together keypad.</p>
<p><strong><em>OPTIONAL STEP</em></strong><br>To help my keypad enjoy a long healthy life I laminated mine. It helps provide some structural support for the paper… constant pressing can and will create depressions (again not sad) in the paper that sooner or later will cause your keypad to become ineffectively pressing that button constantly.</p>
<p>Image 4 would show my beautiful laminated Matrix style keypad however the laminator ate my piece of art.</p>
<h1id="Step-7-Arduino-Anyone"><ahref="#Step-7-Arduino-Anyone"class="headerlink"title="Step 7: Arduino Anyone?!"></a>Step 7: Arduino Anyone?!</h1><p>Time to hook up your keypad to the Arduino for the first time… exciting no?</p>
<p>Well Exciting as it may be it’ll have to wait for now! The Laminator lovingly ate my keypad so until I can find the time to make another one then it’ll have to wait. I WILL be coming back so do not to worry this step will come. Perhaps in the near future I will explain how to set it all up and not exactly show it off. For now here is the Arduino code I was using with my prototypes for those of you who know where to go from here good luck. For the others sit tight.</p>
<p><strong>NOTE</strong> you will have to install the keypad library from arduino.cc</p>
<figureclass="highlight plain"><table><tr><tdclass="gutter"><pre><spanclass="line">1</span><br><spanclass="line">2</span><br><spanclass="line">3</span><br><spanclass="line">4</span><br><spanclass="line">5</span><br><spanclass="line">6</span><br><spanclass="line">7</span><br><spanclass="line">8</span><br><spanclass="line">9</span><br><spanclass="line">10</span><br><spanclass="line">11</span><br><spanclass="line">12</span><br><spanclass="line">13</span><br><spanclass="line">14</span><br><spanclass="line">15</span><br><spanclass="line">16</span><br><spanclass="line">17</span><br><spanclass="line">18</span><br><spanclass="line">19</span><br><spanclass="line">20</span><br><spanclass="line">21</span><br><spanclass="line">22</span><br><spanclass="line">23</span><br><spanclass="line">24</span><br><spanclass="line">25</span><br><spanclass="line">26</span><br><spanclass="line">27</span><br><spanclass="line">28</span><br><spanclass="line">29</span><br><spanclass="line">30</span><br><spanclass="line">31</span><br><spanclass="line">32</span><br><spanclass="line">33</span><br><spanclass="line">34</span><br></pre></td><tdclass="code"><pre><spanclass="line">#include <Keypad.h></span><br><spanclass="line"></span><br><spanclass="line">int beep = 13; //A buzzer is attatched to pin 13</span><br><spanclass="line"></span><br><spanclass="line">const byte ROWS = 3; //four rows</span><br><spanclass="line">const byte COLS = 3; //four columns</span><br><spanclass="line">char keys[ROWS][COLS] = {</span><br><spanclass="line">{'1','2','3'},</span><br><spanclass="line">{'4','5','6'},</span><br><spanclass="line">{'7','8','9'},</span><br><spanclass="line">};</span><br><spanclass="line"></span><br><spanclass="line"></span><br><spanclass="line">byte rowPins[ROWS] = {8, 7, 6}; //connect to the row pinouts of the keypad</span><br><spanclass="line">byte colPins[COLS] = {5 ,4, 3}; //connect to the column pinouts of the keypad</span><br><spanclass="line"></span><br><spanclass="line">Keypad keypad = Keypad( makeKeymap(keys), rowPins, colPins, ROWS, COLS );</span><br><spanclass="line"></span><br><spanclass="line">void setup(){</span><br><spanclass="line"> Serial.begin(9600);</span><br><spanclass="line"> pinMode(beep, OUTPUT); </span><br><spanclass="line">}</span><br><spanclass="line"></span><br><spanclass="line">void loop(){</span><br><spanclass="line"> char key = keypad.getKey();</span><br><spanclass="line"> if (key != NO_KEY){</span><br><spanclass="line"> Serial.println(key);</span><br><spanclass="line"> digitalWrite(beep, HIGH); // set the buzzer on</span><br><spanclass="line"> delay(100);</span><br><spanclass="line"> digitalWrite(beep, LOW); // set the buzzer off </span><br><spanclass="line"></span><br><spanclass="line">}</span><br><spanclass="line"></span><br><spanclass="line">}</span><br></pre></td></tr></table></figure></div><divclass="article__author"itemscopeitemprop="author"itemtype="https://schema.org/Person"><imgclass="article__author__image"src="/images/avatar.jpg"alt="John Warren"><aclass="article__author__link"title="About John Warren"rel="author">John Warren</a><pclass="article__author__desc">Just a place to make stuff</p><divclass="article__author__socials"><aclass="article__author__socials__item"href="/atom.xml"title="rss"target="_blank"><iclass="fa fa-rss"></i></a></div><metaitemprop="name"content="John Warren"></div><divclass="sharer"id="sharer"><divclass="sharer-inner"><divclass="sharer__right"><buttonclass="sharer__item"id="sharer-facebook"><iclass="fa fa-facebook-official"></i></button><buttonclass="sharer__item"id="sharer-twitter"><iclass="fa fa-twitter"></i></button><buttonclass="sharer__item"id="sharer-pinterest"><iclass="fa fa-pinterest"></i></button><buttonclass="sharer__item"id="sharer-pocket"><iclass="fa fa-get-pocket"></i></button></div></div></div><!-- Disqus Code--><divid="disqus_thread"></div><script>(function(){
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Static what Generator?! | TheBestJohn</title><linkrel="stylesheet"href="/libs/font-awesome/css/font-awesome.min.css"><linkrel="stylesheet"href="/css/index.css"><linkrel="stylesheet"href="/css/highlights/dracula.css"><linkrel="canonical"href="http://blog.thebestjohn.com/posts/static-what-generator/"/>
<metaname="description"content="Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and…">
<metaproperty="og:type"content="article">
<metaproperty="og:title"content="Static what Generator?!">
<metaproperty="og:description"content="Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and…">
<metaname="twitter:title"content="Static what Generator?!">
<metaname="twitter:description"content="Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and…">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><metaproperty="article:author"content="John Warren"><metaproperty="twitter:label1"content="Published at"><metaproperty="twitter:data1"content="April 27th 2018 17:40:00"><metaproperty="twitter:label2"content="Written by"><metaproperty="twitter:data2"content="John Warren"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><articleclass="article"id="article"itemscopeitemtype="https://schema.org/BlogPosting"><h1class="article__title"itemprop="headline">Static what Generator?!</h1><divclass="article__meta"><timeclass="article__meta__time"datetime="2018-04-27T21:40:00.000Z"itemprop="datePublished">April 27th 2018</time><divclass="article__meta__categories"><aclass="article__meta__categories__item"href="/categories/Web-Dev/">Web Dev</a></div></div><hr><divclass="article__contents"><p>Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and they’re so prevalent in sites that they make a very attractive target for exploitation. In fact the first time I lost control of my server it was because of a bug in a themes use of timthumb.php. Basically, the attacker sent it an “image” file from a hosting website that had a php eval script hidden in it’s data. When accessed normally it showed an image but if they accessed the cached file that timthumb made, then the server treated it as a php file. From there they were able to install a remote shell, and own my server.</p>
<h1id="Static-site-generators"><ahref="#Static-site-generators"class="headerlink"title="Static site generators"></a>Static site generators</h1><p>While the timthumb exploit was a pain in the ass, it was very interesting to me and made me seriously consider how I secure my systems. To that end I started reading into static site generators. Static site generators take your posts, usually formatted in some sort of markup, put them through a templating engine that outputs <code>.html</code> files, which you can then serve via the usual methods.</p>
<h3id="Why-tho"><ahref="#Why-tho"class="headerlink"title="Why tho?"></a>Why tho?</h3><p>The idea is that <em>most</em> sites don’t actually need to use dynamic code. Their content is, for the most, part static. Users aren’t interacting with the content (other than the comments sections and forms but we’ll talk about that later). They are, instead, just reading it. The only person who seems to be interacting with it is the person that owns the site. Even then, the owner isn’t actively interacting. They are writing a post, or updating a page. After that, everything stays the same.</p>
<p>All this is a “face-value” reason to move over to a static site. I have an even deeper reason for wanting to use a static site, portability. Static sites allow you to use a generic format for your posts. I write all my posts in markdown, a very common and widely used format. With this I can move from generator to generator without much change. If I were to make my blog in something like Wordpress, my post information would be locked into a <em>very</em> specific database format. If I, for some reason or another, decided I no longer wanted to use Wordpress it would be a lot of work modifying all my posts to be compatible with the new platform.</p>
<h1id="Options"><ahref="#Options"class="headerlink"title="Options"></a>Options</h1><p>When it comes to static site generators, there are a plethora of options. The idea is to make sure you know what you’re signing up for. They come in many languages and each come with there own pros and cons. Choose something that’s written in a language you’re somewhat comfortable with and something that meets your criteria.<br><ahref="https://www.staticgen.com/"target="_blank"rel="noopener">https://www.staticgen.com/</a></p>
<p>For me, I wanted:</p>
<ul>
<li>Something with configurable routes (mysite.com/post/post-name/ could easily be mysite.com/articles/post-name/)</li>
<li>Does not need a server running all the time (This defeats the purpose to me and can introduce security issues)</li>
<li>Was reasonably markdown agnostic (I didn’t want too many special tags in my markdown in case I wanted/needed to switch generators)</li>
<li>Had a nice theming engine with some good themes already made (I can make one but wanted to get up and running quickly)</li>
<li>Is actively being Developed (It would be nice to keep things up to date)</li>
</ul>
<h1id="Enter-Hexo"><ahref="#Enter-Hexo"class="headerlink"title="Enter, Hexo"></a>Enter, <ahref="https://hexo.io/"target="_blank"rel="noopener">Hexo</a></h1><p>Hexo is a neat little package. </p>
<p>Originally I thought I would install it, set up an apache virtual reverse proxy via an <code>.htaccess</code> file and let node serve static files. Some people do this. It’s a valid way to serve a site. The problem that I have with this, is that it’s just another vulnerable layer of code that I don’t have the inclination to audit. It could potentially have glaring security holes and I wouldn’t know. Again, I want to clarify that I don’t know much of anything about security. I’m not a cryptographer, nor an expert on cyber security. However, I can easily read the html that comes out the other end of the site generator and verify that there are no well-known issues with the javascript or html.</p>
<p>If this is the way you wanted to do it, you would need, at the very least, this sort of <code>.htaccess</code> configuration in your root<br><figureclass="highlight plain"><table><tr><tdclass="gutter"><pre><spanclass="line">1</span><br><spanclass="line">2</span><br><spanclass="line">3</span><br><spanclass="line">4</span><br><spanclass="line">5</span><br><spanclass="line">6</span><br></pre></td><tdclass="code"><pre><spanclass="line">RewriteEngine On</span><br><spanclass="line">DirectoryIndex index.html </span><br><spanclass="line">RewriteRule ^$ http://127.0.0.1:4000 [P,L]</span><br><spanclass="line">RewriteCond %{REQUEST_FILENAME} !-f</span><br><spanclass="line">RewriteCond %{REQUEST_FILENAME} !-d</span><br><spanclass="line">RewriteRule ^(.*)$ http://127.0.0.1:4000/$1 [P,L]</span><br></pre></td></tr></table></figure></p>
<p>So what to do? Well, the output is a fully static html/css/js site. No need for node, no need for a reverse proxy. This will just work when popped into a public directory of a webserver.</p>
<ahref="/posts/setting-up-hexo-auto-deploy-from-gitlab/"title="getting that set up">getting that set up</a>
<h3id="A-Word-on-interactivity"><ahref="#A-Word-on-interactivity"class="headerlink"title="A Word on interactivity"></a>A Word on interactivity</h3><p>Static sites are very useful for serving your content. However, there are a few times where some interactivity is really useful. For instance, the comments section down below. Well in those cases, we can employ third party services with javascript to bridge that gap. Discus seems to be very vigilant when it comes to user identity and exploit elimination. They provide an <abbrtitle="Application Programming Interface">API</abbr> in which you can send them your “shortname” and the <abbrtitle="Uniform Resource Locator">URL</abbr> of your post and they’ll provide a comments section that you can embed there.</p>
</div><divclass="article__author"itemscopeitemprop="author"itemtype="https://schema.org/Person"><imgclass="article__author__image"src="/images/avatar.jpg"alt="John Warren"><aclass="article__author__link"title="About John Warren"rel="author">John Warren</a><pclass="article__author__desc">Just a place to make stuff</p><divclass="article__author__socials"><aclass="article__author__socials__item"href="/atom.xml"title="rss"target="_blank"><iclass="fa fa-rss"></i></a></div><metaitemprop="name"content="John Warren"></div><divclass="sharer"id="sharer"><divclass="sharer-inner"><divclass="sharer__right"><buttonclass="sharer__item"id="sharer-facebook"><iclass="fa fa-facebook-official"></i></button><buttonclass="sharer__item"id="sharer-twitter"><iclass="fa fa-twitter"></i></button><buttonclass="sharer__item"id="sharer-pinterest"><iclass="fa fa-pinterest"></i></button><buttonclass="sharer__item"id="sharer-pocket"><iclass="fa fa-get-pocket"></i></button></div></div></div><!-- Disqus Code--><divid="disqus_thread"></div><script>(function(){
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Table based design: Why I loathe it, and you should too! | TheBestJohn</title><linkrel="stylesheet"href="/libs/font-awesome/css/font-awesome.min.css"><linkrel="stylesheet"href="/css/index.css"><linkrel="stylesheet"href="/css/highlights/dracula.css"><linkrel="canonical"href="http://blog.thebestjohn.com/posts/table-based-design/"/>
<metaname="description"content="If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it. Web…">
<metaproperty="og:type"content="article">
<metaproperty="og:title"content="Table based design: Why I loathe it, and you should too!">
<metaproperty="og:description"content="If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it. Web…">
<metaname="twitter:title"content="Table based design: Why I loathe it, and you should too!">
<metaname="twitter:description"content="If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it. Web…">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/tableCode.jpg"><metaproperty="article:author"content="John Warren"><metaproperty="twitter:label1"content="Published at"><metaproperty="twitter:data1"content="August 9th 2012 00:00:00"><metaproperty="twitter:label2"content="Written by"><metaproperty="twitter:data2"content="John Warren"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><articleclass="article"id="article"itemscopeitemtype="https://schema.org/BlogPosting"><h1class="article__title"itemprop="headline">Table based design: Why I loathe it, and you should too!</h1><divclass="article__meta"><timeclass="article__meta__time"datetime="2012-08-09T04:00:00.000Z"itemprop="datePublished">August 9th 2012</time><divclass="article__meta__categories"><aclass="article__meta__categories__item"href="/categories/Web-Dev/">Web Dev</a></div></div><divclass="article__contents"><imgsrc="/images/tableCode.jpg"/><p>If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.</p>
<p>Web development is one heck of an industry. It changes, transforms, and adapts. I feel that in order for you to call yourself a web developer, or your company a web development company you need to develop with the web.</p>
<p>Development as defined by dictionary.com is: the act or process of developing; growth; progress: child development; economic development.</p>
<p>Growth, progress! Our job as web developers is to promote growth and progress of the web. We must adapt as the web adapts. When a “web development” agency provides it’s clients with old, outdated, un-accessible, table-based, web development they are not only stifling the growth of the internet they are literally taking money out of business’ pockets.</p>
<p>So how does someone developing a table based website take money from people? Well lets look at it this way. Let us say that you “Bagels R us” want a website done by “<abbrtitle="We Make Old Table Based Websites For You">WMOTBWFY</abbr> Web Development Firm” and its going to cost you around $800 as you just want a static site with no <abbrtitle="Content Management System">CMS</abbr> and maybe a google maps. Well that’s great you take a look at the proofs and make some changes and within a week or two you have a shiny new site. Excellent! Now after a little while you start getting some good business. You expand, and open 2 new locations. Well your site now needs to be updated so you contact “<abbrtitle="We Make Old Table Based Websites For You">WMOTBWFY</abbr> Web Development Firm” and they make some updates for you and all seems to be going well. Until one day you find out that one of your most loyal customers (a man who lost his eyesight in a tragic origami accident) stops ordering bagels from you.</p>
<p>In fact it seems that almost all your vision impaired customers are leaving, as well as a lot of your other customers. What is happening?! Well my friend you have just been SEO‘d out… Google does not like websites based on tables and your website is no longer on the front page when you search for bagels in your respective city on Google. But why does Google not like your site? It looks amazing! Well Google doesn’t like your site because it is not accessible. Being accessible means that it is very easy for programs to read your site aloud for those who are visually impaired. Believe it or not even though someone is visually impaired they still can and do use the internet. When a page reader encounters a table based website it reads out a lot of information, most of which makes little to no sense to the person listening. So now that you’ve lost your spot on the top hits list on Google and all your visually impaired customers have defected to the new “We got Bagels” stores popping up everywhere you are effectively loosing money because a certain “web development” firm provided you with a state-of-the-art 90′s website for approximately the same price as a properly developed div based website.</p>
<p>Lets just pretend now for a moment that a few months later “WMOTBWFY Web Development Firm” goes out of business. they aren’t getting many customers and business was too slow to pay for all those “in-the-know” developers. Now you need to find a new developer to work on your site. So you come to hire me and say “Hey John! Bagels R’ Us is in trouble! We have lost our spot on the Google front page and a large amount of our customer base has already defected to that smarmy new shop!”. I now have to tell you that your website needs a complete redesign and guess what. It’s going to cost about $900-$1000 now, unless you want new graphics. Why is it so much more than the original site though? Well Not only is the old site’s code useless the new web developer would need to piece the graphics that were cut apart by the table based design back together. At the end of the day “WMOTBWFY Web Development Firm” not only took your money once (by making it necessary to re-develop your site) they took who knows how much of your money a second way (defected customers).</p>
<p>Table based design is dead. If any developers are out there reading this please, for the love of God, start learning how to properly make div based websites styled with CSS. For you business out there please ask any possible web development firms, freelancers, or friends if they use table based development before you make something that stifles the development of the internet and costs you money.</p>
</div><divclass="article__author"itemscopeitemprop="author"itemtype="https://schema.org/Person"><imgclass="article__author__image"src="/images/avatar.jpg"alt="John Warren"><aclass="article__author__link"title="About John Warren"rel="author">John Warren</a><pclass="article__author__desc">Just a place to make stuff</p><divclass="article__author__socials"><aclass="article__author__socials__item"href="/atom.xml"title="rss"target="_blank"><iclass="fa fa-rss"></i></a></div><metaitemprop="name"content="John Warren"></div><divclass="sharer"id="sharer"><divclass="sharer-inner"><divclass="sharer__right"><buttonclass="sharer__item"id="sharer-facebook"><iclass="fa fa-facebook-official"></i></button><buttonclass="sharer__item"id="sharer-twitter"><iclass="fa fa-twitter"></i></button><buttonclass="sharer__item"id="sharer-pinterest"><iclass="fa fa-pinterest"></i></button><buttonclass="sharer__item"id="sharer-pocket"><iclass="fa fa-get-pocket"></i></button></div></div></div><!-- Disqus Code--><divid="disqus_thread"></div><script>(function(){
vard=document,s=d.createElement('script');
s.src='//thebestjohn.disqus.com/embed.js';
s.setAttribute('data-timestamp',+newDate());
(d.head||d.body).appendChild(s);
})();</script><noscript>Enable JavaScript to see comments.</noscript><!-- Meta Tags for Structured Data--><metaitemprop="dateModified"content="2018-04-30T17:43:26.208Z"><metaitemprop="articleBody"content="If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaname="description"content="Well today’s the day! On the eve of Canada day I have made a giant step towards a good version of the plasma speaker! After letting the…">
<metaproperty="og:description"content="Well today’s the day! On the eve of Canada day I have made a giant step towards a good version of the plasma speaker! After letting the…">
<metaname="twitter:description"content="Well today’s the day! On the eve of Canada day I have made a giant step towards a good version of the plasma speaker! After letting the…">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/plasmaHead.jpg"><metaproperty="article:author"content="John Warren"><metaproperty="twitter:label1"content="Published at"><metaproperty="twitter:data1"content="May 10th 2010 00:00:00"><metaproperty="twitter:label2"content="Written by"><metaproperty="twitter:data2"content="John Warren"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div><divclass="menu__item menu__item"><aclass="menu__item__link"href="https://www.patreon.com/TheBestJohn"target="_blank">Patreon</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><articleclass="article"id="article"itemscopeitemtype="https://schema.org/BlogPosting"><h1class="article__title"itemprop="headline">The Plasma Speaker Saga pt.III</h1><divclass="article__meta"><timeclass="article__meta__time"datetime="2010-05-10T04:00:00.000Z"itemprop="datePublished">May 10th 2010</time><divclass="article__meta__categories"><aclass="article__meta__categories__item"href="/categories/Other-Electronics/">Other Electronics</a></div></div><divclass="article__contents"><imgsrc="/images/plasmaHead.jpg"/><p>Well today’s the day! On the eve of Canada day I have made a giant step towards a good version of the plasma speaker! After letting the magic smoke out of countless ICs and Diodes I have finally put together a working model of the plasma speaker. The first thing I did to guide me on my path was to find a TL494 IC in a dip format. I figured that it was going to be another month until I could make this post as I would have had to special order a TL494 chip online which would cost me shipping and a whole crap more money than the chip was worth. When out of the blue two days ago my father asked me what chip I needed for the Plasma speaker. Having studied the schematic for hours I could quote almost every component off by heart at this point, so I told him “TL494″ he looked at me, let out a little chuckle and a smirk, and pointed over to the other side of the kitchen. I walked over and saw several power tools and construction materials (we’re in the middle of a kitchen reno) and an old pc power supply. I picked it up and said “is this it?”. “Yes” he answered “I pulled it out of the pc that that my work threw out. The power supply was the only thing that was bad in it.”. So earlier on today (yesterday?) I open her up and lo and behold there is a TL494 DIP IC staring me in the face (Nestled right beside a LM339N I might add) as well as several other things I may need in the future of this speaker (toroids, heatsinks, etc…).</p>
<p>After about 20 minutes of trying to get this chip out with a solder sucker and solder braid, I finally succeed. I pop it into my breadboard (which had the starting of my time fountain, but who cares PLASMA SPEAKER!) and begin wiring up the schematic. Everything looks wired up properly and I have a speaker in place of the flyback transformer (another steal from the discarded television that I got the flyback from). I attach a 9V battery and…. nothing happens…. shit ok well time to pull out the big guns… the 12V motorcycle battery. I attach the battery and…. it kinda works… except the speaker is just puffed out all the way…. it’s not making any noise at all! What should be happening is the speaker should be oscillating at some high frequency but it’s not, it’s just sitting there all puffed out…. At around this time my father gets home from work. I have a question for him. The TL494 chip has a black dot on it (which usually denotes where pin 1 is) as well as a notch in it (Another common way to denote pin 1) on the opposite side. Theres your problem. the chip is in backwards! I reverse the chip and TA-DA a squealing speaker!</p>
<p>Now it was time to attach the flyback transformer and get to the sparky sparky, singy singy. I put it all together and PFFFFFTTTT! all the magic smoke flys out of my diode. At this point I have let the magic smoke out of so many ICs and Diodes my nickname should be John the wizard. I go back to the drawing board and my dad points out to me that diodes (unlike capacitors) have a white line marking their cathode (whereas on capacitors it denotes an anode). Well shit! I must have blown this diode 20 times because that stupid quirk of electronics. I put my last diode in, turn on the power and….. LIGHTING! It verks! for the next 20 minutes I walk around the house with a big shit eating grin on my face looking for some sort of CD, Cassette, or shitty MP3 player to plug into this potential device killer to make me some audio. I finally find an old Mp3 player that I found on the bus in grade 6 and hook it up (the MP3 player needed a non-standard usb cable so I had to settle with what was on it…. Dr.Dre lol) after about 20 sec0nds of it working…. PFFFTTT! magic smoke billows from the IRF540 MOSFET. So I take a look at it… the heatsink isn’t hot!? I put some heatsink compound on the back whats the deal!? Well it turns out there was a sheet of mylar between the heatsink and the original component and it wasn’t very efficient. So I pop off the mylar sheet, clean everything up, add some new heatsink compound and a new MOSFET and there we go… it works for a longer period of time and I am able to bring you the following video.</p>
<p>It has been brought to my attention that I neglected to cite the source of this schematic. I built this setup by following <ahref="http://www.instructables.com/id/Build-A-Plasma-Speaker/"target="_blank"rel="noopener">plasmana’s instructable</a>. I will be making another, more powerful plasma speaker based off another design.</p>
</div><divclass="article__author"itemscopeitemprop="author"itemtype="https://schema.org/Person"><imgclass="article__author__image"src="/images/avatar.jpg"alt="John Warren"><aclass="article__author__link"title="About John Warren"rel="author">John Warren</a><pclass="article__author__desc">Just a place to make stuff</p><divclass="article__author__socials"><aclass="article__author__socials__item"href="/atom.xml"title="rss"target="_blank"><iclass="fa fa-rss"></i></a></div><metaitemprop="name"content="John Warren"></div><divclass="sharer"id="sharer"><divclass="sharer-inner"><divclass="sharer__right"><buttonclass="sharer__item"id="sharer-facebook"><iclass="fa fa-facebook-official"></i></button><buttonclass="sharer__item"id="sharer-twitter"><iclass="fa fa-twitter"></i></button><buttonclass="sharer__item"id="sharer-pinterest"><iclass="fa fa-pinterest"></i></button><buttonclass="sharer__item"id="sharer-pocket"><iclass="fa fa-get-pocket"></i></button></div></div></div><!-- Disqus Code--><divid="disqus_thread"></div><script>(function(){
