Danny Denenberg 2019-12-09T14:25:53+00:00 / Daniel Denenberg dannydenenberg@gmail.com Gradient descent for univariate linear regression 2019-09-20T00:00:00+00:00 //gradient-descent-univariate-linear-regression <p>Gradient descent is used for many aspects of machine learning. One area in which it is used a ton is in optimizing artificial neural networks. I will explain the concept of how this works once you understand the basic gradient descent operations.</p> <p>Gradient descent can also be used to minimize arbitrary functions such as more general ones like cost functions with $$n$$ number of parameters: $$J(\theta _0, \theta _1, \theta _2, \theta _3, … , \theta _n)$$.</p> <p>Please keep in mind that gradient descent is NOT HARD. Especially understanding how it minimizes functions is super easy to get. So, if you don’t understand a concept right away, keep on trying to see it from different angles and I’m sure it’ll click.</p> <p>So, without further ado let me give you the general outline for minimizing a function using G.D.:</p> <ol> <li>Start with some value for $$\theta _0$$and $$\theta _1$$</li> <li>Keep changing $$\theta _0$$and $$\theta _1$$to reduce $$(\theta _0, \theta _1)$$until we hopefully find a minimum</li> </ol> <p><strong>Note:</strong> The <em>assignment operator</em> in maths looks like this: “$$:=$$”. It can also be used to reassign variable values. The normal “$$=$$” is a truth assertion.</p> <p>Here are some variable to know before I get into the algorithm:</p> <p>$$\alpha=$$”alpha” is the <em>learning rate</em>. It is how much we change the parameter values by each update step. It usually is a constant. Ex: If $$\alpha=10$$whatever value the algorithm gives to update the parameter value by, it is multiplied by a factor of ten.</p> <p>$$j=$$it is a subscript to $$\theta$$to represent a which parameter we are dealing with. It is a generic form of saying something like $$theta _0.</p> <p>And a refresher on the <strong>cost function</strong>: J(\theta _0,\theta _1)=\frac{1}{2m} \sum _{i=1} ^m (h _\theta (x^i) - y^i)^2</p> <hr /> <p>Here is the actual algorithm:</p> <p>repeat \hspace{2mm} until \hspace{2mm}convergence \hspace{4mm} \{ \\ \hspace{10mm} \theta _j := \theta _j \hspace{1mm}- \hspace{1mm}\alpha \frac{\partial J(\theta _ 0, \theta _ 1)}{\partial \theta _j }\\ \} \hspace{67mm}</p> <p>This is repeated simultaneously for \(\theta _0$$and $$\theta _1$$. A.K.A this is repeated simultaneously for the $$j$$values of $$0,1$$.</p> <p>Programmatically, you will have to create temporary variables to be able to simulate a simultaneous update.</p> <p><strong>Correct Simultaneous Update:</strong></p> <p>$temp0 := \theta _0 \hspace{1mm}- \hspace{1mm}\alpha \frac{\partial J(\theta _0, \theta _1)}{\partial \theta _0 } \\ temp1 := \theta _1 \hspace{1mm}- \hspace{1mm}\alpha \frac{\partial J(\theta _0, \theta _1)}{\partial \theta _1 } \\ \\ \\ \\ \theta _0 := temp0 \\ \theta _1 := temp1$</p> <p><strong>INcorrect Simultaneous Update:</strong></p> <p>$temp0 := \theta _0 \hspace{1mm}- \hspace{1mm}\alpha \frac{\partial J(\theta _0, \theta _1)}{\partial \theta _0 } \\ \theta _0 := temp0 \\ temp1 := \theta _1 \hspace{1mm}- \hspace{1mm}\alpha \frac{\partial J(\theta _0, \theta _1)}{\partial \theta _1 } \\ \theta _1 := temp1$</p> <blockquote> <p>The error here occurs because $$\theta _0$$is updated before $$\theta _1$$. That means that $$\theta _1$$is using the newly updated value of $$\theta _0$$to calculate the partial derivative with respects to $$\theta _1$$which is NOT what we want to happen.</p> </blockquote> <h2 id="example-using-an-easier-function">Example Using an Easier Function</h2> <p>Let’s say that our task was to minimize some arbitrary cost function with one parameter $$(\theta _1)$$where $$theta _1 \in ℝ$$. The graph of the function $$(\theta _1)$$(if it is a squared error cost function) might look something like this:</p> <p><img src="https://i.snap.as/UdTq5I8.png" alt="" /></p> <p>What we want to find is the value of $$\theta$$ that makes the $$y$$component of this graph to be as low as possible – in this case, 0. Just looking at the graph, we can see that that number is 4. But, in more complex cost functions that deal with hundreds of parameters/dimensions, simply graphing the cost function will not yield an easy-to-see answer.</p> <p>In terms of gradient descent, we start by choosing a random value for $$\theta _1$$(in more advanced implementations, there are more clever ways to choose a starting value, but whatever). We then find the slope of the chosen point on the graph and subtract it from $$\theta _1’s current value. To find the slope we find the derivative of the cost function with respect to \(\theta _1$$.</p> <p><strong>Note:</strong> If you don’t know calc already, THAT’S TOTALLY OKAY! I didn’t either when I started learning about this subject. I taught all I needed to know to myself. I would highly highly recommend 3Blue1Brown’s <a href="https://www.youtube.com/watch?v=WUvTyaaNkzM&amp;list=PL0-GT3co4r2wlh6UHTUeQsrf3mlS2lk6x">“The Essence of Calculus”</a> as a starting point. It has amazing animations and fantastic descriptions of everything you would need to know. If you want to just keep trudging along, though, just note that the derivative of a function allows you to find the slope of any point along that original function.</p> <p>Okay, back to it.</p> <p>Here is the expression for updating our parameter:</p> <p>$\theta _1 := \theta _1 - \alpha \frac{d J(\theta _1)}{d\theta _1}$</p> <p>Next:</p> <ul class="task-list"> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Example using easier function, J(theta 1)</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Talk about alpha</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Linear regression model review</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />What is the derivative</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />New algorithm with the derivatives</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Cost function will always be a “bowl” function like the image</li> <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Discuss Batch gradient descent using ALL training examples</li> </ul> A js developer’s view of rust 2019-09-13T00:00:00+00:00 //js-rust <p>A while ago, I was trying to find something interesting to read about online when I bumped into Rust. Rust is …</p> <blockquote> <p>“a language empowering everyone to build reliable and efficient software.”</p> </blockquote> <p>In short, it is a systems programming language. A freaky fast one, at that. It even outperformed C++ in many of the benchmarks tests run by The Computer Language Benchmarks Game (mostly having to do with complex algorithmic tasks like binary trees, etc).</p> <p>Before I started to delve more into the language itself, though, I searched about to see what people were thinking of it. Rust was created in 2011 and is backed by Mozilla (the not-for-profit). It has a sort of niche group following it consisting mostly of previous C/C++ developers who wanted a break from the null pointer exceptions, undefined behaviors, language complexity, crazy macros — shall I go on? Although Rust is still in its early stages of maturity, it has a website devoted to following its development of game programming, which is pretty sweet. There are even some games that are gathering a lot of buzz and have even been put into the App Store and the Google Play Store such as A Snake’s Tale. Rust even has an AMAZING package manager called crates.io which is comparable to npm and has had almost 1.5 billion downloads to date.</p> <p>After seeing all of this, I decided that I needed to feed my curiosity and learn Rust’s syntax. I started by reading through The Book — a (mostly) complete walkthrough of Rust’s syntax, idioms, and program structure.</p> <p>Because I know many c-like languages, the general form of the syntax was simple and easy to grasp. If you are one of those people who use const whenever possible and will punish those who don’t, you’ll love Rust. Its default form of assigning variables makes them immutable.</p> <div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">// Below is an immutable variable</span> <span class="k">let</span> <span class="n">a</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span><span class="c">// Below is a mutable variable</span> <span class="k">let</span> <span class="k">mut</span> <span class="n">b</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span><span class="c">// General form for variables:</span> <span class="k">let</span> <span class="n">var_name</span><span class="p">:</span> <span class="k">type</span> <span class="o">=</span> <span class="n">value</span><span class="p">;</span> </code></pre></div></div> <p>Data types in Rust are straight forward. Integer types consist of 8 through 128 bit unsigned and signed numbers.</p> <p><img src="https://miro.medium.com/max/564/1*AesR6b5JntLgZzW7K2_nlA.png" alt="" /></p> <p>There are also immutable array types, characters, &amp;str (references to a list of characters in memory), tuples, enumerations, structs, collections, etc.</p> <p>Functions are declared using the fn keyword like so:</p> <div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">fn</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span> <span class="nd">println!</span><span class="p">(</span><span class="s">"Hello, world"</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>You can specify return values with the -&gt; symbol and if you are returning a value in the last line of the function, there is no need to include the return keyword.</p> <div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">// returns the 32-bit integer 5</span> <span class="k">fn</span> <span class="nf">my_function</span><span class="p">()</span> <span class="k">-&gt;</span> <span class="nb">u32</span> <span class="p">{</span> <span class="mi">5</span> <span class="p">}</span> </code></pre></div></div> <p>I was breezing on through until I hit the concept of ownership. All programs have to manage the way they use a computer’s memory while running. Because Rust doesn’t garbage-collect and programmers don’t have to manually allocate and deallocate memory, memory is managed through a system of ownership.</p> <p>Here are the rules of ownership in Rust (right from The Book):</p> <ol> <li>Each value in Rust has a variable that’s called its owner.</li> <li>There can only be one owner at a time.</li> <li>When the owner goes out of scope, the value will be dropped.</li> </ol> <p>Let’s have an example:</p> <div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span> <span class="c">// s is not valid here, it’s not yet declared</span> <span class="k">let</span> <span class="n">s</span> <span class="o">=</span> <span class="s">"hello"</span><span class="p">;</span> <span class="c">// s is valid from this point forward</span> <span class="c">// do stuff with s</span> <span class="p">}</span> <span class="c">// this scope is now over, and s is no longer valid</span> </code></pre></div></div> <p>Here is the jam that I got into when I was first using Rust.</p> <div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">a</span> <span class="o">=</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">);</span> <span class="c">// a is the owner</span> <span class="k">let</span> <span class="n">b</span> <span class="o">=</span> <span class="n">a</span><span class="p">;</span> <span class="c">// ownership has changed to b. What is a?</span> <span class="nd">println!</span><span class="p">(</span><span class="s">"{}"</span><span class="p">,</span> <span class="n">a</span><span class="p">);</span> <span class="c">// error[E0382]: borrow of moved value: a</span> </code></pre></div></div> <p>Because there can only be only one owner at a time, I can’t try to assign the value of a variable to another using the first variable’s name if it was allocated on the heap, like the String type is in Rust. Now, if the variable’s type is a primitive (int, double, bool, etc), doing the reassign will simply copy the value and NOT change ownership.</p> <p>When referencing a variable, you use the &amp; symbol as in C/C++. The references allow the programmer to take the value without taking ownership. There can be as many non-mutable references as one wants to a variable at one time, but only ONE mutable reference.</p> <div class="language-rust highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">let</span> <span class="n">a</span> <span class="o">=</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"Dude, Rust is sick."</span><span class="p">);</span> <span class="p">{</span> <span class="k">let</span> <span class="n">b</span> <span class="o">=</span> <span class="o">&amp;</span><span class="n">a</span><span class="p">;</span> <span class="c">// ok</span> <span class="k">let</span> <span class="n">c</span> <span class="o">=</span> <span class="o">&amp;</span><span class="n">a</span><span class="p">;</span> <span class="c">// ok</span> <span class="p">}</span> <span class="p">{</span> <span class="k">let</span> <span class="n">b</span> <span class="o">=</span> <span class="o">&amp;</span><span class="k">mut</span> <span class="n">a</span><span class="p">;</span> <span class="c">// mutable reference. ok.</span> <span class="o">*</span><span class="n">b</span> <span class="o">=</span> <span class="nn">String</span><span class="p">::</span><span class="nf">from</span><span class="p">(</span><span class="s">"Different!"</span><span class="p">);</span> <span class="c">// change value. ok</span> <span class="p">}</span> <span class="p">{</span> <span class="k">let</span> <span class="n">b</span> <span class="o">=</span> <span class="o">&amp;</span><span class="k">mut</span> <span class="n">a</span><span class="p">;</span> <span class="c">// ok</span> <span class="k">let</span> <span class="n">c</span> <span class="o">=</span> <span class="o">&amp;</span><span class="k">mut</span> <span class="n">a</span><span class="p">;</span> <span class="c">// ERROR. Only one mut reference at a time!</span> <span class="p">}</span> </code></pre></div></div> <p>Even more difficult for me to understand was rust lifetimes which is how Rust can get around using garbage collection. It is also their solution to the all too well known C++ problem of dangling pointers when a variable is “used after free”. I won’t even attempt to explain that concept here. You should read this article to find more.</p> <p>Overall, I would say my experience with Rust was rewarding. I was able to understand its syntax and style guide easily, although some of the concepts were difficult to grasp at first. I don’t know if this is just me, but even the way the language looks when typed is elegant. It uses functional programming techniques commonly used in JavaScript (filtering, mapping, etc) and its syntax keywords are short and too the point (<code class="highlighter-rouge">fn</code>, <code class="highlighter-rouge">enum</code>, <code class="highlighter-rouge">let</code>, <code class="highlighter-rouge">mut</code>, <code class="highlighter-rouge">i32</code>, <code class="highlighter-rouge">&amp;str</code>, etc.)</p> <p>Some systems developers are lobbying heavily for Rust to be the next C/C++. I don’t know whether that will happen anytime soon, but one thing is for sure: it will continue to grow and mature. It is backed by Mozilla and has a ‘cult’ following that want to kill off C++.</p> <p>So there.</p> <p>Go look at Rust.</p> A complete guide to password hashing 2019-09-10T00:00:00+00:00 //hashing <p>Hashing algorithms are one-way functions. They take any string and turn it into a fixed-length “fingerprint” that is unable to be reversed. This means that if the data is compromised, the hacker<!--more--> cannot get the user’s passwords if they were hashed because at no point were they ever stored on the drive without being in their hashed form.</p> <p>Websites using hashing typically have this workflow:</p> <ol> <li>A user creates an account</li> <li>Their password is hashed and stored on the base</li> <li>When the user attempts to log in, the hash of their entered password is compared to the has stored in the database</li> <li>If the hashes match, the user can access the account. If not, a generic error message is sent back such as “Entered invalid credentials” so hackers can’t trace the error to the username or password specifically.</li> </ol> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hash("hello") = 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824 hash("hellu") = 3937f988aeb57b6fd75b9c71bf17b9658ec97823bab613df438389b0c896b724 hash("danny") = 668e2b73ac556a2f051304702da290160b29bad3392ddcc72074fefbee80c55a </code></pre></div></div> <p><strong>NOTE:</strong> Only secure, or cryptographic hash functions, can be used for password hashing (SHA256, SHA512, RipeMD, WHIRLPOOL, etc.)</p> <p>Sadly, just cryptographically hashing passwords does not ensure safety.</p> <hr /> <h1 id="cracking-hashes">Cracking Hashes</h1> <h2 id="brute-force-and-dictionary-attacks">Brute Force and Dictionary Attacks</h2> <p>The easiest way to decrypt a hash is just to guess the password. The way to do this is to guess the user password, hash the guess, and compare it to the hash of the actual password you are trying to solve. If the two hashes match, the unhashed version of the guess is the right password.</p> <p>A <strong>brute force attack</strong> goes through every possible combination of characters given a certain length. Even though they will 100% eventually crack any given password, it is difficult to use this method because of how computationally expensive it is. Some passwords that are even fairly short in length can take thousands of years (literally) to crack using brute force.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Trying aaa : failed Trying aab : failed Trying aac : failed ... Trying acb : failed Trying acc : success! </code></pre></div></div> <p><strong>Dictionary attacks</strong> use a file containing commonly used words, phrases, or passwords that are likely to be a used password. There are databases you can find that hold the top 100,000 (or however many) most commonly used passwords. The attack hashes these passwords and compares the hash to the password to crack. For cracking the average Joe Shmo, this is sometimes a good method to use and is certainly faster than using a brute force attack.</p> <p><strong>Lookup tables</strong> can improve cracking performance by pre-computing the hashes so when it comes time to guess the password, the program needs not to spend compute time actually hashing the guesses.</p> <p>In the next section, we will take a look at “salting” which makes these cracking methods impossible to use reliably.</p> <h1 id="salting">Salting</h1> <p>The reason lookup tables, dictionary attacks, and brute force attacks can work is because the passwords are hashed the same way each time. We can randomize the hash by prepending or appending a random string called a salt to the passwords BEFORE hashing.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hash("hello") = 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824 hash("hello" + "jHjdbJShdiodb") = 6f7f167a978166ee23b32c9531ce5dc23ae8fc26e412045858d938d11470831f </code></pre></div></div> <p>The salt doesn’t have to be secret because an attacker doesn’t know what the salt will be and thus cannot make pre-computed tables for it. The Dos and Don’ts of Salting</p> <p>Don’t:</p> <ul> <li>Reuse the same salt for each password hashed</li> <li>Use short salts</li> <li>Use weird double hashes (ex: hash(hash(hash(‘mypass’)))) in lou of a salt</li> </ul> <p>Do:</p> <ul> <li>Generate random salts using a <em>Cryptographically Secure Pseudo-Random Number Generator</em> (<strong>CSPRNG</strong>)</li> <li>Generate a new random unique salt for EACH password hashed</li> <li>Generate LONG salts</li> </ul> <h1 id="salting-workflow">Salting Workflow</h1> <p><strong>Storing a Password:</strong></p> <ol> <li>Generate super long salt with a CSPRNG</li> <li>Prepend the salt to the user password and hash it</li> <li>Save the salt and the hash in the database</li> </ol> <p><strong>Checking a Password:</strong></p> <ol> <li>Get the salt and hash from the database</li> <li>Prepend the salt to the submitted password and hash it</li> <li>Compare the hashes. If they are equal, the password is correct</li> </ol> <p><strong>NOTE:</strong> Always always always (shall I add more always’??) hash on the server. Sometimes JavaScript isn’t enabled and a hash won’t work on the client-side. Also, no one else can access the server so it is ensured to be hashed (You can also hash on the client-side if you so choose)</p> Securing your database 2019-08-05T00:00:00+00:00 //securing-db <p><a href="https://github.com/dannydenenberg/mongodb-users">Here</a> is a link to all of the source code WITH authentication and hashing.</p> <p>This article assumes knowledge of NodeJS, Express.js, MongoDB, and how all of those technologies interact programmatically. I wrote a <a href="https://denenberg.us/creating-and-connecting-a-mongodb-database-and-node-js-server-to-a-front-end">great article</a> on that topic as well.</p> <p>Let’s start by taking a look at some code for a MongoDB database connection through Node.js and ExpressJS.<!--more--></p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/8da5kL1t/1/embedded/js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <p>It achieves the central goal for that article which was to be able to connect a front end to a Mongo database. It does this by allowing requests to be sent to a server which has the functionality to read, write, and update the database.</p> <p>Well, now there is a new issue – we have users that each have their own unique information, but ANYONE who sends a get request to the server with a username of some user can acquire their information! That is SUPER unsafe. To combat this, most websites have a password field for each user (as I’m sure you know) which is kept private. This combination of public and private “keys” is a nice way for users to be able to connect with each other using their public usernames, but keep their info secure with a strong password.</p> <p>Let’s implement this in our NodeJS program by first adding a <code class="highlighter-rouge">pass</code> field to each user holding their unique password. This doesn’t change any code so far on the server side, but let’s use this idea to create a new user called <code class="highlighter-rouge">deb</code> with the password <code class="highlighter-rouge">1234</code> (I am using JavaScript to send the request to our server – make sure the server is running on port <code class="highlighter-rouge">4567</code>):</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/8da5kL1t/12/embedded/js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <p>Okay, to make sure the <code class="highlighter-rouge">fetch()</code> request worked, look at the data inside of your MongoDB cluster collections in Atlas.</p> <p>Great. The user has a password, but we can still send a get request and get the information without using a password. To password-protect the user info, every time a get request is sent, a password should be sent along with it. The server will then compare the password sent in the get request with the password stored in the database associated with the user the get request was sent for. If they are equivalent, the server will send back the user information. Otherwise, it will send back some sort of an error code for the wrong password.</p> <p>In short, in the express server’s response to get requests, it should check that the sent password is correct before allowing the request to access the user’s information.</p> <p>To send a password along with the get request, we will use simple HTTP url request parameters. The GET request will look like this:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://localhost:4567/username?pass=mypassword1 </code></pre></div></div> <p><strong>One thing to note</strong> is how to get the query parameters in Express.js (Node.js): <code class="highlighter-rouge">req.query.myparam</code>. Or, in our specific case, <code class="highlighter-rouge">req.query.pass</code> gives the password sent.</p> <p>Here is some example code of how the request URL parameters can be used in a program (this is just the get request part). It will print out the password to the console when a get request is made with the <code class="highlighter-rouge">/user</code> and <code class="highlighter-rouge">?pass=__ fields</code>.</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">app</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="s2">"/:user"</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">Password: </span><span class="p">${</span><span class="nx">req</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">pass</span><span class="p">}</span><span class="s2"></span><span class="p">);</span> <span class="p">});</span> </code></pre></div></div> <p>To test this, run the Node server. In the browser go to <code class="highlighter-rouge">localhost:4567/dan?pass=abc</code>. Switch back to the console and you should see the password printed there.</p> <p>Now that we have URL parameters working, we need to not send back the user data in the response unless the password is correct. To do this, within the get request, we will get the password associated with the <code class="highlighter-rouge">/user</code>. If that is the same as the URL <code class="highlighter-rouge">pass</code> parameter, we send back the info on the user.</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/8da5kL1t/10/embedded/js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <p>To test this out, restart your server with updated code. Go to <code class="highlighter-rouge">localhost:4567/deb?pass=1234</code> in your browser. You should recieve deb’s user id, etc. Try typing a different password and you will get the error message.</p> <p>Okay, nice! You have now password protected all get requests to recieve data. There are, however, a couple of issues with this method, one of which is the fact that if your database is compromised, you will have leaked a piece of very sensitive information that users have trusted you with: their password (which is likely being reused on different sites). This is why, instead of being stored as they are, passwords are typically <strong>hashed</strong> using a <em>one way</em> function.</p> <p>The following section will go more in depth into hashing, why it is important, and how to use it to <strong>securely</strong> store data.</p> <hr /> <p>Hashing algorithms are one way functions. They take any string and turn it into a fixed-length “fingerprint” that is unable to be reversed. This means that if the data is compromised, the onlooker cannot get the user’s passwords if they were hashed. At no point were they ever stored on the drive without being in their hashed form.</p> <p>Websites using hashing typically have this workflow:</p> <ol> <li>User creates an account</li> <li>Their password is hashed and stored on the base</li> <li>When the user attempts to log in, the hash of their entered password is compared to the has stored in the database</li> <li>If the hashes match, the user can access the account. If not, a <strong>generic</strong> error message is sent back such as “Entered invalid credentials” so hackers can’t trace the error to the username or password specifically.</li> </ol> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hash("hello") = 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824 hash("hellu") = 3937f988aeb57b6fd75b9c71bf17b9658ec97823bab613df438389b0c896b724 hash("danny") = 668e2b73ac556a2f051304702da290160b29bad3392ddcc72074fefbee80c55a </code></pre></div></div> <p><strong>NOTE:</strong> Only secure, or <strong>cryptographic hash functions</strong>, can be used for password hashing (SHA256, SHA512, RipeMD, WHIRLPOOL, etc.)</p> <p>Sadly, just cryptographically hashing passwords does not ensure safety.</p> <h2 id="cracking-hashes">Cracking Hashes</h2> <h3 id="brute-force-and-dictionary-attacks">Brute Force and Dictionary Attacks</h3> <p>The easiest way to decrypt a hash is just to guess the password. The way to do this is to guess the user password, hash the guess, and compare it to the hash of the actual password you are trying to solve. If the two hashes match, the unhashed version of the guess is the right password.</p> <p>A <strong>brute force</strong> attack goes through every possible combination of characters given a certain length. Even though they will 100% <em>eventually</em> crack any given password, it is difficult to use this method because of how computationally expensive it is. Some passwords that are even fairly short in length can take thousands of years (literally) to crack using brute force.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Trying aaa : failed Trying aab : failed Trying aac : failed ... Trying acb : failed Trying acc : success! </code></pre></div></div> <p><strong>Dictionary attacks</strong> use a file containing commonly used words, phrases, or passwords that are likely to be a used password. There are <a href="https://en.wikipedia.org/wiki/Wikipedia:10,000_most_common_passwords">databases you can find</a> that hold the top 100,000 (or however many) most commonly used passwords. The attack hashes these passwords and compares the hash to the password to crack. For cracking the average Joe Shmo, this is sometimes a good method to use and is certainly faster than using a brute force attack.</p> <p><strong>Lookup tables</strong> can improve cracking performance by pre-computing the hashes so when it comes time to guess the password, the program needs not spend compute time actually hashing the guesses.</p> <p>In the next section, we will take a look at “salting” which makes these cracking methods impossible to use reliably.</p> <h2 id="salting">Salting</h2> <p>The reason lookup tables, dictionary attacks, and brute force attacks can work is because the passwords are hashed the same way each time. We can randomize the hash by prepending or appending a random string called a <em>salt</em> to the passwords BEFORE hashing.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hash("hello") = 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824 hash("hello" + "jHjdbJShdiodb") = 6f7f167a978166ee23b32c9531ce5dc23ae8fc26e412045858d938d11470831f </code></pre></div></div> <p>The salt doesn’t have to be secret because an attacker doesn’t know what the salt will be and thus cannot make pre computed tables for it.</p> <h2 id="the-dos-and-donts-of-salting">The Dos and Don’ts of Salting</h2> <p>Don’t:</p> <ul> <li>Reuse the same salt for each password hashed</li> <li>Use short salts</li> <li>Use wierd double hashes (ex: hash(hash(hash(‘mypass’)))) in lou of a salt</li> </ul> <p>Do:</p> <ul> <li>Generate random salts using a <strong>Cryptographically Secure Pseudo-Random Number Generator</strong> (CSPRNG)</li> <li>Generate a new random unique salt for <em>EACH</em> password hashed</li> <li>Generate LONG salts</li> </ul> <h2 id="salting-workflow">Salting Workflow</h2> <p>Storing a Password:</p> <ol> <li>Generate super long salt with a CSPRNG</li> <li>Prepend the salt to the user password and hash it</li> <li>Save the salt and the hash in the database</li> </ol> <p>Checking a Password:</p> <ol> <li>Get the salt and hash from the database</li> <li>Prepend the salt to the submitted password and hash it</li> <li>Compare the hashes. If they are equal, the password is correct</li> </ol> <p><strong>NOTE:</strong> Always always always hash on the server. Sometimes JavaScript isn’t enabled. Also, no one else can access the server so it is ensured to be hashed (You can <em>also</em> hash on the client side if you so choose)</p> <p>And with that, you have learned the basics of securely hashing data. Now let’s continue on with the (not-as-hashy parts of the) article.</p> <h2 id="our-hash-function">Our Hash Function</h2> <p>We will be using the SHA256 hashing function. How, exactly, hashing functions work is beyond the scope of this article, but if you are interested, see <a href="https://en.wikipedia.org/wiki/Hash_function">this</a> and <a href="https://gfredericks.com/blog/98">this</a>.</p> <p>First of all, install the dependency for our function: <code class="highlighter-rouge">npm i -s crypto</code>. Also, add the import to the top of the NodeJS file: <code class="highlighter-rouge">const crypto = require("crypto");</code></p> <p>Now add this code to the bottom of the NodeJS file. We will call the function <code class="highlighter-rouge">hash</code>.</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// hashes strings with sha256 for storing passwords</span> <span class="kd">function</span> <span class="nx">hash</span><span class="p">(</span><span class="nx">pwd</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">crypto</span> <span class="p">.</span><span class="nx">createHash</span><span class="p">(</span><span class="s2">"sha256"</span><span class="p">)</span> <span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="nx">pwd</span><span class="p">)</span> <span class="p">.</span><span class="nx">digest</span><span class="p">(</span><span class="s2">"base64"</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <h2 id="the-plan">The Plan</h2> <p>There are 3 more feature we need to implement before I can call the database “secure”.</p> <ol> <li>Hash &amp; salt passcodes for new users being stored in response to <code class="highlighter-rouge">post</code> requests</li> <li>Use the salt to hash and check the passwords when a <code class="highlighter-rouge">get</code> request needs info</li> <li>Use the salt to check passwords for updating info on the database in response to <code class="highlighter-rouge">put</code> requests.</li> </ol> <p>Alrighty, let’s get started!</p> <h2 id="post-request-security">POST Request Security</h2> <p>Passwords need to be hashed and salted before being stored in the database.</p> <p>Before I can give you the code, you have to install the dependency for generating Cryptographically Secure Pseudo-Random passwords. We will use a library called ‘csprng’. Install it: <code class="highlighter-rouge">npm i -s csprng</code>. Also, add the import in the top of the NodeJS file: <code class="highlighter-rouge">const csprng = require('csprng');</code></p> <p>Here is the <em>well commented</em> code for the server’s response to POST requests. It uses the <code class="highlighter-rouge">hash()</code> function defined earlier.</p> <p><strong>NOTE:</strong> The user password is sent as the <code class="highlighter-rouge">pass</code> field in the body of the request (contrary to how it was sent before).</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/8da5kL1t/8/embedded/js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <h2 id="get-request-security">GET Request Security</h2> <p>Now to check if an entered passcode is correct, we have to get the stored salt and use that to hash the entered passcode to check against the stored one.</p> <p>Here is the code for the GET request response.</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/8da5kL1t/5/embedded/js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <h2 id="put-request-security">PUT Request Security</h2> <p>When updating info in the database, like the GET request, a password must be submitted to make sure the user is the right person to update his data. Also like the GET request, we need to use the stored salt associated with the user to hash the entered password for hashing.</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/8da5kL1t/6/embedded/js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <p><strong>Congrats for getting through this article!! 🎉🥳</strong></p> <p>Although I used a MongoDB database for storage and NodeJS for the server, the concepts covered here are applicable in ANY technology you may choose.</p> <p>Have fun with your database!</p> Mongo database+nodejs with a front end 2019-07-29T00:00:00+00:00 //creating-mongo-db <blockquote> <p><a href="https://github.com/dannydenenberg/mongodb-users">Here</a> is a link to all of the Node.js code for both parts (includes authentication and security features) if you want to jump right in (yes, I comment well).</p> </blockquote> <p>If you are in the situation I was in when I first encountered this problem, you have a working front end (for me, it was a basic todo app) but you need to be able to store user data such as usernames, passwords, <em>todo list items</em>, etc.<!--more--></p> <h2 id="all-about-databases">All About Databases</h2> <p>When it comes to storing data, luckily, there are many options such as MySQL, NoSQL, GraphQL, public storage on a server, a simple JSON file, or MongoDB.</p> <blockquote> <p>Okay, okay, back up. Did you say JSON file on a simple server? Easy! I could set that up with Node.js and express in an hour!</p> </blockquote> <p>Ummm, let me think about it – No.</p> <blockquote> <p>Why not? Why should I use a database?</p> </blockquote> <p>Well, there are many advantages to using a database over a JSON file or something similar. If you use a cloud hosting option, there is no need to worry about loss of data. Databases are optimized to store, search, and protect data. They will not let unauthorized users to write to your data. Data transactions are <strong>atomic</strong> meaning that either an entire read/write/update operation on a thread occurs, or nothing at all, which prevents corruption of data.</p> <blockquote> <p>Okay, fine. I’m convinced. I’ll use a database. Which one?</p> </blockquote> <p>There are many out there currently, but if you’re looking for an easy-to-use, high performance, high availability database that could automatically scale in size depending on use, I would recommend MongoDB. MongoDB is a document-based database meaning that it stores data in JSON-like documents so it is super easy to work with data in it if you are already familiar with JavaScript objects or JSON:</p> <p><img src="https://i.snap.as/L2jZ6Yx.png" alt="" /></p> <p>MongoDB’s query language is also powerful and easy to use. For example, this will find all users with a certain zip code:</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">db</span><span class="p">.</span><span class="nx">users</span><span class="p">.</span><span class="nx">find</span><span class="p">({</span> <span class="s2">"address.zip"</span><span class="p">:</span> <span class="s2">"90404"</span> <span class="p">});</span> </code></pre></div></div> <h2 id="setting-up-mongo">Setting Up Mongo</h2> <p>Let’s get started setting up the MongoDB database.</p> <p>To make it simple and easy, we are going to host our database in the cloud using <a href="https://www.mongodb.com/cloud/atlas">MongoDB’s Atlas</a>. This takes away the pain of setting up the actual database and helps us with automatic scaling and not worrying about loss of data (like I said before).</p> <ol> <li>Go to the MongoDB Atlas website, click “Start Free”, and create an account.</li> <li>Once you are inside the dashboard looking page, create a new project (name it anything you want).</li> <li>Make sure you are inside the project (you should see a ‘Clusters’ tab on the left hand nav bar)</li> <li>Create a new cluster. Leave <strong>Global Cloud Configuration</strong> with its default parameters. For <strong>Cloud Provider &amp; Region</strong> select ‘Google Cloud Platform’ and for the region, find the one that says ‘FREE TIER AVAILABLE’ and choose that one (for me, it was Iowa).</li> <li>In the “Cluster Tier” section make sure that <strong>M0 Sandbox</strong> is selected</li> <li>In “Additional Settings” you can leave <strong>Turn on Backups</strong> <em>unchecked</em>.</li> <li>In “Cluster Name”, name it anything you want.</li> </ol> <p>Nice! You have a working database. Just an FYI, it should take about 7-10 minutes for everything to get initialized and up and running properly.</p> <h2 id="database-access">Database Access</h2> <p>To actually use a database, you have to have the proper access to the information. Because I am assuming there is just one person using this database, we are going to give one user full admin access to the information.</p> <p>To do this, click on the tab in the side nav bar called “Database Access”. In the upper right hand corner, click “Add New User”. For the username and password, enter anything you want, but make sure the password is long and random (you don’t want anybody being able to put information into the database other than yourself). For the <strong>User Privileges</strong> select “Read and Write to any database”. Click ‘Add the User’. Make sure you write down the credentials (username + password) you used for the user!</p> <p>After you have created a user with read/write privileges, to actually connect to the database, you need to use a <strong>MongoDB URI</strong>. This is the web address for connecting to the data. The URI of a database is like the URL of a webpage. By convention, the MongoDB URI is as follows:</p> <p><code class="highlighter-rouge">mongodb://&lt;user&gt;:&lt;password&gt;@&lt;host&gt;:&lt;port&gt;/&lt;databasename&gt;</code></p> <p>For example, mine would be:</p> <p><code class="highlighter-rouge">mongodb+srv://danny:secretPassword123@vuecluster5u.gcp.mongodb.net/users</code></p> <p><strong>NOTE:</strong> The final <code class="highlighter-rouge">/users</code> is called a collection in MongoDB idiom. It is a collection of documents (database entries).</p> <p>To get your URI, click on the “Clusters” tab of your project and on your main cluster, click <strong>Connect</strong>. Select ‘Connect Your Application’.</p> <p><img src="https://i.snap.as/AN9ygzu.png" alt="" /></p> <p>Then on ‘Choose your driver version’, set the driver to <strong>Node.js</strong> and the version to <strong>2.2.12 or later</strong>.</p> <p><img src="https://i.snap.as/6ikkw2V.png" alt="" /></p> <p>Your connection string (URI) should be under the drivers. To get your real working URI, replace the <code class="highlighter-rouge">&lt;password&gt;</code> with your user password, and the <code class="highlighter-rouge">/test</code> after the port number with a collection (database) name you want, eg: <code class="highlighter-rouge">/mydb</code>. There you go! You have your URI. Write it down or copy it in some form because you’ll need it in a bit.</p> <h2 id="nodejs-skeleton">Node.js Skeleton</h2> <p>In this section, we are going to set up the minimum Node.js needed to connect to your database (cluster) using the URI and to read/write to it as well.</p> <p>To begin, set up a new Node project using npm (create a new directory and run <code class="highlighter-rouge">npm init</code> inside of it). If you don’t already have Node.js installed, please <a href="https://nodejs.org/en/">install it</a>.</p> <p>After your project is initialized, install the dependencies. For this project, all we are using is <a href="https://expressjs.com/">Express.js</a> and <strong>CORS</strong>. If you don’t already know, express is one of the most popular ways to create servers in Node. To install it, just run <code class="highlighter-rouge">npm i -s express</code> to install and save express. CORS (<strong>C</strong>ross <strong>O</strong>rigin <strong>R</strong>esource <strong>S</strong>haring) is a safety feature that we need to bypass to be able to access resources out of localhost (where we are running our server from). To install it, run <code class="highlighter-rouge">npm i -s cors</code>. Now create a new file in the root directory named <code class="highlighter-rouge">app.js</code> and put this code in it. I commented it heavily so you can understand what is going on:</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/5nr6w4mg/3/embedded/js/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <p>After you have read through, the code and know the gist (no pun intended) of what is happening, run the code in <code class="highlighter-rouge">app.js</code>. If you configured and installed everything correctly, you should see something almost identical to this:</p> <p><img src="https://i.snap.as/ChaGQj5.png" alt="" /></p> <p>Then, open a browser and travel to <code class="highlighter-rouge">http://localhost:4567</code> and you should see “Home sweet home”.</p> <p><img src="https://i.snap.as/VEuNLaB.png" alt="" /></p> <p><strong>NOTE:</strong> Opening a web page from a browser makes a <code class="highlighter-rouge">GET</code> request to a server which is one of the 3 HTTP requests (requests made to a server) we will use for our database:</p> <ol> <li><code class="highlighter-rouge">GET</code> requests fetch resources from a server</li> <li><code class="highlighter-rouge">POST</code> requests create resources on a server (database)</li> <li><code class="highlighter-rouge">PUT</code> requests update resources on a server</li> </ol> <p>One more thing necessary to know before using our database, is express.js routing parameters. As of now, we are only responding to requests being sent on the base route “/”. Let’s say that we want to respond with user information when a <code class="highlighter-rouge">GET</code> request is sent with the username being the first route parameter. For example, if I want to get the information stored in the database about the user <code class="highlighter-rouge">'danny33'</code>, I want to be able to send a GET request to <code class="highlighter-rouge">https://myserver.com/danny33</code> to acquire that information.</p> <p>To create a dynamic route parameter with express, you change the route to be a colon, and then the name of your parameter. Here is how the example above would look (responding to a GET req.):</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">app</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="s2">"/:user"</span><span class="p">,</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">[GET REQUEST TO /</span><span class="p">${</span><span class="nx">user</span><span class="p">}</span><span class="s2">] Sending back information about the user </span><span class="p">${</span><span class="nx">user</span><span class="p">}</span><span class="s2"></span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>So, going to <code class="highlighter-rouge">localhost:4567/dooty</code> will give back</p> <p><code class="highlighter-rouge">"[GET REQUEST TO /dooty] Sending back information about the user dooty"</code></p> <p>This express route parameter will only work on the text after the first route slash <code class="highlighter-rouge">/</code>. So going to <code class="highlighter-rouge">localhost:4567/dooty/secondparam</code>will refuse to connect because we haven’t written a response to the request <code class="highlighter-rouge">'/:first/:second'</code>.</p> <p>Now, we are ready to look at how we can connect our MongoDB database to this Node.js and express server we have set up (FYI, this example will include dynamic path parameters). Before, I get to the code, we have to install the Mongo package for Node: <code class="highlighter-rouge">npm i -s mongodb</code>. Now you can read through the heavily commented code below to get a sense of how node.js contacts MongoDB for creating, updating, and receiving database documents.</p> <p>NOTE: Before running this code below, you MUST replace the <code class="highlighter-rouge">const uri = ....</code> with your URI that you got in the section about <a href="#database-access">Database Access</a>.</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/5nr6w4mg/5/embedded/js/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <p>Run this code, by copying and pasting it into your <code class="highlighter-rouge">app.js</code> file in your node project (remember to replace the <code class="highlighter-rouge">uri</code> variable with yours) and running node <code class="highlighter-rouge">app.js</code> in your terminal.</p> <h2 id="testing-the-code">Testing the Code</h2> <p>To test this code, make sure your <code class="highlighter-rouge">app.js</code> is running, open up Chrome (or Firefox), click <code class="highlighter-rouge">CMD+OPTION+i</code> to open up the dev tools pane, and click on the ‘console’ tab to run some JavaScript.</p> <p>First, let’s test creating a new user by sending a <code class="highlighter-rouge">POST</code> request to our server. To send our requests, I will use the JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch"><code class="highlighter-rouge">fetch()</code></a> function. Below, I am creating a new user named ‘dan’ with some properties which can be found in the body property of the fetch.</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/5nr6w4mg/6/embedded/js/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <p>Paste this code in the dev tools JavaScript console and click ENTER ↵ to run.</p> <h2 id="what-just-happened">What Just Happened?</h2> <p>When you pressed enter, the code sent a post request to your server (the intent was to create a new user with the username ‘dan’). The server connected to your MongoDB Atlas Database using the URI and created a new document on your database with the <code class="highlighter-rouge">user</code> field “dan”, the <code class="highlighter-rouge">eyeColor</code> field “blue”, the <code class="highlighter-rouge">hairColor</code> field “brown”, and the pass field “mypassword123”.</p> <p>So, theoretically, if everything ran correctly, you should see that user in your MongoDB atlas database online. To test this out, go to your project cluster and click on the “collections” button for the cluster.</p> <p><img src="https://i.snap.as/mRfqVqR.png" alt="" /></p> <p>You should be able to see your data there. Click on your collection name (whatever name you used as the last parameter in the URI – <code class="highlighter-rouge">/databasename</code>. For me it was <code class="highlighter-rouge">/users</code>. The newly created user should be sitting right there!</p> <p><img src="https://i.snap.as/FjmGgBK.png" alt="" /></p> <p>To <em>get</em> the data about a user, just put the URL for the user, <code class="highlighter-rouge">http://localhost:4567/dan</code>, into a browser and the data will be in the body of the site. Easy!</p> <p>And all you have to do for updating the user data in the database, is update your <code class="highlighter-rouge">extraDataToStore</code> variable to hold the new user data and send the request as ‘put’:</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/5nr6w4mg/8/embedded/js/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> <p>And that is how you can use client side JavaScript to interact with a database! Nice work!</p> <p>From here you can customize the code to add different fields to your stored data and to show the data in some nice front end design.</p> <p>#code #js #node #databases</p> What the heck is a perceptron 2019-04-21T00:00:00+00:00 //perceptron <p>A quick article about what a perceptron is, how it works, and why it is important.</p> <p>In short, the perceptron is an algorithm. A very simple one at that. The algorithm it performs, in machine learning lingo, is known as <em>binary classification</em>.</p> <p><strong>Binary classification</strong> is the task of classifying elements into two groups. Hence the word binary — meaning 2.<!--more--></p> <p>All the algorithm does, it <strong>take an input and produce an output</strong>. The method by which the perceptron produces an output is called the weighted sum. It takes some input X, multiplies it by some weight W, adds in a bias B and then runs that value through some step function which classifies the weighted sum as a 0 or 1 (most of the time).</p> <blockquote> <p>If there are multiple inputs, then there is a single weight assigned to each input and all of the inputs are multiplied by their corresponding weight and then summed together and added to the bias before being passed through the step function.</p> </blockquote> <p>Here is visual of what a simple perceptron with n inputs may look like:</p> <p><img src="https://i.snap.as/w49eSsS.png" alt="" /></p> <p>This image depicts the inputs (represented as subscripts of X) each being multiplied by their corresponding weights, summed together, and passed through some step function that takes the weighted sum and produces either a 0 or a 1. Notice that there is a constant that is fed into the perceptron as well as the other inputs. This constant will always be 1 and when multiplied with the first weight, represents the bias. So, essentially, that weight is the bias — it is added to the sum of the weights without being multiplied first with an input.</p> <p>A simple step function is depicted below:</p> <p><img src="https://i.snap.as/8nEMVgJ.png" alt="" /></p> <p>This step function takes some value. If the value is greater than or equal to 0, then it outputs 1, otherwise, it outputs 0.</p> <h2 id="how-is-it-useful-at-classifying-things">How is it useful at classifying things?</h2> <p>The perceptron is a subset of machine learning algorithms known as supervised learning. This means that when you teach a perceptron to learn to classify inputs into 2 categories, you give it the inputs and the labels that you want the perceptron to produce in the end (0 or 1 for binary classification, usually).</p> <p>The perceptron initializes its weights randomly and get’s fed the inputs. It takes its final output from the step function and compares it to the label that you gave it for the specified set of inputs.</p> <p>The perceptron can then see whether it was wrong at all and how wrong. It can quantify how wrong it is by producing a loss function which takes the perceptron’s output and the target label provided by you and produces a number. In essence, the loss function is saying, “this perceptron is 2.76 wrong” or “this perceptron is 8.92 wrong”, etc. Here is a common loss function for binary classification known as Squared Error:</p> <p>$Loss=(predicted-target)^2$</p> <p>So, in a simple example, if the perceptron was fed inputs and produced a 1, but the label assigned to the inputs was 0, then the loss of the perceptron would be:</p> <p>$Loss=(1-0)^2=1$</p> <p>The perceptron in this case was “1 wrong”.</p> <blockquote>It can then use this value to adjust the weights is various ways, one of which is known as <strong>Gradient Descent</strong>. In GD, you adjust the weights by subtracting the partial derivative of the loss function with respect to each weight. To actually figure out the derivatives, you would use the chain rule because the loss function is in actuality a composition of the weighted sum plus the bias, piped through the step function:</blockquote> <p>$\frac{\partial Loss}{\partial w_i}=\frac{\partial Loss}{\partial y}\frac{\partial y}{\partial w_i}$</p> <blockquote>If you are familiar with Calculus and derivatives, this concept shouldn’t be too difficult to understand and I am planning on writing an article on this soon. But it is beyond the scope of this high-level paper.</blockquote> <h2 id="what-is-a-binary-classifier">What is a Binary Classifier?</h2> <p>This means that the input entered is mapped to 2 different categories.</p> <p>Another way to describe this is by saying that the information entered into a perceptron is linearly separable:</p> <p><img src="https://i.snap.as/cQcPrYs.png" alt="" /></p> <p>This means that the input entered can be separated by a<strong> single line.</strong></p> <h2 id="a-perceptron-is-just-like-a-linear-function">A perceptron is just like a linear function</h2> <p>One thing to note about a perceptron is that it is functions kind of line a linear function. For example, here is a function in slope-intercept form:</p> <p>$y=mx+b$</p> <p>When comparing this to a perceptron you can see they are much alike. The X is the input, the m is the weight, and the b is the bias. Here is what the perceptron value before it is run through the step function would look like:</p> <p>$y=\sum_{i=0}^{n} X_{i} W_{i}+B$</p> <p>Looks pretty similar, huh?</p> <p>This high level overview of a perceptron is a good prep for learning about <strong>Neural Networks</strong> which are just perceptrons stacked on top of each other and gathered into layers.</p> <p>Just keep learning! </p> Taking the derivative of sigmoid 2019-02-20T00:00:00+00:00 //derivative-of-sigmoid <p>A comprehensive walk-through of taking the derivative of the sigmoid function.</p> <p>One of the most frequently used activation functions in machine learning, or more specifically, neural networks is the sigmoid function. In the backpropagation step in training a neural network, you have to find the derivative of the loss function with respect to each weight in the network. To do this, you have to find the derivative of your activation function. This article aims to clear up any confusion about finding the derivative of the sigmoid function.<!--more--></p> <p>To begin, here is the sigmoid function:</p> <p>$\sigma(x)=\frac{1}{1+e^{-x}}$</p> <p>For a test, take the sigmoid of 5 on your calculator. You should get 0.99330714907.</p> <p>For the purposes of the derivative, this function can also be written as:</p> <p>$\sigma(x)=(1+e^{-x})^{-1}$</p> <h3 id="first-impressions">First Impressions</h3> <p>The first thing I noticed about this function, is that it is a composition of functions. The first function being</p> <p>$\sigma(x)=(m)^{-1}$</p> <p>and the second being</p> <p>$m=1+e^{-x}$</p> <p>Recall that in Calculus, when there is a composition of functions, the derivative, is the first function with respect to the second multiplied by the second function with respect to the variable, in this case <em>x.</em> Like this:</p> <p>$\frac{d\sigma}{dx}=\frac{d\sigma}{dm}\frac{dm}{dx}$</p> <p>So, the derivative of the sigmoid with respect to <em>x</em> is the derivative of the sigmoid function with respect to <em>m</em> times the derivative of <em>m</em> with respect to <em>x</em>. You can think of this function composition rule as a kind of intermediate computation that results in the original derivative that you wanted by cross cancelation:</p> <p>$\frac{d\sigma}{dx}=\frac{d\sigma}{\cancel{dm}}\frac{\cancel{dm}}{dx}=\frac{d\sigma}{dx}$</p> <p>Now that we know the sigmoid function is a composition of functions, all we have to do to find the derivative, is:</p> <ol><li>Find the derivative of the sigmoid function with respect to <em>m</em>, our intermediate value</li><li>Find the derivative of <em>m</em> with respect to <em>x</em></li><li>Multiply those values together</li></ol> <h3 id="1-derivative-of-the-sigmoid-with-respect-to-m">1. Derivative of the sigmoid with respect to m</h3> <p>Let’s look back to what the sigmoid function looks like with <em>m</em> as our intermediate value:</p> <p>$\sigma(x)=(m)^{-1}$</p> <p>To find the derivative of this with respect to <em>m</em> is fairly simple if we can remember the power rule:</p> <p>$\frac{d(x^n)}{dx}=n\times x^{n-1}$</p> <blockquote><em>The derivative of </em>x^n<em> is </em>n<em> times the derivative of </em>x<em> to the power of </em>n-1<em>.</em></blockquote> <p>So,</p> <p>$\frac{d(x^n)}{dx}=-1\times m^{-1-1}=-m^{-2}$</p> <p>Now, if we substitute our original value of <em>m</em> back into the equation, we get</p> <p>$-m^{-2}=-(1+e^{-x})^{-2}$</p> <p>Finally,</p> <p>$\frac{d\sigma}{dm}=-(1+e^{-x})^{-2}$</p> <p>Yay! We completed step 1.</p> <h3 id="2-find-the-derivative-of-m-with-respect-to-x">2. Find the derivative of m with respect to x</h3> <p>Here’s m:</p> <p>$m=1+e^{-x}$</p> <p>To find the derivative, we have to find the derivative of each term with respect to <em>x. </em>The first term is easy:</p> <p>$\frac{d(1)}{dx}=0$</p> <p>The second term is a bit more complicated.</p> <p>Let’s let</p> <p>$y=e^u$</p> <p>and</p> <p>$u=-x$</p> <p>We know that</p> <p>$\frac{dy}{du}=e^u \\ \frac{du}{dx}=-1$</p> <p>If getting to <em>e^u </em>is not clear, please read <a href="https://www.themathpage.com/aCalc/exponential.htm">this</a>.</p> <p>Now, using the chain rule once again,</p> <p>$\frac{dy}{dx}=\frac{dy}{du}\frac{du}{dx}$</p> <p>So, we just multiply those derivatives we just calculated to get the derivative with respect to <em>x:</em></p> <p>$\frac{dy}{dx}=e^u \times (-1)=-e^u=-e^{-x}$</p> <p>All in all for step 2,</p> <p>$\frac{dm}{dx}=-e^{-x}$</p> <h3 id="3-multiply-the-derivatives">3. Multiply the derivatives</h3> <p>Recall, that once we found the two intermediate derivatives, we had to multiply them. So, here is a quick summary:</p> <p>$\frac{d\sigma}{dx}=\frac{d\sigma}{dm}\frac{dm}{dx}$</p> <p>$\frac{d\sigma}{dm}=-(1+e^{-x})^{-2}$</p> <p>$\frac{dm}{dx}=-e^{-x}$</p> <p>Now, if you remember how to multiply :), we can finally finish this!</p> <p>$\frac{d\sigma}{dx}=-(1+e^{-x})^{-2} \times -e^{-x}=\frac{e^{-x}}{(1+e^{-x})^2}$</p> <p>You can now take this value and use it as the derivation of the sigmoid function. An interesting thing occurs after you manipulate this result, though. It turns out that you can rewrite the derivative like this:</p> <p>$\frac{d\sigma}{dx}=\sigma(x)(1-\sigma(x))$</p> <p>The derivative of the sigmoid function is the sigmoid times 1 minus the sigmoid. Wow. I feel cheated. :)</p> <p>If you even remotely enjoyed this article, keep learning about AI and deep learning! 👍 </p> Linear algebra for machine learning 2018-12-30T00:00:00+00:00 //linear-al <p><strong>Abstract</strong> This article aims to give the reader an understanding of the linear algebra aspect of mathematics one needs to know to start programming or developing machine/deep learning models and gain an understanding of them. Each section corresponds to a unique linear algebra operation. I hope this paper is easy to read and understand to a person who has just a basic high school level understanding of mathematics.</p> <h2 id="contents">Contents</h2> <ol> <li><a href="#dimensions">Dimensions</a></li> <li><a href="#indexing">Indexing</a></li> <li><a href="#vectors">Vectors</a></li> <li><a href="#simple-operations">Simple Operations</a></li> <li><a href="#matrix-vector-multiplication">Matrix-Vector Multiplication</a></li> <li><a href="#matrix-matrix-multiplication">Matrix-Matrix Multiplication</a></li> <li><a href="#the-why">The Why</a></li> </ol> <h2 id="dimensions">Dimensions</h2> <p>First of all, what the heck is a matrix? Well, a matrix is a “rectangular array of numbers”. In simpler terms, a matrix is a grid where each square holds a value. You might be familiar with matrices in programming (also known as an “array of arrays”). In Java, for example, to create a matrix, you might type this: <code>int[][] mat = new int</code>. This would initialize a “2 by 2” matrix. Here is an example of a “2 by 2” matrix in math:</p> <p>$\left[\begin{array}{ll}{2} &amp; {4} \\\ {1} &amp; {3}\end{array}\right]$</p> <p>Above is a “matrix of numbers”. Why did I call it “2 by 2”? It has 2 rows and 2 columns. So, for example, this matrix would be a “3 by 2” or just 3x2:</p> <p>$\left[\begin{array}{ll}{1} &amp; {2} \\\ {3} &amp; {4} \\\ {5} &amp; {6}\end{array}\right]$</p> <p>Additionally, the symbol commonly used to represent matrix dimensions is the all-real-numbers symbol: $$\mathbb{R}$$. The dimensions of the previous example could be written as $$\mathbb{R}^{3 \times 2}$$</p> <h2 id="indexing">Indexing</h2> <p>Another very common operation needed to be performed on matrices is “indexing”. This is where you can get one value from a matrix. So, if I call the <code>3x2</code> matrix above $$A$$ , and I wanted to index the first element (1), I would say $$A_{11}$$. The reason I do this is because matrix indexing occurs by a subscript where the first number corresponds to the row and the second number corresponds the column of the element in the matrix you want to get (eg. $$Nameofmatrix\_{rowcol}$$). Another example: let's suppose I want to index the 6 in the matrix above. It is in the 3rd row and 2nd column, so to index it I would say $$A\_{32}$$ (Assuming my matrix was called $$A$$).</p> <h2 id="vectors">Vectors</h2> <p>A “vector” is just a matrix but with one column <u>only</u>. You could say it is an <code>n x 1</code> matrix because it can have as many rows (n) but only one column. When indexing a vector, you only need one number in the subscript and that corresponds to the row of the number you are indexing. So, if we have this vector</p> <p>$Y=\left[\begin{array}{l}{1} \\\ {2} \\\ {3}\end{array}\right]$</p> <p>then, $$Y_{1}=1$$, $$Y_{2}=2$$, and $$Y_{3}=3$$. </p> <p><em>Just a quick note: all the indexing I have written on is what is called “1-indexing” because the first value in the matrix is referred to with a 1. If you are familiar with programming, then you will most likely be familiar with zero-indexing, where the first value in an array (or matrix) is the 0th element. 1-indexed vectors/matrices are the <u>most common</u>. Another note: matrices and vectors are often named using CAPITOL lettering by convention.</em></p> <h2 id="simple-operations">Simple Operations</h2> <p>Now we will start to perform operations on matrices. For each simple operator (add, subtract, multiply, divide) there are two different matrix operations associated. The two matrix operations are known as “scalar” and “element-wise”. The scalar operator takes a number and performs one operation with each element in the matrix. For example,</p> <p>$3+\left[\begin{array}{ll}{1} &amp; {2} \\\ {3} &amp; {4}\end{array}\right]=\left[\begin{array}{ll}{1+3} &amp; {2+3} \\\ {3+3} &amp; {4+3}\end{array}\right]=\left[\begin{array}{ll}{4} &amp; {5} \\\ {6} &amp; {7}\end{array}\right]$</p> <p>This works the same way for subtraction, multiplication, and division using scalar values. With element wise operations, you take two matrices of the SAME dimensions and perform one operation with each corresponding element in each matrix. For example:</p> <p>$\left[\begin{array}{ll}{1} &amp; {2} \\\ {3} &amp; {4}\end{array}\right] *\left[\begin{array}{ll}{5} &amp; {4} \\\ {3} &amp; {2}\end{array}\right]=\left[\begin{array}{ll}{1 * 5} &amp; {2 * 4} \\\ {3 * 3} &amp; {4 * 2}\end{array}\right]=\left[\begin{array}{ll}{4} &amp; {8} \\\ {9} &amp; {8}\end{array}\right]$</p> <p>Here is an example where you can't perform the element-wise operation because the two matrices do NOT have the same dimensions:</p> <p>$\left[\begin{array}{ll}{2} &amp; {3} \\\ {4} &amp; {5}\end{array}\right]+\left[\begin{array}{lll}{1} &amp; {2} &amp; {3} \\\ {4} &amp; {5} &amp; {6}\end{array}\right]=undefined$</p> <h2 id="matrix-vector-multiplication">Matrix-Vector Multiplication</h2> <p>When multiplying a matrix by a vector, you take each row of the matrix and multiply each element of that row with the corresponding element in the vector and then add them. You do that for each row in the matrix and you end up with a vector with the number of rows as the original matrix. This is known as the <strong>“dot product”</strong> and is represented with this symbol: “$$\otimes$$" (or with no symbol like 2x means to multiply 2 with x). It will make more sense once you see this example:</p> <p>$\left[\begin{array}{ll}{1} &amp; {3} \\\ {4} &amp; {0} \\\ {2} &amp; {1}\end{array}\right] \otimes\left[\begin{array}{l}{1} \\\ {5}\end{array}\right]=\left[\begin{array}{l}{?} \\\ {?} \\\ {?}\end{array}\right]$</p> <p>To perform the dot product, we first take the first row of the matrix,$\left[\begin{array}{ll}{1} &amp; {3}\end{array}\right]$, and multiply each element in it with the corresponding element in the vector like this:</p> <p>$\left[\begin{array}{ll}{1} &amp; {3}\end{array}\right] *\left[\begin{array}{ll}{1} &amp; {5}\end{array}\right]=\left[\begin{array}{lll}{1 * 1} &amp; {3 * 5}\end{array}\right]=\left[\begin{array}{ll}{1} &amp; {15}\end{array}\right]$</p> <p>Now you add the values up,$1+15=16$. This becomes the first value in the resulting matrix.</p> <p>$\left[\begin{array}{ll}{1} &amp; {3} \\\ {4} &amp; {0} \\\ {2} &amp; {1}\end{array}\right] \otimes\left[\begin{array}{l}{1} \\\ {5}\end{array}\right]=\left[\begin{array}{c}{16} \\\ {?} \\\ {?}\end{array}\right]$</p> <p>You now perform these same steps with the rest of the rows in the matrix. For the sake of brevity, I will put the final operations in the matrix:</p> <p>$\left[\begin{array}{ll}{1} &amp; {3} \\\ {4} &amp; {0} \\\ {2} &amp; {1}\end{array}\right] \otimes\left[\begin{array}{l}{1} \\\ {5}\end{array}\right]=\left[\begin{array}{c}{16} \\\ {(4 * 1+0 * 5)} \\\ {(2 * 1+1 * 5)}\end{array}\right]=\left[\begin{array}{c}{16} \\\ {4} \\\ {7}\end{array}\right]$</p> <p>And that final matrix is the answer. It's not difficult to understand, just tedious to execute. This is why NO ONE does this by hand, we use computers to do this for us. In python, using the <a href="https://www.numpy.org/">numpy</a> library, you can just say this to perform that entire dot product: <code>numpy.dot(matrix_A, matrix_B)</code>.</p> <p>Additionally, because the operations for dot product are so specific, you cannot perform them with just two randomly dimensioned matrices, they have to be specific as well. If the matrix has dimensions $$\mathbb{R}^{m\times n}$$ ($$m$$ rows, $$n$$ columns), then the vector must have the dimensions $$\mathbb{R}^{n\times 1}$$ (n dimensional vector). The answer would then be a vector with the dimensions $$\mathbb{R}^{m \times 1}$$.</p> <h2 id="matrix-matrix-multiplication">Matrix-Matrix Multiplication</h2> <p>To multiply a matrix <strong>by another matrix</strong> we need to do the <strong>"dot product"</strong> of the rows and columns ... what does that mean? Well, in the previous section, we took a matrix and a vector, and for each row in the matrix, we found the dot product of that row with the vector and ended up with a vector as the result. For multiplying matrices, you do that EXACT same thing, but repeat it for each column in the second matrix acting as individual vectors. </p> <p>This will make more sense in an example. To work out the answer for the <strong>1st row </strong>and<strong> 1st column</strong> of the resulting matrix in this problem, I would find the dot product of the <strong>1st row </strong>of the first matrix and the<strong> 1st column </strong>of the second matrix like so: </p> <p>$\left[\begin{array}{lll}\color{blue}{1} &amp; \color{blue}{2} &amp; \color{blue}{3} \\\ {4} &amp; {5} &amp; {6}\end{array}\right] \times\left[\begin{array}{cc}\color{blue}{7} &amp; {8} \\\ \color{blue}{9} &amp; {10} \\\ \color{blue}{11} &amp; {12}\end{array}\right]=\left[\begin{array}{c}\color{blue}{58} &amp; {}\\\ {} &amp;{}\end{array}\right]$</p> <p>$\begin{aligned}(1,2,3) \otimes(7,9,11) &amp;=1 \times 7+2 \times 9+3 \times 11 \\\ &amp;=58 \end{aligned}$</p> <p>To work out the answer for the <strong>2nd row </strong>and<strong> 1st column </strong>of the resulting matrix, I would find the dot product of the <strong>2nd row</strong> of the first matrix and the <strong>1st column </strong>of the second like so:</p> <p>$\left[\begin{array}{lll}{1} &amp; {2} &amp;{3} \\\ \color{blue}{4} &amp; \color {blue}{5} &amp; \color {blue}{6}\end{array}\right] \times\left[\begin{array}{cc}\color{blue}{7} &amp; {8} \\\ \color{blue}{9} &amp; {10} \\\ \color{blue}{11} &amp; {12}\end{array}\right]=\left[\begin{array}{c} {58} &amp; {}\\\ \color{blue}{139} &amp; {}\end{array}\right]$</p> <p>$\begin{aligned}(4,5,6) \otimes(7,9,11) &amp;=4 \times 7+5 \times 9+6 \times 11 \\\ &amp;=139 \end{aligned}$</p> <p>We can do the same thing for the <strong>1st row </strong> and the <strong>2nd column:</strong></p> <p>$\begin{aligned}(1,2,3) \otimes(8,10,12) &amp;=1 \times 8+2 \times 10+3 \times 12 \\\ &amp;=64 \end{aligned}$</p> <p>And for the <strong>2nd row </strong>and <strong>2nd column: </strong></p> <p>$\begin{aligned}(4,5,6) \otimes(8,10,12) &amp;=4 \times 8+5 \times 10+6 \times 12 \\\ &amp;=154 \end{aligned}$</p> <p>And finally, we get:</p> <p>$\left[\begin{array}{lll}{1} &amp; {2} &amp; {3} \\\ {4} &amp; {5} &amp; {6}\end{array}\right] \times\left[\begin{array}{cc}{7} &amp; {8} \\\ {9} &amp; {10} \\\ {11} &amp; {12}\end{array}\right]=\left[\begin{array}{cc}{58} &amp; {64} \\\ {139} &amp; {154}\end{array}\right]$</p> <h2 id="the-why">The Why</h2> <p>Why is this important to know?</p> <p>Well, to be honest if you aren't doing something related to mathematics or computer science (machine learning) I would struggle to give you a good reason that you need to know it. But, for machine learning, it is EXTREMELY useful. </p> <p>When modeling the layers of a neural network in a program on a computer, each layer can be represented by a vector and the weights as a matrix. Then, when it comes time to forward propagate, the next layer of the network is calculated by the dot product of the previous layer (the vector) and the weights. There are actually many cloud computing services that have computers you can access that are specially designed to be able to perform matrix operations quickly which greatly improves the training process for a network.</p> <p>This is all I got for this one! Please feel free to email me with any questions 👍📬</p> Recursive programming 2018-12-14T00:00:00+00:00 //recursion <p>Let’s begin with the definition of recursion: “A function is recursive if it is defined in terms of itself”.</p> <p>Or, in other words, a function is recursive if it calls itself.</p> <p>The classic math example is the factorial function. The factorial of a number is the product of all whole numbers below it down to 1. This can also be restated as: the factorial of a number is itself multiplied with the factorial of itself minus one. The factorial of 0 is 1. The factorial function is denoted by an exclamation mark.</p> <p>$0!=1 \\ n!=n\times (n-1)!$</p> <p>Here is the factorial function for the first 5 numbers (0, 1, 2, 3, 4):</p> <p>$ 3!=3\times (3-1)!=3\times 2 \\ 2!=2\times (2-1)!=2\times 1 \\ 1!=1\times (1-1)!=1\times 1 \\ 0!=1 $</p> <p>So, because $$0!=1$$:</p> <p>Recursive function have a <strong>base case</strong> and a <strong>general case</strong>. The base case typically returns a value but <em>always</em> doesn’t call the enclosed function. The general case calls the enclosed function (itself). Here is the previously discussed factorial function written in Typescript (so you can see the parameter and return types):</p> <div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">factorial</span><span class="p">(</span><span class="nx">n</span><span class="p">:</span> <span class="nx">number</span><span class="p">):</span> <span class="nx">number</span> <span class="p">{</span> <span class="c1">// base case: 0! = 1</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="k">return</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// general case, uses a call to itself</span> <span class="k">return</span> <span class="nx">n</span> <span class="o">*</span> <span class="nx">factorial</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>And here is the factorial function programmed iteratively (with loops), not recursively:</p> <div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">factorial</span><span class="p">(</span><span class="nx">n</span><span class="p">:</span> <span class="nx">number</span><span class="p">):</span> <span class="nx">number</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">solution</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">n</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span> <span class="nx">solution</span> <span class="o">*=</span> <span class="nx">i</span><span class="p">;</span> <span class="p">}</span> <span class="k">return</span> <span class="nx">solution</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Take a minute to go through both programs, find how they differ, and try to figure out how the recursive implementation works (that’s how I first got my “Oh! I understand”).</p> <p>For now, we are going to backtrack (no pun intended) and take a look at a super simple function called <code class="highlighter-rouge">countDownFrom</code>. This function takes a positive integer as the parameter and counts down to 0 (exluding 0). So if you enter <code class="highlighter-rouge">countDownFrom(5)</code>, it will print:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>5 4 3 2 1 </code></pre></div></div> <p>Here is the iterative implementation (Javascript):</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">countDownFrom</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">n</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div></div> <p>Pretty simple and straightforeward, right?! Now let’s take a look at the recursive solution:</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">countDownFrom</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// base case, if n is 0, end the function call</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="c1">// general case.</span> <span class="c1">// print the number and make a call for n-1</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">n</span><span class="p">);</span> <span class="k">return</span> <span class="nx">countDownFrom</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>To figure out exactly how this function works, we will trace each call using a table. Here is a trace table for the call <code class="highlighter-rouge">countDownFrom(3)</code>:</p> <table> <thead> <tr> <th>Call Number</th> <th>Function Call</th> <th>Console Output</th> <th>n = 0</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>countDownFrom(3)</td> <td>3</td> <td>FALSE</td> </tr> <tr> <td>2</td> <td>countDownFrom(2)</td> <td>2</td> <td>FALSE</td> </tr> <tr> <td>3</td> <td>countDownFrom(1)</td> <td>1</td> <td>FALSE</td> </tr> <tr> <td>4</td> <td>countDownFrom(0)</td> <td> </td> <td>TRUE</td> </tr> </tbody> </table> <p>This tracing method also shows us the call stack after the function was executed. The call stack is a <a href="https://en.wikipedia.org/wiki/Stack_(abstract_data_type)">Stack</a> (data structure) that function calls get pushed (added) on to after they are called. Stacks are a list of things that can be <em>pushed</em> to or <em>popped</em> from. A push adds something to the end of the list and a pop takes that last thing off. Picture a stack like a stack of plates. You can put one on top of the other, but you can’t just take off the bottom one. You first have to take off the top ones or else the stack will collapse. So, because stacks have LIFO (Last In First Out) priority, the most recent function called will ALWAYS be the first to return a value (returning void/nothing counts as a return). When the functions in a recursive call begin to return values and get popped off of the call stack, it is called unwinding. So, the actual FULL (including unwinding) function trace for <code class="highlighter-rouge">countDownFrom(3)</code> would be:</p> <table> <thead> <tr> <th>Call Number</th> <th>Function Call</th> <th>Console Output</th> <th>n = 0</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>countDownFrom(3)</td> <td>3</td> <td>FALSE</td> </tr> <tr> <td>2</td> <td>countDownFrom(2)</td> <td>2</td> <td>FALSE</td> </tr> <tr> <td>3</td> <td>countDownFrom(1)</td> <td>1</td> <td>FALSE</td> </tr> <tr> <td>4</td> <td>countDownFrom(0)</td> <td> </td> <td>TRUE</td> </tr> <tr> <td>(3)</td> <td>countDownFrom(1)</td> <td> </td> <td>FALSE</td> </tr> <tr> <td>(2)</td> <td>countDownFrom(2)</td> <td> </td> <td>FALSE</td> </tr> <tr> <td>(1)</td> <td>countDownFrom(3)</td> <td> </td> <td>FALSE</td> </tr> </tbody> </table> <p>If you are interested, here is the trace table for the call <code class="highlighter-rouge">factorial(4)</code>:</p> <table> <thead> <tr> <th>Call Number</th> <th>Function Call</th> <th>n = 0</th> <th>Result</th> <th>Return Value</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>factorial(4)</td> <td>FALSE</td> <td>4 * factorial(3)</td> <td> </td> </tr> <tr> <td>2</td> <td>factorial(3)</td> <td>FALSE</td> <td>3 * factorial(2)</td> <td> </td> </tr> <tr> <td>3</td> <td>factorial(2)</td> <td>FALSE</td> <td>2 * factorial(1)</td> <td> </td> </tr> <tr> <td>4</td> <td>factorial(1)</td> <td>FALSE</td> <td>1 * factorial(0)</td> <td> </td> </tr> <tr> <td>5</td> <td>factorial(0)</td> <td>TRUE</td> <td>1</td> <td>1</td> </tr> <tr> <td>(4)</td> <td>factorial(1)</td> <td>FALSE</td> <td>1 * 1</td> <td>1</td> </tr> <tr> <td>(3)</td> <td>factorial(2)</td> <td>FALSE</td> <td>2 * 1</td> <td>2</td> </tr> <tr> <td>(2)</td> <td>factorial(3)</td> <td>FALSE</td> <td>3 * 2</td> <td>6</td> </tr> <tr> <td>(3)</td> <td>factorial(4)</td> <td>FALSE</td> <td>4 * 6</td> <td>24</td> </tr> </tbody> </table> <p>The last 5 rows represent the unwinding (call numbers in parenthesis). Row 5 is when the base case was reached (it returned 1 because the input was 0 and the factorial of 0 is 1).</p> <h2 id="an-interesting-example">An Interesting Example</h2> <p>My uncle gave me an interesting problem one time: “create a function to tell if a number is even or odd without using the modulus operator”. I came up with a set of functions that uses recursion to bounce a number back and forth until it reaches zero, then the function it lands on when it is at zero returns true or false (even or odd).</p> <div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">odd</span><span class="p">(</span><span class="nx">n</span><span class="p">:</span> <span class="nx">number</span><span class="p">):</span> <span class="kr">boolean</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span> <span class="k">return</span> <span class="nx">even</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span> <span class="p">}</span> <span class="kd">function</span> <span class="nx">even</span><span class="p">(</span><span class="nx">n</span><span class="p">:</span> <span class="nx">number</span><span class="p">):</span> <span class="kr">boolean</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span> <span class="k">return</span> <span class="nx">odd</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <p>If you call <code class="highlighter-rouge">odd(3)</code> it will return true. <code class="highlighter-rouge">odd(4)</code> returns false. <code class="highlighter-rouge">even(3)</code> returns false. <code class="highlighter-rouge">even(4)</code> returns true!</p> <p>It’s probably my favorite set of recursive functions because of its simplicity and sheer elegance. Implement it in whatever language you want. It works!</p> <h2 id="benefits-and-drawbacks">Benefits and Drawbacks</h2> <p>When figuring out a solution to a math problem that is inherently recursive, the recursive solution is typically the simplest to implement. Recursive solutions are often more elegant and use less code than iterative solutions.</p> <p><strong>Note:</strong> ANY, yes ANY recursive program/function can be rewritten iteratively (although it is, at times, more difficult to find than the iterative algorithm).</p> <p>The main drawback of recursion is its memory usage. It is a memory hog. Because recursion relies on function calls stored on the stack, a recursive solution is limited to an environment’s largest possible stack size (how many functions it can hold in RAM). So, before implementing a solution recursively make sure that it will not have to deal with millions of function calls or else a <code class="highlighter-rouge">StackOverflow</code> error will be thrown.</p> <p>Sometimes you can get around this by implementing a more restrictive and selective base case so that more functions are returned early and get popped off of the stack (and thus out of memory) – but not always.</p> <hr /> <p>Here is one of <strong>my favorite coding problems</strong> with a nice recursive solution. Please note that it is a more advanced problem that requires several recursive helper functions to solve. <strong>If I were you, I would go through some <a href="https://codingbat.com/java">Javabat</a> recursive problems before I take a whack at this doozy</strong>. I will include the code after the problem statement.</p> <h2 id="island-on-an-island">Island on an Island</h2> <p>A satellite photograph displays a section of the South Pacific Ocean and various islands. Some islands contain lakes within the island, and some of these lakes have an island in that lake. Write a program to count the number of islands which have an island within that island’s lake. No island will touch the border of the photograph. No island will have more than one lake. No lake will have more than one island.</p> <p><strong>Input:</strong> This first line of the file contains two integers indicating the height and width of the map. The next height number of lines contain one row of data for the map represented as characters ‘~’ for water and ‘*’ for land. No map is larger than 80 x 80.</p> <p>Your goal is to output the number of islands which are surrounded by water within a bigger island. A square of land is connected to another square if they are adjacent in directions, north, east, south or west. (left, right, up, down)</p> <p><strong>Output:</strong> The number of islands contained within an island.</p> <p>Sample Input:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>20 30 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~********~~~~~~~********~~~~ ~~~~****~~~~~~~~~~**~~*~**~~~~ ~~~~*~~~*~~~~~~~~~**~~~~**~~~~ ~~~~*~~~*~~~~~~~~~********~~~~ ~~~~~~~*~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~***~~~~~~**********~~~~~~~~~~ ~*~*~~~~~~*~~~~~~~~*~~~~~~~~~~ ~***~~~~~~*~~****~~*~~~~*****~ ~~~~~~~~~~*~~*~~*~~*~~~~*~~~*~ ~~******~~*~~~~~~~~*~~~~**~~*~ ~~*~~~**~~**********~~~***~~*~ ~~*~*~~*~~~~~~~~~~~~~~**~~~~*~ ~~*~~~~*~~~~~~*********~~~*~*~ ~~*~~***~~~~~~*~~~~~~~~~***~*~ ~~*~~*~~~~~~~~***~~~~~~~~~~~*~ ~~****~~~~~~~~~~*************~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </code></pre></div></div> <p>Sample Output: <code class="highlighter-rouge">3</code>.</p> <p>And…..here is the code I used to solve the problem (JavaScript):</p> <iframe width="100%" height="300" src="//jsfiddle.net/denenberg/5nr6w4mg/embedded/js/dark" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe> Typescript quickstart 2018-06-10T00:00:00+00:00 //get-starter-with-typescript <p>Typescript is a programming language that compiles into JavaScript. This means that any valid JS (JavaScript) code is valid TS (Typescript). TS is a language for the developer. If you have every written a bunch of Javascript code and started to wonder, “hey, what was the type of that function parameter, again?”, you understand.</p> <p>Typescript is “JavaScript that scales” meaning it enforces types on all variables/return values, allows for interface use, and much much more. Typescript also implements some feature that are supposed to come to Javascript in the future.<!--more--></p> <h2 id="getting-started">Getting Started</h2> <p>Typescript is a compiled language which means it needs a compiler. You will first need NodeJS installed (TS is almost always used with Node). Then type <code class="highlighter-rouge">npm i -g typescript</code> to install TS globally on your computer. If typing <code class="highlighter-rouge">tsc -v</code> works and yields the version number of your TS installation, you’re good to go!</p> <h2 id="the-basics">The Basics</h2> <p>All you really need to use Typescript is the compiler. So, create a new file called hello.ts and put this code in it:</p> <div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">let</span> <span class="nx">mes</span> <span class="o">=</span> <span class="s2">"Hello, TS 🌏😍"</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2"></span><span class="p">${</span><span class="nx">mes</span><span class="p">}</span><span class="s2"></span><span class="p">);</span> </code></pre></div></div> <p>As you can see, there is one difference here from vanilla JS – the :string type annotation after the message variable name. The general form for type annotations go like this: <code class="highlighter-rouge">let variableName: type</code>.</p> <p><strong>Note:</strong> The string type would have been inferred as the type without the annotation, just like in this case, let a = 9, the inerred type would be number.</p> <p>Now to compile the TS file into JavaScript, run <code class="highlighter-rouge">tsc hello.ts</code>. This generates a new file called <code class="highlighter-rouge">hello.js</code> with the compiled JS code.</p> <p>Let’s run that: <code class="highlighter-rouge">node hello.js</code>. You should see in the console “Hello, TS ♥️”. To learn more about Typescript syntax and cool features, check out the handbook.</p> <h2 id="workflow-with-node">Workflow with Node</h2> <p>Because TS is primarily used in NodeJS environments, it is important to know how they work together.</p> <p>Create a new project with <code class="highlighter-rouge">npm init</code>.</p> <p>Next, add the TS configure file with <code class="highlighter-rouge">tsc -init</code>. This creates a new file in the root of your project called <code class="highlighter-rouge">tsconfig.json</code>. In it are all sorts of configure variables that you can play with. All we are interested in for the time being is one called outDir. This is the folder that the compiled TS is put into. Find the line where it is defined, uncomment it, and assign it the value of <code class="highlighter-rouge">"./build"</code>.</p> <p>Now, you can put your TS files anywhere and they will all be compiled into the <code class="highlighter-rouge">./build</code> directory with the command <code class="highlighter-rouge">tsc</code>.</p> <p>Copy your <code class="highlighter-rouge">hello.ts</code> file into the root of your project and run tsc (just those 3 letters). Now in the build folder, there should be a hello.js file. You can run it with <code class="highlighter-rouge">node build/hello.js</code>.</p> <p>This is the general workflow for creating TS files, compiling, and running them. Remember, you can name the <code class="highlighter-rouge">outDir</code> directory anything you want!</p> <h2 id="editors-and-types">Editors and @types</h2> <p>For editing Typescript, I would highly, highly recommend <a href="https://code.visualstudio.com/">Visual Studio Code</a>. It is the editor I use for almost everything. I used to use <a href="https://atom.io/">Atom</a>, but when I made the switch, I realized just how much better VSC is. It is SUPER fast ⚡️. Has thousands of amazing plugins. Runs on almost every platform. For intellisense, VSC’s default Typescript package works extremely well. But, when is comes to working with npm packages in Typescript, you will have to install the type definitions for the package (if they are available). Let’s take express.js for example. The type definition package for express is <code class="highlighter-rouge">@types/express</code>. So, to get autocomplete, intellisense, etc. just install the package with <code class="highlighter-rouge">npm i @types/express</code>.</p> <p>Without the type definitions installed, the packages have the type any by default.</p> <p>A great website for finding type definitions for your favorite npm packages is <a href="https://definitelytyped.org">definitelytyped.org</a>. Click on the search and it will take you to TypeSearch where you can find your package’s types and how to install them (it usually is @types/package). As an alternative, you could search on <a href="https://yarnpkg.com/lang/en/">Yarn’s</a> website for packages that start with “<code class="highlighter-rouge">@types</code>”. Have fun with TS ❤️.</p> Automating Backups with Cron & GitHub 2018-05-24T00:00:00+00:00 //cronjobs-github <p>Back when I was using <a href="https://ghost.org/">Ghost</a> as my blogging platform, I had a problem. I wanted to keep my blog backed up, but I was too cheap to pay the extra $1 a month for Digital Ocean to do it for me.</p> <p>Being me, I found a <em>hacky</em> way around paying.</p> <p>I wrote a script to zip my ghost folder and push it up to my GitHub in some repo specifically for storing backups. Using <a href="https://en.wikipedia.org/wiki/Cron">cron</a>, I made it run weekly. It worked great! With git’s version control, I could go through my previous backups, so it was just like how Digital Ocean might do it 👍. <!--more--></p> <p>To do this, make sure git is installed on your Linux/Unix system.</p> <p>Then set your username and email in the git preferences through the terminal.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global user.name "FIRST_NAME LAST_NAME" git config --global user.email "MY_NAME@example.com" </code></pre></div></div> <p>Next create an empty secret repo in your GitHub and clone it on your machine locally.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone https://github.com/dannydenenberg/mybackupsrepo.git </code></pre></div></div> <p>Make sure you can stay authenticated on your local device (you don’t have to enter your password to GitHub on every push up). You can use <a href="https://help.github.com/en/articles/connecting-to-github-with-ssh">ssh keys</a> to do this.</p> <p>Make sure you have <code class="highlighter-rouge">zip</code> installed with <code class="highlighter-rouge">sudo apt install zip</code>, then write your bash script looking something like this (example from my Ghost blog):</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">#!/bin/bash</span> zip /home/mybackupsrepo/mybackup.zip /var/www/ghost <span class="c"># zip the folder</span> <span class="nb">cd</span> /home/mybackupsrepo <span class="c"># go to the backups repo</span> git add <span class="nb">.</span> <span class="o">&amp;&amp;</span> git commit <span class="nt">-m</span> <span class="s2">"</span><span class="k">$(</span>date<span class="k">)</span><span class="s2">"</span> <span class="o">&amp;&amp;</span> git push origin master <span class="c"># commit, push</span> <span class="nb">sudo </span>rm <span class="nt">-Rf</span> /home/mybackupsrepo/mybackup.zip <span class="c"># clean</span> </code></pre></div></div> <p>Make it executable: <code class="highlighter-rouge">chmod +x /home/whereveryoustoredthisbashscript</code></p> <p>And add it to your cronjobs. To edit the cronjobs running, execute <code class="highlighter-rouge">crontab -e</code> (the actual file is stored in <code class="highlighter-rouge">/var/spool/cron</code>).</p> <p>Here is a quick reference for creating new cronjobs and how to schedule them properly:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># crontab -e</span> <span class="nv">SHELL</span><span class="o">=</span>/bin/bash <span class="nv">MAILTO</span><span class="o">=</span>root@example.com <span class="nv">PATH</span><span class="o">=</span>/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin <span class="c"># For details see man 4 crontabs</span> <span class="c"># Example of job definition:</span> <span class="c"># .---------------- minute (0 - 59)</span> <span class="c"># | .------------- hour (0 - 23)</span> <span class="c"># | | .---------- day of month (1 - 31)</span> <span class="c"># | | | .------- month (1 - 12) OR jan,feb,mar,apr ...</span> <span class="c"># | | | | .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat</span> <span class="c"># | | | | |</span> <span class="c"># * * * * * user-name command to be executed</span> <span class="c"># backup using the rsbu program to the internal 4TB HDD and then 4TB external</span> 01 01 <span class="k">*</span> <span class="k">*</span> <span class="k">*</span> /usr/local/bin/rsbu <span class="nt">-vbd1</span> <span class="p">;</span> /usr/local/bin/rsbu <span class="nt">-vbd2</span> <span class="c"># Set the hardware clock to keep it in sync with the more accurate system clock</span> 03 05 <span class="k">*</span> <span class="k">*</span> <span class="k">*</span> /sbin/hwclock <span class="nt">--systohc</span> <span class="c"># Perform monthly updates on the first of the month</span> <span class="c"># 25 04 1 * * /usr/bin/dnf -y update</span> </code></pre></div></div> Proof of the Squeeze Theorem (and why I like it) 2018-04-15T00:00:00+00:00 //squeeze <p><em>An intuitive explanation of an awesome theorem.</em></p> <p>While I was studying calculus, I came across this statement:</p> <p>$$\lim _{\theta \rightarrow 0} \frac{\sin \theta}{\theta}=1$$</p> <p>This amazed my because of the fact that sin of 0 is 0, so with substitution of theta in the fraction next to the limit, it would end up as 0/0 or undefined. Now, I had already studied limits a bit and knew about <a href="https://dannydenenberg.com/lhopitals-rule/">l’hopital’s rule</a>. So, I proceeded to take the derivative of the top and bottom of the fraction with respect to theta and checked out what I got. This got me to the expected answer of 1/1 = 1 because the derivative of sin(x) is cos(x) and cos(0) is 1. <!--more-->Now this was all fine and dandy, but as I did more research into the limit listed above, I found a theorem called The Squeeze Theorem which I thought was a much more fun way to solve this same problem. </p> <p>This article is my shot at fully explaining the proof that accompanies the limit shown above using the Squeeze Theorem.</p> <h2 id="the-proof">The Proof</h2> <p>To begin, take a look at this picture of a few triangles drawn using different points around a unit circle. If you don’t already know, a unit circle is one with a radius of 1. The point A is at (0,0), point C is at some point on the edge of the circle, point D is at (1,0), and point E is at some point (1, x).</p> <p><img src="https://i.snap.as/ceBMvID.png" alt="" /></p> <p>Using this visual, let us compare the <strong>areas</strong> of two triangles and a sector.</p> <p>$$△ACD \le ⌔ACD \le △AED$$</p> <p>We can see that this is true by just looking at the graph. Next, I will define the values of the <strong>areas</strong>. Note that theta will refer to the angle made on the unit circle with each of the shapes (the bottom left angle of the triangle or sector).</p> <p>$$\begin{array}{c}{\triangle ACD=\frac{1}{2} b h=\frac{1}{2} \cdot 1 \cdot \sin \theta=\frac{\sin \theta}{2}} \\ {⌔ACD=\frac{1}{2} r^{2} \theta=\frac{1}{2} \cdot 1^{2} \cdot \theta=\frac{\theta}{2}} \\ {\triangle AED=\frac{1}{2} b h=\frac{1}{2} \cdot 1 \cdot \tan \theta=\frac{\tan \theta}{2}}\end{array}$$</p> <p>Just FYI, the hight of triangle △AED is tan(x) because tan(x) is opposite over adjacent and adjacent is 1, so it is really just <strong>the side opposite the angle</strong>, which is the hight. (That confused me at first too 😂)</p> <p>Now that we have this, we can re-compare (is that a word?) the areas using actual values.</p> <p>$$\frac{\sin \theta}{2} \leq \frac{\theta}{2} \leq \frac{\tan \theta}{2}$$</p> <p>Next, I am going to perform a set of operation to all of the elements in the inequality. This is legal as it preserves the <em>truthfulness</em> of the inequality like applying the same operation to each side of an equals sign preserves the equality.</p> <p>First, I will multiply each element by 2.</p> <p>$$\sin \theta \leq \theta \leq \tan \theta$$</p> <p>Second, I will divide by sin(𝜃).</p> <p>$$1 \leq \frac{\theta}{\sin \theta} \leq \frac{1}{\cos \theta}$$</p> <p>Finally, I will take the reciprocal of each.</p> <p>$$1 \geq \frac{\sin \theta}{\theta} \geq \cos \theta$$</p> <p>These reciprocals will get us to the final result that we want. All we have to do now is take the limit as listed at the top and analyze the results.</p> <p>$$\begin{array}{c}{\lim _{\theta \rightarrow 0}\left[1 \geq \frac{\sin \theta}{\theta} \geq \cos \theta\right]} \\ {\lim _{\theta \rightarrow 0}\left[1 \geq \frac{\sin \theta}{\theta} \geq 1\right]} \\ {1 \geq \lim _{\theta \rightarrow 0} \frac{\sin \theta}{\theta} \geq 1}\end{array}$$</p> <p>As you can most likely see (I highlighted it), by substitution of the limit value into each element of the inequality, we get 1 is greater than or equal to the limit of sin theta over theta as theta approaches 0 which is greater than or equal to 1.</p> <p>Because we know this:</p> <p>$$\begin{array}{c}{\text {if}} \\ {1 \geq x \geq 1} \\ {\text {then,}} \\{x=1}\end{array}$$</p> <p>Now we can say that the limit of sin of theta over theta as theta approaches 0 <strong>has to be 1</strong> because of what I just stated above. Kinda cool, right?</p> Web scraping in node.js 101 2018-03-12T00:00:00+00:00 //web-scraping <p>Web scraping is a great way to create dynamic websites or to just be able to get data from sites without having access to their databases. In short, it is an easy method to get info from a site by going through the <strong>front end</strong> (what the user sees) HTML code.</p> <p>To get started with web scraping you must know how a website is structured. If you right click on a page, and click inspect (on chrome), you can see the developer tools.<!--more--></p> <p><img src="https://i.snap.as/V8yrpGZ.png" alt="" /></p> <p>This shows you the structure of the HTML/CSS/JavaScript code as well as network performace, errors, security, and much much more.</p> <p>Now, let’s say I want to grab the first image that you see on twitter programatically in the JavaScript console.</p> <p>Well, I could right click on the image, click inspect, right click on the element in the dev tools, and copy the css selector.</p> <p><img src="https://i.snap.as/XNXJhXa.png" alt="" /></p> <p>Then I could do a <code class="highlighter-rouge">document.querySelector(&lt;&lt;SELECTOR&gt;&gt;).src</code> and that would give me the URL of the image I want, and I could use that on a web page, for example:</p> <p><img src="https://i.snap.as/QnJblUJ.png" alt="" /></p> <p>This IS web scraping! I was able to gather data (an image) from a website without having access to the database. But this is super tedious and long, so to actually webscrape more efficiently, I use Node.js + Puppeteer.</p> <p>If you don’t already know, <a href="https://nodejs.org/">Node.js</a> is a runtime enviornment that allows JavaScript to be run on the server side. And <a href="https://github.com/GoogleChrome/puppeteer">Puppeteer</a> is a ‘headless chrome node API’ written by google (basically, it allows you to write DOM Javascript code on a server).</p> <p>Just an FYI, because I love TypeScript, I will be using that for this project. If you want to use TypeScript, please install it on your system. If running <code class="highlighter-rouge">tsc -v</code> works in the terminal, you’re good to go!</p> <p>Okay, to start off, make sure you have Node.js and NPM (Node Package Manager) installed on your system. If you get a <code class="highlighter-rouge">command not found</code> or something related by running one of the following, I suggest that you look at this article on how to install Node.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$npm -v # should be 6.0.0 or higher$ node -v # should be 9.0.0 or higher </code></pre></div></div> <p>Great! Let’s start a new project and install the dependencies:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$mkdir Web-Scraping-101 &amp;&amp; cd Web-Scraping-101$ npm init # go through all defaults $npm i puppeteer # the google npm scraping package$ tsc --init # initialize typescript $npm i @types/puppeteer # type declarations </code></pre></div></div> <p>Now open the folder in the text editor of your choice. Edit the <code class="highlighter-rouge">outDir</code> option in the <code class="highlighter-rouge">tsconfig.json</code> file to be <code class="highlighter-rouge">./build</code> and uncomment the line, so it looks like this:</p> <p><img src="https://i.snap.as/y1kZn10.png" alt="" /></p> <p>Create a new file in the root of the folder:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ touch app.ts </code></pre></div></div> <p>In <code class="highlighter-rouge">app.ts</code> add:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>console.log("Twitter, here we come"); </code></pre></div></div> <p>Now, to <strong>run this</strong>, in terminal, write: <code class="highlighter-rouge">tsc &amp;&amp; node build/app.js</code></p> <p><strong>NOTE:</strong> <code class="highlighter-rouge">tsc</code> builds all TypeScript files into the outDir directory defined in the config file and <code class="highlighter-rouge">node</code> runs a single JavaScript file.</p> <p>If you see <em>“Twitter, here we come”</em> appear in the terminal, you’ve got it working!</p> <p>Now, we will start to actually scrape using puppeteer. Add this boilerplate puppeteer code to the <code class="highlighter-rouge">app.ts</code> file:</p> <div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">puppeteer</span> <span class="k">from</span> <span class="s2">"puppeteer"</span><span class="p">;</span> <span class="c1">// import the npm package that we installed</span> <span class="p">(</span><span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="c1">// the rest of the code must be enclosed in an async function to be able to await for results</span> <span class="kd">const</span> <span class="nx">browser</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">puppeteer</span><span class="p">.</span><span class="nx">launch</span><span class="p">();</span> <span class="c1">// launches an "invisible" chromium browser</span> <span class="kd">const</span> <span class="nx">page</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">browser</span><span class="p">.</span><span class="nx">newPage</span><span class="p">();</span> <span class="c1">// takes the browser to a new tab (page)</span> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="kr">goto</span><span class="p">(</span><span class="s2">"https://example.com"</span><span class="p">);</span> <span class="c1">// takes the page to a specific url</span> <span class="c1">// Get the "viewport" of the page,</span> <span class="c1">// as reported by the page.</span> <span class="c1">// NOTE: Anything inside of the evaluate function is DOM manipulation.</span> <span class="c1">// No variables outside of the evaluate function can go in, and none can come out without being returned inside of the return object.</span> <span class="kd">const</span> <span class="nx">dimensions</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">evaluate</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">return</span> <span class="p">{</span> <span class="c1">// use DOM manipulation to access the width and height of the page</span> <span class="c1">// if you want to get elements out of the DOM and into the node js code, return theme here</span> <span class="na">width</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">,</span> <span class="na">height</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">,</span> <span class="na">deviceScaleFactor</span><span class="p">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">devicePixelRatio</span> <span class="p">};</span> <span class="p">});</span> <span class="c1">// print out the DOM data</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Dimensions:"</span><span class="p">,</span> <span class="nx">dimensions</span><span class="p">);</span> <span class="c1">// remember to close the broser (invisible chromium)</span> <span class="kr">await</span> <span class="nx">browser</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span> <span class="p">})();</span> </code></pre></div></div> <p>Please read through the commented code above to get a feel for what is going on ⬆.</p> <p>Now that you can see how we can travel to a web page, gather info using DOM manipulation, and bring that info back to the Node js program, we are ready to scrape twitter.</p> <p>First, edit the <code class="highlighter-rouge">await page.goto("https://example.com")</code> to be <code class="highlighter-rouge">await page.goto("https://twitter.com")</code></p> <p>Next, we need to be able to get the posts from the middle column (the actual twitter feed). After some investigating, I found this selector is the one that actually selects the div for the middle column feed:</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span> <span class="s2">"#react-root &gt; div &gt; div &gt; div &gt; main &gt; div &gt; div.css-1dbjc4n.r-aqfbo4.r-1niwhzg.r-16y2uox &gt; div &gt; div.css-1dbjc4n.r-14lw9ot.r-1tlfku8.r-1ljd8xs.r-13l2t4g.r-1phboty.r-1jgb5lz.r-1ye8kvj.r-13qz1uu.r-184en5c &gt; div &gt; div &gt; div.css-1dbjc4n.r-1jgb5lz.r-1ye8kvj.r-6337vo.r-13qz1uu &gt; div &gt; section &gt; div &gt; div &gt; div"</span> <span class="p">);</span> <span class="c1">// the above returns the div for the middle column twitter feed</span> </code></pre></div></div> <p>Here is an image of what that represents:</p> <p><img src="https://i.snap.as/Taoa3a3.png" alt="" /></p> <p>To get all of the images from the middle column, I ended up doing this for the <code class="highlighter-rouge">page.evaluate()</code> function:</p> <div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">dimensions</span> <span class="o">=</span> <span class="kr">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">evaluate</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">sources</span> <span class="o">=</span> <span class="p">[];</span> <span class="c1">// an array of the links to each image</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span> <span class="s2">"#react-root &gt; div &gt; div &gt; div &gt; main &gt; div &gt; div.css-1dbjc4n.r-aqfbo4.r-1niwhzg.r-16y2uox &gt; div &gt; div.css-1dbjc4n.r-14lw9ot.r-1tlfku8.r-1ljd8xs.r-13l2t4g.r-1phboty.r-1jgb5lz.r-1ye8kvj.r-13qz1uu.r-184en5c &gt; div &gt; div &gt; div.css-1dbjc4n.r-1jgb5lz.r-1ye8kvj.r-6337vo.r-13qz1uu &gt; div &gt; section &gt; div &gt; div &gt; div img"</span> <span class="p">).</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">img</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">img</span><span class="p">.</span><span class="nx">src</span><span class="p">)</span> <span class="p">{</span> <span class="nx">sources</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">img</span><span class="p">)</span> <span class="p">}</span> <span class="p">});</span> <span class="k">return</span> <span class="p">{</span> <span class="nx">sources</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div></div> <p>Now if I want to compile a list of all of the image sources and print them out to the console, all I have to do is write this outside of the <code class="highlighter-rouge">page.evaluate()</code> function:</p> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">dimensions</span><span class="p">.</span><span class="nx">sources</span><span class="p">);</span> </code></pre></div></div> <p>There you go! You’ve just scraped image data from a twitter feed. A challenge would be to take this data and integrate it into an express server so that when a user goes to the root site, they are presented with all of these images.</p> <p>Thanks for reading!</p> How to create a Ghost blog with docker+AWS 2017-06-25T00:00:00+00:00 //docker-and-aws <ol><li>Login to the AWS website</li><li>Click on Services (top bar)</li><li>Click on EC2</li><li>Click on Launch Instance</li><li>Search and choose Ubuntu Server (18 or up)</li><li>Leave selected the free tear (unless you have upwards of $10000000000)</li><li>Edit security groups (by clicking on <code>edit security groups</code>)</li><li>Click Add rule - <code>http</code> - leave other defaults</li><li>Click Add rule - <code>https</code> -leave other defaults</li><li>Click Launch Instance</li><li>Choose Create new pair key from the drop down selector (name it and download it)</li><li>Open terminal</li><li>CD into the directory where the pair key was downloaded to and do this</li><li>Change the .pem file permissions with: <code>sudo chmod 600 &lt;&lt;MYPAIRKEYFILENAME&gt;&gt;.pem</code></li><li>Go to your AWS instances tab in the EC2 page and find the Public DNS (IPv4) of your instance </li><li><code>ssh <a href="/cdn-cgi/l/email-protection#7c091e091208093c191f4e514948514e4e48514d4f4e51454f521f13110c090819514d521d111d0613121d0b0f521f1311"><span class="__cf_email__" data-cfemail="790c1b0c170d0c39">[email&#160;protected]</span>&lt;</a>&lt;INSERT.Public.Dns.IPv4&gt;&gt; -i PairKeyName.pem</code></li><li>Type <code>yes</code> to get into the ubuntu computer</li><li>Install docker: <code>sudo snap install docker</code></li><li>Make a start file: <code>vim startserver</code></li><li>Put this in the script👇: </li><li><code>#!/bin/bash; docker run -d --name website -e url=https://&lt;&lt;websitename&gt;&gt; -p 80:2386 -v /home/ubuntu/website:/var/lib/ghost/content ghost</code></li><li>Create a /website directory: <code>mkdir website</code></li><li>Go to <code>cloudflare.com</code> and link your website to it by creating an account (or signing in) and going through the steps to link it to your URL that you used in step <strong>21</strong></li><li>Make a <code>CNAME</code> record with the name being <code>@</code> and the address being the public IPv4 of the aws instance that you found in step <strong>15</strong> (example: <code>ec2-54-224-132-93.compute-1.amazonaws.com</code>)</li><li>Go to your domain service (mine is google domains) and set the nameservers to be cloudflare’s (you should have already done this step while setting up cloudflare in step <strong>23</strong>)</li><li>Change the permissions of the <code>startserver</code> script to be able to execute: <code>chmod +x startscript</code></li><li>Now run it: <code>./startscript</code></li><li>It will take a bit to complete because docker needs to pull the image off of their website, but when it does everything should be up and running</li></ol> <h2 id="please-note">Please Note</h2> <p>It may take a bit for cloudflare to enable https. It will also take some time for your domain provider to change its nameservers and for that change to propagate back to cloudflare.<br /></p> How to contribute on GitHub 2017-04-23T00:00:00+00:00 //git-contributing <p>This guide assumes that you have a <a href="https://github.com/">Github</a> account and <a href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git">git installed</a> on your machine.</p> <h2 id="step-1-fork">Step 1: Fork</h2> <p>After you find a repo that looks cool, the first step is to fork it. A fork will create a copy of the repo under your account that you can modify, while maintaining a link to original (that’s called the upstream repo).</p> <p><img src="/assets/forking.png" alt="Forking" /></p> <h2 id="step-2-clone">Step 2: Clone</h2> <p>Now let’s download the code to your local machine by cloning the fork.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone &lt;your-fork-url.git&gt; </code></pre></div></div> <p>You should now have a directory for your project that can be opened with your <a href="https://code.visualstudio.com/">preferred code editor</a>.</p> <h2 id="step-3-branch">Step 3: Branch</h2> <p>A git repo is just a big tree 🌳. You might have hundreds of people working on the same project and branches ensure that collaboration can happen without complete chaos. Changes on your branch are isolated from the work everybody else is doing.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git checkout -b my-cool-thing </code></pre></div></div> <p>At this point you can start making changes to the code.</p> <h2 id="step-4-commit">Step 4: Commit</h2> <p>When you are happy with the changes, you can stage the changes and commit the code.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add . git commit -m "🚀 I made this software better!" </code></pre></div></div> <h2 id="step-5-pull-request">Step 5: Pull Request</h2> <p>A “pull request” is identical to a “git merge”, but it is requested from an external source - you. In fact, it is called a “merge request” on other platforms, which I think is a better name, but I digress.</p> <p>Let’s push your branch to your fork.</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git push origin my-cool-thing </code></pre></div></div> <p>When you go back to Github you should automatically see a button labeled <strong>Create New Pull Request for my-cool-thing</strong>. Go ahead and push that button. Add additional details as needed and it will show up in the list of PRs once submitted.</p> <p>Many larger projects have their own “Contributor Guidelines” and may require you to sign a <a href="https://en.wikipedia.org/wiki/Contributor_License_Agreement">CLA</a> before participating.</p> <script type="math/tex; mode=display"></script> Setting up an Apache server on a Raspberry Pi 2017-04-23T00:00:00+00:00 //apache-server <h2 id="contents">Contents</h2> <ul> <li><a href="#install-apache">Install apache</a></li> <li><a href="#test-the-web-server">Test the web server</a></li> <li><a href="#changing-the-default-page">Changing the default page</a></li> <li><a href="#install-php-if-you-want">Install PHP (If you want)</a></li> <li><a href="#making-it-public">Making it public</a></li> <li><a href="#port-forwarding">Port forwarding</a></li> </ul> <h2 id="install-apache">Install apache</h2> <ol> <li>Install apache. Head into terminal and update the available packages</li> </ol> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt-get update <span class="sb"></span>&lt;<span class="o">!</span><span class="nt">--more--</span><span class="o">&gt;</span> 2. Then, install apache2 <span class="sb"></span>bash <span class="nv">$</span><span class="nb">sudo </span>apt-get install apache2 <span class="nt">-y</span> </code></pre></div></div> <h2 id="test-the-web-server">Test the web server</h2> <p>By default, Apache puts a test HTML file in the web folder. This default web page is served when you browse to http://localhost/ on the pi itself, or http://192.168.0.6 (whatever the pi’s internal ip address is) from another computer on the local network. To find the pi’s ip address, type <code class="highlighter-rouge">hostname -I</code> at the terminal. Learn more about <a href="https://www.raspberrypi.org/documentation/remote-access/ip-address.md">finding IP’s</a></p> <p>The default page will look something like this:</p> <p><img src="https://i.snap.as/btmE04z.png" alt="" /></p> <p>If you see this, you have apache working!</p> <h2 id="changing-the-default-page">Changing the default page</h2> <p>This default web page is an HTML file on the filesystem. It is located at <code class="highlighter-rouge">/var/www/html/index.html</code>.</p> <p>Navigate to this directory in terminal and see what is in there:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">cd</span> /var/www/html <span class="nv">$</span><span class="nb">ls</span> <span class="nt">-al</span> </code></pre></div></div> <p>This will spit out:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>total 12 drwxr-xr-x 2 root root 4096 Jan 8 01:29 <span class="nb">.</span> drwxr-xr-x 12 root root 4096 Jan 8 01:28 .. <span class="nt">-rw-r--r--</span> 1 root root 177 Jan 8 01:29 index.html </code></pre></div></div> <p>This means that there is one file in /var/www/html/ called <code class="highlighter-rouge">index.html</code> and is owned by the <code class="highlighter-rouge">root</code> user. In order to edit the file, you have to change ownership. You could use <code class="highlighter-rouge">sudo</code>. Like this: <code class="highlighter-rouge">sudo chown pi: index.html</code>.</p> <p>Now, if you want to put files in your website, you can place them in the <code class="highlighter-rouge">/var/www/html</code> folder!</p> <h2 id="install-php-if-you-want">Install PHP (If you want)</h2> <p>Go into terminal and type:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt-get install php libapache2-mod-php <span class="nt">-y</span> </code></pre></div></div> <p>Now, you can run php from your server. We are going to try it!</p> <p>Go into the web folder where <code class="highlighter-rouge">index.html</code> is stored (<code class="highlighter-rouge">/var/www/html</code>) and remove the index by typing:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$</span><span class="nb">sudo </span>rm index.html </code></pre></div></div> <p>Now, we are going to create an index for our site in php. Create and edit a new index:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>nano index.php </code></pre></div></div> <p><em>NOTE: Nano is a text editor pre-installed on all Raspberry Pi’s (and Linux/Unix devices for that matter)</em></p> <p>Put some PHP in it (we’ll make it dynamic):</p> <div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp">&lt;?php</span> <span class="k">echo</span> <span class="s2">"hello world. Today is "</span> <span class="o">.</span> <span class="nb">date</span><span class="p">(</span><span class="s1">'Y-m-d H:i:s'</span><span class="p">);</span> <span class="cp">?&gt;</span> </code></pre></div></div> <h2 id="making-it-public">Making it public</h2> <p>This will explain how others can access your web site through port forwarding and your IPv4 address.</p> <p>Go to terminal. If you type <code class="highlighter-rouge">ifconfig</code> and press enter, you will get something like this:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>pi@raspberrypi:~ <span class="nv">$</span>ifconfig eth0 Link encap:Ethernet HWaddr b8:27:eb:96:cc:5a inet addr:192.168.0.10 Bcast:192.168.0.255 Mask:255.255.255.0 inet6 addr: fe80::bb8e:9610:ab7b:7ae5/64 Scope:Link inet6 addr: 2600:8804:1e80:6e30:c8b6:a7d8:c897:cd8f/64 Scope:Global UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 RX packets:18607 errors:0 dropped:0 overruns:0 frame:0 TX packets:8644 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 txqueuelen:1000 RX bytes:2282499 <span class="o">(</span>2.1 MiB<span class="o">)</span> TX bytes:1025772 <span class="o">(</span>1001.7 KiB<span class="o">)</span> lo Link encap:Local Loopback inet addr:127.0.0.1 Mask:255.0.0.0 inet6 addr: ::1/128 Scope:Host UP LOOPBACK RUNNING MTU:65536 Metric:1 RX packets:101 errors:0 dropped:0 overruns:0 frame:0 TX packets:101 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 txqueuelen:1 RX bytes:9505 <span class="o">(</span>9.2 KiB<span class="o">)</span> TX bytes:9505 <span class="o">(</span>9.2 KiB<span class="o">)</span> wlan0 Link encap:Ethernet HWaddr b8:27:eb:c3:99:0f inet addr:192.168.0.200 Bcast:192.168.0.255 Mask:255.255.255.0 inet6 addr: fe80::ba27:ebff:fec3:990f/64 Scope:Link inet6 addr: 2600:8804:1e80:6e30:ba27:ebff:fec3:990f/64 Scope:Global UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 RX packets:58092 errors:0 dropped:48756 overruns:0 frame:0 TX packets:830 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 txqueuelen:1000 RX bytes:9698158 <span class="o">(</span>9.2 MiB<span class="o">)</span> TX bytes:90407 <span class="o">(</span>88.2 KiB<span class="o">)</span> </code></pre></div></div> <p>Now, if you want to get your internal ip address, you can search for the value after <code class="highlighter-rouge">inet addr:my.ip.add.ress</code>. Search for it like this:</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>ifconfig | <span class="nb">grep</span> <span class="s2">"inet addr:"</span> </code></pre></div></div> <p>This address you can type into any computer attatched to the local network and be able to access your server’s site.</p> <p><strong>But what if you want for everyone to be able to access your website?</strong></p> <p>To do this you have to use something called <strong>port forwarding</strong>. Port forwarding makes it so that when a request comes in to your router on a certain port, it can be redirected to a local computer. We will make it so that when you type in the browser <code class="highlighter-rouge">my.routers.ip.address:8090</code> you will be able to access your website from anywhere.</p> <h2 id="port-forwarding">Port forwarding</h2> <ol> <li> <p>Log into your router’s configuration page. To do this, go into your browser and type in the ip for the page. Usually the ip is something like this: <code class="highlighter-rouge">192.168.0.1</code>. If it is not that, search the web for your router’s configuration page address and type that as the url.</p> </li> <li> <p>When you get to the login page you will need to input the username and password. Usually, the username is <code class="highlighter-rouge">admin</code> and the password is <code class="highlighter-rouge">password</code></p> </li> <li> <p>When you are in, navigate to a tab called firewalls, and find a page called <code class="highlighter-rouge">port forwarding/virtual servers</code>.</p> </li> <li> <p>To add a port forwarding rule, click <code class="highlighter-rouge">add</code></p> </li> <li>Fill out all of the ports with this number: <code class="highlighter-rouge">8090</code>. <em>NOTE: I would normally use port <code class="highlighter-rouge">80</code> so people would not have to bother with typing the port more than once, but some companies (like cox) do not allow forwarding on 80</em></li> <li> <p>For the IP address, put in the ip for your raspberry pi (inet addr: <strong>my.r.pi’s.ip</strong>). We found our pi’s ip in the previous section.</p> </li> <li> <p>For the option to use <code class="highlighter-rouge">TCP</code>, <code class="highlighter-rouge">UDP</code>, or <code class="highlighter-rouge">BOTH</code>, choose <code class="highlighter-rouge">BOTH</code>.</p> </li> <li>Click the add button</li> </ol> <p>You have now successfully added port forwarding for your website and can access it outside of LAN!</p> How to install Node.js 2017-03-14T00:00:00+00:00 //installing-node <p>It is likely that you already have <a href="https://nodejs.org/en/">NodeJS</a> installed on your machine. Try running <code class="highlighter-rouge">node -v</code> from the command line. If that does not work or the version is older than <code class="highlighter-rouge">8.15</code>, follow the install instructions below.</p> <h2 id="node-version-manager-nvm">Node Version Manager NVM</h2> <p><a href="https://github.com/creationix/nvm">Node Version Manager</a> NVM makes it easy to switch between Node versions in your local environment. I highly recommend using it over the native install on your system.</p> <h3 id="mac-and-linux">Mac and Linux</h3> <p>Simply run the install script from the command line.</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>curl <span class="nt">-o-</span> https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash </code></pre></div></div> <p>Restart your terminal. You should now be able to easily install and manage Node versions.</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nvm install 10 nvm use 10 </code></pre></div></div> <h3 id="windows">Windows</h3> <p>NVM is not available on Windows, but there is a solid alternative with <a href="https://github.com/coreybutler/nvm-windows">nvm-windows</a>. It provides an installer than you can download from the repo. Once installed you will have access commands similar to those above.</p> About $$m\alef ^tH$$ on denenberg.us 2014-08-04T00:00:00+00:00 //math-doc <p><strong>All math on denenberg.us is rendered using <a href="https://katex.org">Katex</a></strong></p> <p>Here’s some inline $$5x=33x^2-8\pi$$ math.</p> <p>Here’s some display math: $\int^{88}_\infty \frac{x^2}{\pi^4 x} \dot dx = 4$</p> <ul> <li>To write math inline, enclose the math in <code class="highlighter-rouge">$$</code> to start and <code class="highlighter-rouge">$$</code> to end. Ex: <code class="highlighter-rouge">$$a=\frac{F}{m}$$</code> <ul> <li><strong>Note</strong> that when writing this in Jekyll markdown, you actually have to type 2 backslashes becuase the first acts as an escape character: <code class="highlighter-rouge">\$$a=\frac{F}{m}\$$</code></li> </ul> </li> <li>To write display math, enclose the math in a single dollar sign: <code class="highlighter-rouge">$a=\frac{F}{m}$</code> <ul> <li>Why not 2 dollar signs you ask? It turns out that before Katex can even get to the math, if you are using 2 dollar signs the <strong>markdown parser turns it into a script tag</strong>…so not ideal.</li> </ul> </li> </ul>