{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Jared","description":"The latest articles on DEV Community by Jared (@codenutt).","link":"https:\/\/dev.to\/codenutt","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F233449%2F3f48da8c-1852-433e-a02f-b5cc8aef57de.jpg","title":"DEV Community: Jared","link":"https:\/\/dev.to\/codenutt"},"language":"en","item":[{"title":"Why you can't break a forEach loop | ByteSize JS","pubDate":"Tue, 31 Mar 2020 16:18:40 +0000","link":"https:\/\/dev.to\/codenutt\/why-you-can-t-break-a-foreach-loop-bytesize-js-d51","guid":"https:\/\/dev.to\/codenutt\/why-you-can-t-break-a-foreach-loop-bytesize-js-d51","description":"<p>I recently had a coding interview that involved evaluating one schema against another. The details of it aren't that important, but one thing that came out of it (in the middle of the interview) was that you can't break out of a <code>forEach()<\/code> loop. I had forgotten that little tidbit and it probably screwed up my chances of getting hired. After you read this, hopefully, you won't make the same mistake I did! Don't be like me.<\/p>\n\n<p><a href=\"https:\/\/i.giphy.com\/media\/nRkQduJDZ43bW\/giphy.gif\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/i.giphy.com\/media\/nRkQduJDZ43bW\/giphy.gif\" alt=\"https:\/\/media.giphy.com\/media\/nRkQduJDZ43bW\/giphy.gif\"><\/a><\/p>\n\n<h1>\n  \n  \n  Video Version\n<\/h1>\n\n<p>If you prefer to watch than read, check out the video version of this!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/PlUbYws5Ybw\">\n<\/iframe>\n<\/p>\n\n<h1>\n  \n  \n  MDN Knows All\n<\/h1>\n\n<p>As noted by MDN:<\/p>\n\n<blockquote>\n<p>There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool<\/p>\n<\/blockquote>\n\n<p>That's some hardcore sass coming from the MDN docs. However, they are right, knowing which tool to choose is important.<\/p>\n\n<p>Before we get too deep into why you can't break out of a <code>forEach()<\/code>, let's examine what a loop even is and where <code>forEach()<\/code> came from.<\/p>\n\n<h1>\n  \n  \n  What is a Loop\n<\/h1>\n\n<p>A loop in programming solves a pretty common problem: I need to run the <strong>same<\/strong> code against all this data. Put simply, it is: <\/p>\n\n<blockquote>\n<p>Repeating the same code over and over (on loop) until we reach a defined end state.<\/p>\n<\/blockquote>\n\n<h1>\n  \n  \n  The Problem\n<\/h1>\n\n<p>For the sake of comparison, we're going to solve the same problem using the various loop types. Here is the problem:<\/p>\n\n<p>Compare two arrays and see if the items in them are the same.<\/p>\n\n<p>Here is the data we are going to compare:<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">const<\/span> <span class=\"nx\">jedis<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Anakin<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Luke<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">sith<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Palpatine<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Anakin<\/span><span class=\"dl\">\"<\/span><span class=\"p\">]<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<p>We have two arrays, both with a couple of names. You'll probably notice that Anakin is both a Jedi and a Sith. This is a trivial example, however not far off from what I was tested on during my interview.<\/p>\n\n<h2>\n  \n  \n  <del>The Old<\/del> A Way\n<\/h2>\n\n<p>What I don't want you to get from this article is that one loop is better than another. They all offer unique programming solutions and have a spot for specific use cases. The trick is knowing which one to use when.<\/p>\n\n<h3>\n  \n  \n  Traditional For Loop\n<\/h3>\n\n<p>If you've ever taken any type of programming course, you've probably been exposed to our good friend the <code>for<\/code> loop. It has been a handy tool for programmers for a long time and is still useful today. Let's solve our problem using it.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Our data again, for reference<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">jedis<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Anakin<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Luke<\/span><span class=\"dl\">\"<\/span><span class=\"p\">];<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">sith<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Palpatine<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Anakin<\/span><span class=\"dl\">\"<\/span><span class=\"p\">];<\/span>\n<span class=\"c1\">\/\/ start our loop, define our iterator variable<\/span>\n<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=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">jedis<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ create a variable we can reference<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">thisJedi<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">jedis<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">];<\/span>\n  <span class=\"c1\">\/\/ see if the item in the array we are testing exists<\/span>\n  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">sith<\/span><span class=\"p\">.<\/span><span class=\"nx\">includes<\/span><span class=\"p\">(<\/span><span class=\"nx\">thisJedi<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ If it does exist, then that jedi is also a sith<\/span>\n    <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\">thisJedi<\/span><span class=\"p\">}<\/span><span class=\"s2\"> is also a Sith`<\/span><span class=\"p\">);<\/span>\n    <span class=\"c1\">\/\/ we can exit out<\/span>\n    <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n  <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\">thisJedi<\/span><span class=\"p\">}<\/span><span class=\"s2\"> is not a Sith`<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre><\/div>\n\n\n\n<p>The for loop offers a pretty handy way of exiting our code if it meets a condition we choose. This is immensely helpful when looping over a TON of data. It has been very helpful in solving some of the Project Euler problems, specifically <a href=\"https:\/\/codeburst.io\/project-euler-problem-5-solved-with-javascript-13427e907e71\">this one<\/a>.<\/p>\n\n<h2>\n  \n  \n  <del>The New<\/del> Another Way\n<\/h2>\n\n<p>Among other things, <code>forEach()<\/code> was stamped in the spec in 2009 along with all the other goodness that was given to us in ES5. It serves as a handy method to write clean code that easily iterates over items in an array.<\/p>\n\n<h3>\n  \n  \n  What is it doing?\n<\/h3>\n\n<p>A <code>forEach()<\/code> loop is a function that runs another function (callback) on each item in an array. We define what happens in that callback function. JS is nice enough to give us three parameters in that function:<\/p>\n\n<ol>\n<li>The item in the array<\/li>\n<li>The index of the item<\/li>\n<li>The whole array<\/li>\n<\/ol>\n\n<p>Let's take a look at our problem using a <code>forEach()<\/code> loop instead. I've included all three parameters in the function, but we're only using the first, the item, which I'm naming <code>jedi<\/code><br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"c1\">\/\/ We have to create a global state variable to keep track of what is happening<\/span>\n    <span class=\"kd\">let<\/span> <span class=\"nx\">matching<\/span>\n    <span class=\"c1\">\/\/ loop over array <\/span>\n    <span class=\"nx\">jedis<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">jedi<\/span><span class=\"p\">,<\/span><span class=\"nx\">index<\/span><span class=\"p\">,<\/span><span class=\"nx\">array<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ check to see if jedi is in sith<\/span>\n      <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">sith<\/span><span class=\"p\">.<\/span><span class=\"nx\">includes<\/span><span class=\"p\">(<\/span><span class=\"nx\">jedi<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ if it isn't, set global variable to false<\/span>\n        <span class=\"nx\">matching<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"c1\">\/\/ it keeps going...<\/span>\n    <span class=\"p\">})<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">matching<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ false<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<p>If it makes more sense, you can refactor the callback function into a named function. I think it makes it a bit more readable. It also allows us to reuse this function wherever we want. Yay functional programming!<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">let<\/span> <span class=\"nx\">matching<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nx\">isJediAlsoSith<\/span><span class=\"p\">(<\/span><span class=\"nx\">jedi<\/span><span class=\"p\">,<\/span><span class=\"nx\">index<\/span><span class=\"p\">,<\/span><span class=\"nx\">array<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">sith<\/span><span class=\"p\">.<\/span><span class=\"nx\">includes<\/span><span class=\"p\">(<\/span><span class=\"nx\">jedi<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">matching<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nx\">jedis<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nx\">isJediAlsoSith<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<p>Our solution essentially does the same thing. The only difference is it keeps running until it reaches the end of the <code>jedis<\/code> array. For an array of such a small size, I doubt that it will make much of a performance difference.<\/p>\n\n<h2>\n  \n  \n  But Why?\n<\/h2>\n\n<p>This finally brings us to the answer to our question, why can't we break out of a <code>forEach()<\/code> loop? It's because the loop is running that callback function over every item, so even if you write a <code>return<\/code> it's only returning on that instance of the function. It keeps going. In the case of the <code>forEach()<\/code> function, it doesn't do anything with the returned code. Be aware, that is not the case for some of the other Array Methods.<\/p>\n\n<p>Additionally, because of this, <code>break<\/code> or <code>continue<\/code> are not valid statements. <\/p>\n\n<h2>\n  \n  \n  Other Ways\n<\/h2>\n\n<p>There are quite a few different types of loops. They all have different purposes and I'd recommend looking into each one. You don't always need a <code>forEach()<\/code> loop.<\/p>\n\n<p><a href=\"https:\/\/i.giphy.com\/media\/tnwuVMx6n1VtK\/giphy.gif\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/i.giphy.com\/media\/tnwuVMx6n1VtK\/giphy.gif\" alt=\"https:\/\/media.giphy.com\/media\/tnwuVMx6n1VtK\/giphy.gif\"><\/a><\/p>\n\n<h2>\n  \n  \n  forEach() vs map()\n<\/h2>\n\n<p>Likely, the most common array methods that appear in tutorials are <code>forEach()<\/code> and <code>map()<\/code> . The biggest difference between the two is that <code>map<\/code> will return a new Array, while a <code>forEach()<\/code> won't. <\/p>\n\n<h3>\n  \n  \n  Traditional Loops\n<\/h3>\n\n<p>while loop<\/p>\n\n<h3>\n  \n  \n  Array Methods\n<\/h3>\n\n<p>Array.forEach()<\/p>\n\n<p>Array.map()<\/p>\n\n<p>Array.filter()<\/p>\n\n<p>Array.reduce()<\/p>\n\n<p>Array.reduceRight()<\/p>\n\n<p>Array.every()<\/p>\n\n<p>Array.some()<\/p>\n\n<p>Array.indexOf()<\/p>\n\n<p>Array.lastIndexOf()<\/p>\n\n<p>Array.find()<\/p>\n\n<p>Array.findIndex()<\/p>\n\n<h3>\n  \n  \n  Iterable Object Loops (including Arrays)\n<\/h3>\n\n<p>for in<\/p>\n\n<p>for of<\/p>\n\n<h1>\n  \n  \n  This is the Way\n<\/h1>\n\n<p><a href=\"https:\/\/i.giphy.com\/media\/kI2hsMDS4zjK7Fbif8\/giphy.gif\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/i.giphy.com\/media\/kI2hsMDS4zjK7Fbif8\/giphy.gif\" alt=\"Baby Yoda\"><\/a><\/p>\n\n<p>As mentioned earlier by the incredibly sassy MDN docs, choosing the right tool is paramount to success. The number of options may seem a bit overwhelming at first, but I like to take the approach of: \"if it works, it's the right tool.\" <\/p>\n\n<p>Generally speaking, you can refactor your code to death, but then you're just wasting time you could be building stuff. In the case of my interview, I was using the right tool, the wrong way. Had I <del>known<\/del> remembered that you can't break out of a forEach loop, things probably would have turned out different \ud83e\udd37\ud83c\udffc\u200d\u2642\ufe0f.<\/p>\n\n<p>If you have any additional info share, please drop it in the comments below!<\/p>\n\n<p>As always, happy coding.<\/p>\n\n<h1>\n  \n  \n  Plugs\n<\/h1>\n\n<h2>\n  \n  \n  Book\n<\/h2>\n\n<p>I'm writing a book about graphic design and how it relates to software development! If you're interested, sign up here for updates.<\/p>\n\n<p><a href=\"https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy\">https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy<\/a><\/p>\n\n<h2>\n  \n  \n  Music\n<\/h2>\n\n<p>I also write music! Check it out here: <a href=\"https:\/\/open.spotify.com\/artist\/1o6CGTMPjk1C0IdK9jV2H1\">Spotify<\/a> | <a href=\"https:\/\/www.youtube.com\/channel\/UCqxQspCPTcE_wH0KBE5J-aw\">Youtube<\/a> | <a href=\"https:\/\/music.apple.com\/us\/artist\/modulo\/1499420471\">Apple Music<\/a><\/p>\n\n<p><a href=\"https:\/\/open.spotify.com\/track\/4o9dZj5AF4nvPMnFFkqLhs\">https:\/\/open.spotify.com\/track\/4o9dZj5AF4nvPMnFFkqLhs<\/a><\/p>\n\n<h2>\n  \n  \n  Support\n<\/h2>\n\n<p>If you like this article and want to see more, the best way to do that is to subscribe\/follow me on here! If you are feeling gracious, you can <a href=\"https:\/\/www.buymeacoffee.com\/AXwyIxz1C\">buy me a coffee<\/a>!<\/p>\n\n","category":["javascript","webdev","tutorial","computerscience"]},{"title":"Dealing with Failure","pubDate":"Fri, 27 Mar 2020 18:08:24 +0000","link":"https:\/\/dev.to\/codenutt\/dealing-with-failure-5bhd","guid":"https:\/\/dev.to\/codenutt\/dealing-with-failure-5bhd","description":"<p>This story begins in the middle.<\/p>\n\n<h1>\n  \n  \n  TLDR\n<\/h1>\n\n<p>This is anecdotal advice on how I deal with failure.<\/p>\n\n<ol>\n<li>Don't put all your hope into one thing. If you decide this one thing is going to determine your happiness, you are doomed. <\/li>\n<li>Remember that we all fail. Reaching out to talk to people about it helped me get past it.<\/li>\n<\/ol>\n\n<h1>\n  \n  \n  The E-mail\n<\/h1>\n\n<p>Yesterday, I got <em>the<\/em> e-mail. Ya know, the type of e-mail you've been waiting a week for. However, the contents were not what I wanted to hear.<\/p>\n\n<p><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--n8sE-9gt--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/5ue1pbx4gy5kpoa1otlb.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--n8sE-9gt--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/i\/5ue1pbx4gy5kpoa1otlb.png\" alt=\"Rejection email\"><\/a><\/p>\n\n<p>Yes, I failed another coding exam. I nailed the first two interviews, only to bomb the coding exam.<\/p>\n\n<p>I could spend this entire article talking about why I disagree with the hiring process for developers, however, that's not really the point of this. What I want to focus on is how to move past the failure. It doesn't have to be a coding exam, it could be something else. Dealer's choice.<\/p>\n\n<p>So, how did I get over it?<\/p>\n\n<h1>\n  \n  \n  Gaining New Focus\n<\/h1>\n\n<p>I can recall a few times in my life where I really failed. I mean, REALLY failed. Failed to the point of weeks-long depression. This easily could have been one of those times. It is so easy to be defeated. However, I like to think I've learned a little bit over my time here on Earth.<\/p>\n\n<blockquote>\n<p>It is so easy to be defeated.<\/p>\n<\/blockquote>\n\n<p>I had put a lot of hope into getting that job, however, It's not the only place I applied to. I've been shotgunning resumes to every tech company within a 20-mile radius of where I live + remote jobs.<\/p>\n\n<p>While I am waiting for the next interview call (it will inevitably come), I am still working on other things. I have some freelance gigs I am finishing up. I also decided to get back into writing music as a way of not thinking about dev work. It also allows me an opportunity to design stuff, which I love.<\/p>\n\n<h1>\n  \n  \n  Reach out\n<\/h1>\n\n<p>I am part of a slack group that is full of people trying to get by. I was talking to them about this, and they were supportive + empathetic. A few of them are devs and are well aware of the challenges of getting hired. All of them have experience failure. Often, I think just getting the words out, \"I failed\" is cathartic. If you accept it as a failure, you can move forward.<\/p>\n\n<h1>\n  \n  \n  Learn From It\n<\/h1>\n\n<p>You might be wondering what I learned from the failed coding exam? Well, for one thing, I'm a little bit smarter about what to expect from a Hackerrank test. For another, I learned (by talking to people) that this is fairly common. Also, I now know that regex seems to be a pretty important topic (I've seen it another test before too), so I should probably buckle down and get good at it.<\/p>\n\n<p>Finally, this really solidifies the idea that I need to forge my own path. I have been a freelance developer for about four years now. I have worked at companies large and small. I CAN deliver. I know that. <\/p>\n\n<h1>\n  \n  \n  Bottom Line\n<\/h1>\n\n<p>Sometimes, things don't go according to plan.<\/p>\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>I said in the beginning that this story started in the middle. It is true, getting the e-mail that I didn't make it to the next round is not the end. There are more jobs out there waiting to be applied to and more importantly, I have a lot more to contribute.<\/p>\n\n<p>How do you deal with rejection or failure? I'd love to hear your story.<\/p>\n\n<h1>\n  \n  \n  Video\n<\/h1>\n\n<p>I made a video out of this article that expands a bit...check it out if you want to see me be uncomfortable lol<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/V8iUWwfBwo8\">\n<\/iframe>\n<\/p>\n\n<h1>\n  \n  \n  Plugs\n<\/h1>\n\n<p>Photo by Kolar.io on Unsplash<\/p>\n\n<h2>\n  \n  \n  Book\n<\/h2>\n\n<p>I'm writing a book about graphic design and how it relates to software development! If you're interested, sign up here for updates.<\/p>\n\n<p><a href=\"https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy\">https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy<\/a><\/p>\n\n<h2>\n  \n  \n  Music\n<\/h2>\n\n<p>I also write music! Check it out here: <a href=\"https:\/\/open.spotify.com\/artist\/1o6CGTMPjk1C0IdK9jV2H1\">Spotify<\/a> | <a href=\"https:\/\/www.youtube.com\/channel\/UCqxQspCPTcE_wH0KBE5J-aw\">Youtube<\/a> | <a href=\"https:\/\/music.apple.com\/us\/artist\/modulo\/1499420471\">Apple Music<\/a><\/p>\n\n<p><a href=\"https:\/\/open.spotify.com\/track\/4o9dZj5AF4nvPMnFFkqLhs\">https:\/\/open.spotify.com\/track\/4o9dZj5AF4nvPMnFFkqLhs<\/a><\/p>\n\n<h2>\n  \n  \n  Support\n<\/h2>\n\n<p>If you like this article and want to see more, the best way to do that is to subscribe\/follow me on here! If you are feeling gracious, you can <a href=\"https:\/\/www.buymeacoffee.com\/AXwyIxz1C\">buy me a coffee<\/a>!<\/p>\n\n","category":["career","discuss","webdev"]},{"title":"Project Euler Problem 6 Solved with Javascript","pubDate":"Thu, 12 Mar 2020 01:18:56 +0000","link":"https:\/\/dev.to\/codenutt\/project-euler-problem-6-solved-with-javascript-19l5","guid":"https:\/\/dev.to\/codenutt\/project-euler-problem-6-solved-with-javascript-19l5","description":"<h1>\n  \n  \n  Problem 6: Sum square difference\n<\/h1>\n\n<p>This problem is fairly simple, however, it will allow us to explore our good friend recursion. We will use a combination  of that and functional programming to solve this fella with relative ease...hopefully. Alright, enough yammering, let's get to it!<\/p>\n\n<h2>\n  \n  \n  Discussion\n<\/h2>\n\n<p>The sum of the squares of the first ten natural numbers is: 1^2 + 2^2 + ... + 10^2 = 385<br>\nThe square of the sum of the first ten natural numbers is: (1 + 2 + ... + 10)^2 = 55^2 = 3025<br>\nHence the difference between the sum of the squares of the first ten natural numbers and the square of the sum is 3025 \u2212 385 = 2640.<\/p>\n<h2>\n  \n  \n  Statement\n<\/h2>\n\n<p>Find the difference between the sum of the squares of the first n natural numbers and the square of the sum.<\/p>\n<h1>\n  \n  \n  Video Version\n<\/h1>\n\n<p>If you like to watch rather than read, check out the video that accompanies this article. If not, keep reading!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/6F4yl7E3Ifk\">\n<\/iframe>\n<\/p>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n<p>As I mentioned earlier, I chose to use these two things:<\/p>\n\n<ol>\n<li>Functional programming<\/li>\n<li>Recursion<\/li>\n<\/ol>\n\n<p>Before we get too deep into the discussion, I want to discuss recursion. If you are already familiar with the concept, feel free to skip over this part.<\/p>\n\n<h2>\n  \n  \n  Recursion\n<\/h2>\n\n<p>Recursion is simply:<\/p>\n\n<blockquote>\n<p>A function calling itself over and over again<\/p>\n<\/blockquote>\n\n<p>It will call itself until one of two things happens: <\/p>\n\n<ol>\n<li>We reach the call stack limit.<\/li>\n<li>We define an exit value.<\/li>\n<\/ol>\n\n<h3>\n  \n  \n  Example for this Problem\n<\/h3>\n\n<p>Let's say we want to find out the total of all the squared values up to a given value, i.e. 1^2 + 2^2....n^2. We can write a function that calls itself until a condition has been met. I like to call that the \"ceiling,\" because it usually represents the highest value we don't want to exceed.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"c1\">\/\/ Our function takes in two values: <\/span>\n    <span class=\"c1\">\/\/ our limiter (ceiling) and a total that we will return (inititally set at 0)<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ check to see if we have reduced our ceiling to zero. If so...escape!<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">total<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n        <span class=\"c1\">\/\/ if we still have more work to do, do the work<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">squared<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">total<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">ceiling<\/span> <span class=\"o\">**<\/span> <span class=\"mi\">2<\/span><span class=\"p\">);<\/span>\n        <span class=\"c1\">\/\/ call yourself, but reduce our ceiling by one.<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<p>The function is going to call itself until our condition is met, in this case, <code>ceiling === 0<\/code>, hence the name recursion.<\/p>\n\n<p>If you want more detail about recursion, check out my recursion article:<\/p>\n\n<p><a href=\"https:\/\/dev.to\/codenutt\/javascript-recursion-explained-in-4-minutes-26oa\">https:\/\/dev.to\/codenutt\/javascript-recursion-explained-in-4-minutes-26oa<\/a><\/p>\n\n<h2>\n  \n  \n  Steps\n<\/h2>\n\n<p>The steps for this problem are fairly simple:<\/p>\n\n<ol>\n<li>Calculate the sum of all squares up to <code>n<\/code>\n<\/li>\n<li>Calculate the square of the summed values up to <code>n<\/code>\n<\/li>\n<li>Calculate the difference between the two.<\/li>\n<\/ol>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n<p>As I mentioned earlier, we will be composing our solution via functional programming. That means we will be creating three separate functions. The first one we already did in the discussion about recursion!<\/p>\n\n<h2>\n  \n  \n  Sum of all Squares\n<\/h2>\n\n\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">total<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nx\">total<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">ceiling<\/span> <span class=\"o\">**<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h2>\n  \n  \n  Square of all Sums\n<\/h2>\n\n\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">getSquareSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">**<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nx\">total<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">ceiling<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">getSquareSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h2>\n  \n  \n  Main Function\n<\/h2>\n\n\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">sumSquareDifference<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ total for sum of squares of the n natural numbers<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">sumOfSquares<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ total of square of the sum<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">squareOfSum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">getSquareSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ get difference between the two<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">squareOfSum<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">sumOfSquares<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h2>\n  \n  \n  Altogether now\n<\/h2>\n\n\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">total<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nx\">total<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">ceiling<\/span> <span class=\"o\">**<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"kd\">function<\/span> <span class=\"nx\">getSquareSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">**<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nx\">total<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">ceiling<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">getSquareSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"kd\">function<\/span> <span class=\"nx\">sumSquareDifference<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ total for sum of squares of the n natural numbers<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">sumOfSquares<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ total of square of the sum<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">squareOfSum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">getSquareSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ get difference between the two<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">squareOfSum<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">sumOfSquares<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"kd\">let<\/span> <span class=\"nx\">tenSum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">sumSquareDifference<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">let<\/span> <span class=\"nx\">hundoSum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">sumSquareDifference<\/span><span class=\"p\">(<\/span><span class=\"mi\">100<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>Using those two methods, recursion, and functional programming, we have a nicely composed solution that is highly legible.<\/p>\n\n<p>Like all things, this can be improved. If you have recommendations or improvements, throw down a comment and let me know!<\/p>\n\n<p>As always, happy coding!<\/p>\n\n<h1>\n  \n  \n  Plugs\n<\/h1>\n\n<h2>\n  \n  \n  Book\n<\/h2>\n\n<p>I'm writing a book about graphic design and how it relates to software development! If you're interested, sign up here for updates.<\/p>\n\n<p><a href=\"https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy\">https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy<\/a><\/p>\n\n<h2>\n  \n  \n  Music\n<\/h2>\n\n<p>I also write music! Check it out here:<\/p>\n\n<p><a href=\"https:\/\/open.spotify.com\/artist\/1o6CGTMPjk1C0IdK9jV2H1\">https:\/\/open.spotify.com\/artist\/1o6CGTMPjk1C0IdK9jV2H1<\/a><\/p>\n\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UCqxQspCPTcE_wH0KBE5J-aw\">https:\/\/www.youtube.com\/channel\/UCqxQspCPTcE_wH0KBE5J-aw<\/a><\/p>\n\n<p><a href=\"https:\/\/music.apple.com\/us\/artist\/modulo\/1499420471\">https:\/\/music.apple.com\/us\/artist\/modulo\/1499420471<\/a><\/p>\n\n<h2>\n  \n  \n  Support\n<\/h2>\n\n<p>If you like this article and want to see more, the best way to do that is to subscribe\/follow me on here! If you are feeling gracious, you can <a href=\"https:\/\/www.buymeacoffee.com\/AXwyIxz1C\">buy me a coffee<\/a>!<\/p>\n\n<h1>\n  \n  \n  Resources\n<\/h1>\n\n<p>This video is more specific to the event loop, but it covers what happens when the call stack is exceeded around the 7:00 mark.<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/8aGhZQkoFbQ\">\n<\/iframe>\n<\/p>\n\n","category":["javascript","projecteuler","challenge","tutorial"]},{"title":"JavaScript Recursion Explained in 4 minutes","pubDate":"Mon, 02 Mar 2020 23:16:31 +0000","link":"https:\/\/dev.to\/codenutt\/javascript-recursion-explained-in-4-minutes-26oa","guid":"https:\/\/dev.to\/codenutt\/javascript-recursion-explained-in-4-minutes-26oa","description":"<h1>\n  \n  \n  Intro\n<\/h1>\n\n<p>Welcome to ByteSize Javascript where we chew on manageable chunks of code. Today we're going to be talking about recursion.<\/p>\n\n<p>Recursion is one of those things that you see a lot when you're learning about JS. The question is, do you understand what it is? If you don't, I'm going to give two examples that will hopefully clear it up. If you do, check out my examples anyways! I'm sure you have some further insight you can share.<\/p>\n\n<h1>\n  \n  \n  Video Version\n<\/h1>\n\n<p>If you learn well by watching, check out the video version of this article!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/njOwfrR8HU8\">\n<\/iframe>\n<\/p>\n\n<h2>\n  \n  \n  What is Recursion\n<\/h2>\n\n<p>Recursion is simply:<\/p>\n\n<blockquote>\n<p>A function calling itself over and over again<\/p>\n<\/blockquote>\n\n<p>It will call itself until one of two things happens: <\/p>\n\n<ol>\n<li>We reach the call stack limit.<\/li>\n<li>We define an exit value.<\/li>\n<\/ol>\n\n<h1>\n  \n  \n  Simple Example\n<\/h1>\n\n<p>Let's start with a simple example. The goal of our function is to increment a number until we reach a limit...then stop. First, let's break it.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">incrementer<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span><span class=\"nx\">total<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">total<\/span><span class=\"o\">++<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">incrementer<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nx\">incrementer<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<p>That code will run until it you reach the call stack limit. Probably not what we want.<\/p>\n\n<p>Now, let's add an \"out\" for a code.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">incrementer<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span><span class=\"nx\">total<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">total<\/span><span class=\"o\">++<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">total<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">ceiling<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span><span class=\"k\">return<\/span> <span class=\"nx\">total<\/span><span class=\"p\">}<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">incrementer<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nx\">incrementer<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">,<\/span><span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<p>Pretty simple. It doesn't do a lot for us, but it shows the principle that is:<\/p>\n\n<blockquote>\n<p>Recursion is a function that calls itself.<\/p>\n<\/blockquote>\n\n<p>Now let's take a look at a more robust example.<\/p>\n\n<h1>\n  \n  \n  Robust Example\n<\/h1>\n\n<p>Let's say we want to find out:<\/p>\n\n<blockquote>\n<p>What is the total of all the squared values up to a given value?<\/p>\n<\/blockquote>\n\n<p>or in math terms:<\/p>\n\n<blockquote>\n<p>1^2 + 2^2 + 3^2....n^2<\/p>\n<\/blockquote>\n\n<p>To solve this, we can write a function that will do the following:<\/p>\n\n<ol>\n<li>check if we have reached our limiter<\/li>\n<li>square the value<\/li>\n<li>add it to the total<\/li>\n<li>decrement the value<\/li>\n<li>return to step 1<\/li>\n<\/ol>\n\n<p>Check it out.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"c1\">\/\/ Our function takes in two values: <\/span>\n    <span class=\"c1\">\/\/ our limiter (ceiling) and a total that we will return (inititally set at 0)<\/span>\n    <span class=\"kd\">function<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ check to see if we have reduced our ceiling to zero. If so...escape!<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">total<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n        <span class=\"c1\">\/\/ if we still have more work to do, do the work<\/span>\n      <span class=\"nx\">total<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">ceiling<\/span> <span class=\"o\">**<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n        <span class=\"c1\">\/\/ call yourself, but reduce our ceiling by one.<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"nx\">ceiling<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"nx\">total<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nx\">getSumSquares<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<p>The function is going to call itself until our condition is met, in this case, <code>ceiling === 0<\/code>, hence the name recursion.<\/p>\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>Hopefully, that clears things up a bit. This is only the surface of what you can do with recursion. I've included some links below to provide more detail.<\/p>\n\n<p>If you've got ideas for more JavaScript topics you'd like to discuss, shoot me a comment.<\/p>\n\n<p>As always, happy coding!<\/p>\n\n<h1>\n  \n  \n  Plugs\n<\/h1>\n\n<h2>\n  \n  \n  Book\n<\/h2>\n\n<p>I'm writing a book about graphic design and how it relates to software development! If you're interested, sign up here for updates.<\/p>\n\n<p><a href=\"https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy\">https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy<\/a><\/p>\n\n<h2>\n  \n  \n  Music\n<\/h2>\n\n<p>I also write music! Check it out here:<\/p>\n\n<p><a href=\"https:\/\/open.spotify.com\/artist\/1o6CGTMPjk1C0IdK9jV2H1\">https:\/\/open.spotify.com\/artist\/1o6CGTMPjk1C0IdK9jV2H1<\/a><\/p>\n\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UCqxQspCPTcE_wH0KBE5J-aw\">https:\/\/www.youtube.com\/channel\/UCqxQspCPTcE_wH0KBE5J-aw<\/a><\/p>\n\n<p><a href=\"https:\/\/music.apple.com\/us\/artist\/modulo\/1499420471\">https:\/\/music.apple.com\/us\/artist\/modulo\/1499420471<\/a><\/p>\n\n<h2>\n  \n  \n  Support\n<\/h2>\n\n<p>If you like this article and want to see more, the best way to do that is to subscribe\/follow me on here! If you are feeling gracious, you can <a href=\"https:\/\/www.buymeacoffee.com\/AXwyIxz1C\">buy me a coffee<\/a>!<\/p>\n\n<h1>\n  \n  \n  Resources\n<\/h1>\n\n<p>This video is more specific to the event loop, but it covers what happens when the call stack is exceeded around the 7:00 mark.<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/8aGhZQkoFbQ\">\n<\/iframe>\n<\/p>\n\n","category":["javascript","tutorial","webdev","beginners"]},{"title":" Project Euler Problem 5 Solved with Javascript","pubDate":"Tue, 25 Feb 2020 17:28:37 +0000","link":"https:\/\/dev.to\/codenutt\/project-euler-problem-5-solved-with-javascript-c81","guid":"https:\/\/dev.to\/codenutt\/project-euler-problem-5-solved-with-javascript-c81","description":"<h1>\n  \n  \n  Problem 5: Smallest multiple\n<\/h1>\n\n<p>I am more excited to talk about this problem than any of the other problems so far. I am really happy with how it turned out and I think you will be too. Enough said, let's solve this thing!<\/p>\n\n<h1>\n  \n  \n  Video Version\n<\/h1>\n\n<p>If you like to watch rather than read, check out the video that accompanies this article. If not, keep reading!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/0JCf1kxL1OY\">\n<\/iframe>\n<\/p>\n\n<h1>\n  \n  \n  Problem Discussion\n<\/h1>\n\n<p>2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.<\/p>\n\n<h2>\n  \n  \n  Statement\n<\/h2>\n\n<p>What is the smallest positive number that is evenly divisible by all of the numbers from 1 to\u00a0<code>n<\/code>?<\/p>\n\n<h2>\n  \n  \n  Pattern Recognition\n<\/h2>\n\n<p>I'm sure there is a name for this phenomenon, but when you solve this problem via brute force, you will see a pattern.<\/p>\n\n<p>The answers for the first 5 numbers is as follows: 2, 6, 12, 60, 60.<\/p>\n\n<p>You'll notice that each number is evenly divisible by the previous number. This doesn't seem all that important immediately, but it will when we get into the double digits. For example, the smallest positive number for 1 - 20 is 232,792,560.<\/p>\n\n<p>Let's keep that \"step\" in mind while we are writing our solution.<\/p>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n<h2>\n  \n  \n  Steps\n<\/h2>\n\n<ol>\n<li>Loop over all values, starting with 2<\/li>\n<li>Loop over each number from 1 - n\n\n<ol>\n<li>Check if that number is divisible, if not, go to next loop<\/li>\n<li>If it is divisible, go to next number<\/li>\n<\/ol>\n\n\n<\/li>\n<li>If we reach n and all previous values are divisible, return our smallest number<\/li>\n<\/ol>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">smallestMult<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ setup state<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">inc<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">step<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">smallestNum<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ loop over all numbers until we find the right one.<\/span>\n        <span class=\"c1\">\/\/ The sky is the limit!<\/span>\n      <span class=\"k\">while<\/span> <span class=\"p\">(<\/span><span class=\"nx\">smallestNum<\/span> <span class=\"o\">&lt;=<\/span> <span class=\"nb\">Number<\/span><span class=\"p\">.<\/span><span class=\"nx\">MAX_SAFE_INTEGER<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ start from our step value<\/span>\n        <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=\"mi\">2<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;=<\/span> <span class=\"nx\">n<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                <span class=\"c1\">\/\/ check if its divisibl<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">divisible<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">smallestNum<\/span> <span class=\"o\">%<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n          <span class=\"c1\">\/\/ if it is not divisible, skip to the next number<\/span>\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">divisible<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n          <span class=\"p\">}<\/span>\n                <span class=\"c1\">\/\/ if it is divisible, increase our step to be our next num<\/span>\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">i<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">inc<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">step<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">smallestNum<\/span><span class=\"p\">;<\/span>\n            <span class=\"c1\">\/\/ increase our global incrementer by 1<\/span>\n            <span class=\"nx\">inc<\/span><span class=\"o\">++<\/span><span class=\"p\">;<\/span>\n          <span class=\"p\">}<\/span>\n                <span class=\"c1\">\/\/ check if i is equal to our last digit<\/span>\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">i<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                    <span class=\"c1\">\/\/ if it is, congrats! We have our smallestNum<\/span>\n            <span class=\"k\">return<\/span> <span class=\"nx\">smallestNum<\/span><span class=\"p\">;<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"nx\">smallestNum<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">step<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nx\">smallestMult<\/span><span class=\"p\">(<\/span><span class=\"mi\">20<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h1>\n  \n  \n  Performance\n<\/h1>\n\n<p>Before we depart, I'd like to talk a bit about performance. The brute force method of solving this problem took an average of 1100ms to evaluate the smallest multiple for 20. When I used the improved method (the step method), that runtime reduced to 7ms. That's a decrease of the runtime of more than 15000 %! <\/p>\n\n<p>Holy cow.<\/p>\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>This is definitely the hardest problem I've solved so far. I could not get it to run using the brute force method, which forced me into finding another way. I'm glad I did though, it taught me a lot about math in general.<\/p>\n\n<p>Like all things, this can be improved. If you have recommendations or improvements, throw down a comment and let me know!<\/p>\n\n<p>As always, happy coding!<\/p>\n\n<h1>\n  \n  \n  Resources\n<\/h1>\n\n<p><a href=\"https:\/\/www.xarg.org\/puzzle\/project-euler\/problem-4\/\">https:\/\/www.xarg.org\/puzzle\/project-euler\/problem-4\/<\/a><\/p>\n\n<p><a href=\"https:\/\/github.com\/Matt-1123\/project-euler\/blob\/master\/solutions.js\">https:\/\/github.com\/Matt-1123\/project-euler\/blob\/master\/solutions.js<\/a><\/p>\n\n<h1>\n  \n  \n  Plugs\n<\/h1>\n\n<h2>\n  \n  \n  Book\n<\/h2>\n\n<p>I'm writing a book about graphic design and how it relates to software development! If you're interested, sign up here for updates.<\/p>\n\n<p><a href=\"https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy\">https:\/\/digitalnutt.substack.com\/p\/coming-soon?r=34slo&amp;utm_campaign=post&amp;utm_medium=web&amp;utm_source=copy<\/a><\/p>\n\n<h2>\n  \n  \n  Music\n<\/h2>\n\n<p>I also write music! Check it out here:<\/p>\n\n<p><a href=\"https:\/\/open.spotify.com\/artist\/1o6CGTMPjk1C0IdK9jV2H1\">https:\/\/open.spotify.com\/artist\/1o6CGTMPjk1C0IdK9jV2H1<\/a><\/p>\n\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UCqxQspCPTcE_wH0KBE5J-aw\">https:\/\/www.youtube.com\/channel\/UCqxQspCPTcE_wH0KBE5J-aw<\/a><\/p>\n\n<p><a href=\"https:\/\/music.apple.com\/us\/artist\/modulo\/1499420471\">https:\/\/music.apple.com\/us\/artist\/modulo\/1499420471<\/a><\/p>\n\n<h2>\n  \n  \n  Support\n<\/h2>\n\n<p>If you like this article and want to see more, the best way to do that is to subscribe\/follow me on here! If you are feeling gracious, you can <a href=\"https:\/\/www.buymeacoffee.com\/AXwyIxz1C\">buy me a coffee<\/a>!<\/p>\n\n","category":["javascript","tutorial","projecteuler","challenge"]},{"title":"Project Euler Problem 4 Solved with Javascript\n","pubDate":"Mon, 10 Feb 2020 16:30:25 +0000","link":"https:\/\/dev.to\/codenutt\/problem-4-largest-palindrome-product-n3g","guid":"https:\/\/dev.to\/codenutt\/problem-4-largest-palindrome-product-n3g","description":"<p>Welcome to another edition of Jared rediscovers grade school math! Today we are tackling problem 4 of Project Euler. We are going to talk about Palindromes and for loops. Let's get into it!<\/p>\n\n<h1>\n  \n  \n  Problem Discussion\n<\/h1>\n\n<p>A palindromic number reads the same both ways. The largest palindrome made from the product of two 2-digit numbers is 9009 = 91 \u00d7 99.<\/p>\n\n<h1>\n  \n  \n  Video Version\n<\/h1>\n\n<p>If you like to watch rather than read, check out the video that accompanies this article. If not, keep reading!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/2IXX6P8MgvA\">\n<\/iframe>\n<\/p>\n\n<h2>\n  \n  \n  Statement\n<\/h2>\n\n<p>Find the largest palindrome made from the product of two 3-digit numbers.<\/p>\n\n<h2>\n  \n  \n  Palindrome\n<\/h2>\n\n<p>A word that reads the same forwards as backwards. Example is 9009 or racecar.<\/p>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n<p>The approach I'm taking is both brute force and algorithmic.<\/p>\n\n<h2>\n  \n  \n  Steps\n<\/h2>\n\n<ol>\n<li>Determine the highest products to work from, e.g. 99 x 99<\/li>\n<li>Multiply the highest products together<\/li>\n<li>Reduce right number by one\n\n<ol>\n<li>Check if palindrome<\/li>\n<li>Repeat until reaching 1<\/li>\n<\/ol>\n\n\n<\/li>\n<li>Reduce left number by one.\n\n<ol>\n<li>Check if palindrome<\/li>\n<li>Repeat step 3<\/li>\n<\/ol>\n\n\n<\/li>\n<li>If at any time, number is palindrome, return that number.<\/li>\n<\/ol>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n<p>For this solution, I am going to reach for my old friend: functional programming. First let's create a function that checks if a string is a palindrome.<\/p>\n\n<h2>\n  \n  \n  Palindrome?\n<\/h2>\n\n<p>Our friend Javascript has a ton of helper functions in dealing with strings. Unfortunately, this means that we have to convert our number to a string, then reconvert it back after we've checked it. It takes some extra time, but it's not to computationaly expensive.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">isPalindrome<\/span><span class=\"p\">(<\/span><span class=\"nx\">num<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ get reverse<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">reversed<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">num<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">.<\/span><span class=\"nx\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">.<\/span><span class=\"nx\">reverse<\/span><span class=\"p\">()<\/span>\n        <span class=\"p\">.<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ return equality check<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nb\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">reversed<\/span><span class=\"p\">)<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">num<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h2>\n  \n  \n  Tale of Two Loops\n<\/h2>\n\n<p>In order to check all numbers, we have to check all products from 99 x 99 \u2192 1 x 1.  To accomplish this, we're going to loop the right number inside of the left number, i.e. 99 x 99 \u2192 99 x 98...and so forth.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">largestPalindromeProduct<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">highest<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n      <span class=\"c1\">\/\/ Find largest number<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">largestNum<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">9<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">largestNum<\/span> <span class=\"o\">+=<\/span> <span class=\"nb\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">largestNum<\/span><span class=\"p\">.<\/span><span class=\"nx\">repeat<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n      <span class=\"nx\">largestNum<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">largestNum<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"c1\">\/\/ loop left number<\/span>\n      <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\">largestNum<\/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>\n            <span class=\"c1\">\/\/ loop right number<\/span>\n        <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">j<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">largestNum<\/span><span class=\"p\">;<\/span> <span class=\"nx\">j<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">j<\/span><span class=\"o\">--<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"kd\">let<\/span> <span class=\"nx\">product<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">j<\/span><span class=\"p\">;<\/span>\n                <span class=\"c1\">\/\/ check if palindrome<\/span>\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">isPalindrome<\/span><span class=\"p\">(<\/span><span class=\"nx\">product<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">product<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nx\">highest<\/span><span class=\"p\">)<\/span> <span class=\"nx\">highest<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">product<\/span><span class=\"p\">;<\/span>\n            <span class=\"c1\">\/\/ we have the highest palindrome for this set, skip to next loop<\/span>\n            <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n        <span class=\"c1\">\/\/ return the highest palindrome we found<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">highest<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h2>\n  \n  \n  Full Solution\n<\/h2>\n\n\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">isPalindrome<\/span><span class=\"p\">(<\/span><span class=\"nx\">num<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ get reverse<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">reversed<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">num<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">.<\/span><span class=\"nx\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">.<\/span><span class=\"nx\">reverse<\/span><span class=\"p\">()<\/span>\n        <span class=\"p\">.<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">''<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ return equality check<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nb\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">reversed<\/span><span class=\"p\">)<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">num<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"kd\">function<\/span> <span class=\"nx\">largestPalindromeProduct<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">highest<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n      <span class=\"c1\">\/\/ Find largest number<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">largestNum<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">9<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">largestNum<\/span> <span class=\"o\">+=<\/span> <span class=\"nb\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">largestNum<\/span><span class=\"p\">.<\/span><span class=\"nx\">repeat<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n      <span class=\"nx\">largestNum<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Number<\/span><span class=\"p\">(<\/span><span class=\"nx\">largestNum<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"c1\">\/\/ loop left number<\/span>\n      <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\">largestNum<\/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>\n            <span class=\"c1\">\/\/ loop right number<\/span>\n        <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">j<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">largestNum<\/span><span class=\"p\">;<\/span> <span class=\"nx\">j<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">j<\/span><span class=\"o\">--<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"kd\">let<\/span> <span class=\"nx\">product<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">j<\/span><span class=\"p\">;<\/span>\n                <span class=\"c1\">\/\/ check if palindrome<\/span>\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">isPalindrome<\/span><span class=\"p\">(<\/span><span class=\"nx\">product<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">product<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nx\">highest<\/span><span class=\"p\">)<\/span> <span class=\"nx\">highest<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">product<\/span><span class=\"p\">;<\/span>\n            <span class=\"c1\">\/\/ we have the highest palindrome for this set, skip to next loop<\/span>\n            <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n        <span class=\"c1\">\/\/ return the highest palindrome we found<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">highest<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>This approach includes both a minor algorithm, in that it skips over any numbers below a certain threshold and brute force. It will check all the highest palindromes from 99 x 99 to 1 x 1.<\/p>\n\n<p>There is definitely room for improvement here. In fact I found a couple out there that are better than mine, but this works for now.<\/p>\n\n<p>If you have any suggestions or adjustments you think would make it better, feel free to leave a comment!<\/p>\n\n<p>As always, happy coding.<\/p>\n\n<h1>\n  \n  \n  Resources\n<\/h1>\n\n<p><a href=\"https:\/\/www.xarg.org\/puzzle\/project-euler\/problem-4\/\">https:\/\/www.xarg.org\/puzzle\/project-euler\/problem-4\/<\/a><\/p>\n\n<p><a href=\"https:\/\/github.com\/Matt-1123\/project-euler\/blob\/master\/solutions.js\">https:\/\/github.com\/Matt-1123\/project-euler\/blob\/master\/solutions.js<\/a><\/p>\n\n","category":["javascript","projecteuler","tutorial","challenge"]},{"title":"Project Euler Problem 3 Solved with Javascript\n","pubDate":"Wed, 05 Feb 2020 23:40:30 +0000","link":"https:\/\/dev.to\/codenutt\/project-euler-problem-3-solved-with-javascript-6of","guid":"https:\/\/dev.to\/codenutt\/project-euler-problem-3-solved-with-javascript-6of","description":"<h1>\n  \n  \n  Problem 3: Largest Prime Factor\n<\/h1>\n\n<p>Today we're going to tackle Project Euler problem number 3! We are going to learn all about primes and factors. This problem is fairly straight-forward, so we shouldn't have to dig too deep into Wikipedia.<\/p>\n\n<h1>\n  \n  \n  Problem Discussion\n<\/h1>\n\n<p>The prime factors of 13195 are 5, 7, 13 and 29.<\/p>\n\n<p>What is the largest prime factor of the given number?<\/p>\n\n<h1>\n  \n  \n  Video Version\n<\/h1>\n\n<p>If you like to watch rather than read, check out the video that accompanies this article. If not, keep reading!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/yoqN91pr5qM\">\n<\/iframe>\n<\/p>\n\n<h2>\n  \n  \n  Prime Number\n<\/h2>\n\n<p>First, let's figure out what a prime number is, in case you forgot...which I did.<\/p>\n\n<blockquote>\n<p>a whole number greater than 1 that can not be made by multiplying other whole numbers<\/p>\n<\/blockquote>\n\n<p>Some examples are: 2, 3, 5 and 7.<\/p>\n\n<h2>\n  \n  \n  Prime Factor\n<\/h2>\n\n<p>Rather than try and explain it in my own words, i'll let <a href=\"http:\/\/mathisfun.com\" rel=\"noopener noreferrer\">mathisfun.com<\/a> do the explaining.<\/p>\n\n<blockquote>\n<p>A factor that is a prime number.<\/p>\n<\/blockquote>\n\n<p>or<\/p>\n\n<blockquote>\n<p>In other words: any of the prime numbers that can be multiplied to give the original number.<\/p>\n<\/blockquote>\n\n<h3>\n  \n  \n  Example\n<\/h3>\n\n<p>The factors of 35 are: 1, 5, 7, 35. 35 is a composite of 7 and 5, therefore 7 is the highest prime number, making it the highest prime factor. <\/p>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n<p>Now that we are armed with grade school math, let's solve this thing!<\/p>\n\n<h2>\n  \n  \n  Steps\n<\/h2>\n\n<ol>\n<li>Iterate over all factors<\/li>\n<li>Check factor is a prime number<\/li>\n<li>Return last factor.<\/li>\n<\/ol>\n\n<h2>\n  \n  \n  Code\n<\/h2>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nf\">largestPrimeFactor<\/span><span class=\"p\">(<\/span><span class=\"nx\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ setup local state<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">primesAndFactor<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n      <span class=\"c1\">\/\/ find all factors<\/span>\n      <span class=\"c1\">\/\/ In order to maintain this property of unique prime factorizations, it is necessary that the number one, 1, be categorized as neither prime nor composite.<\/span>\n      <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">factorIterator<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">factorIterator<\/span> <span class=\"o\">&lt;=<\/span> <span class=\"nx\">number<\/span><span class=\"p\">;<\/span> <span class=\"nx\">factorIterator<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ check if factor<\/span>\n        <span class=\"kd\">let<\/span> <span class=\"nx\">isFactor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">number<\/span> <span class=\"o\">%<\/span> <span class=\"nx\">factorIterator<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n        <span class=\"kd\">let<\/span> <span class=\"nx\">isPrime<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">isFactor<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"c1\">\/\/ see if factor is a prime<\/span>\n          <span class=\"c1\">\/\/ a prime number has two factors, 1 and itself<\/span>\n          <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=\"mi\">2<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">factorIterator<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">factorIterator<\/span> <span class=\"o\">%<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">isPrime<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n              <span class=\"k\">continue<\/span><span class=\"p\">;<\/span>\n            <span class=\"p\">}<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"c1\">\/\/ if so, push to primes list<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">isFactor<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">isPrime<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">primesAndFactor<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">factorIterator<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span> <span class=\"c1\">\/\/ end for loop<\/span>\n\n      <span class=\"c1\">\/\/ return last element of array<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">primesAndFactor<\/span><span class=\"p\">.<\/span><span class=\"nf\">pop<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nf\">largestPrimeFactor<\/span><span class=\"p\">(<\/span><span class=\"mi\">13195<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>In this challenge, we start getting into the need for algorithms. This is a brute force approach that requires two for loops, which isn't ideal. This works okay for now, but we will need something more powerful for the next set of problems, I'm sure.<\/p>\n\n<p>If you want to see the rest of my solutions, check them out here:<\/p>\n\n\n<div class=\"ltag-github-readme-tag\">\n  <div class=\"readme-overview\">\n    <h2>\n      <img src=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg\" alt=\"GitHub logo\">\n      <a href=\"https:\/\/github.com\/DarthOstrich\" rel=\"noopener noreferrer\">\n        DarthOstrich\n      <\/a> \/ <a href=\"https:\/\/github.com\/DarthOstrich\/projectEuler\" rel=\"noopener noreferrer\">\n        projectEuler\n      <\/a>\n    <\/h2>\n    <h3>\n      \n    <\/h3>\n  <\/div>\n  <div class=\"ltag-github-body\">\n    \n<div id=\"readme\" class=\"md\">\n<div class=\"markdown-heading\">\n<h1 class=\"heading-element\">Project Euler<\/h1>\n\n<\/div>\n\n<p>A Dark Souls level progamming challenge.<\/p>\n\n<p><a href=\"https:\/\/www.freecodecamp.org\/news\/projecteuler100-coding-challenge-competitive-programming\/\" rel=\"nofollow noopener noreferrer\">freeCodeCamp Link<\/a><\/p>\n\n<\/div>\n<br>\n<br>\n  <\/div>\n<br>\n  <div class=\"gh-btn-container\"><a class=\"gh-btn\" href=\"https:\/\/github.com\/DarthOstrich\/projectEuler\" rel=\"noopener noreferrer\">View on GitHub<\/a><\/div>\n<br>\n<\/div>\n<br>\n\n\n<h1>\n  \n  \n  Resources\n<\/h1>\n\n<p><a href=\"https:\/\/www.mathsisfun.com\/definitions\/prime-factor.html\" rel=\"noopener noreferrer\">Prime Factor<\/a><\/p>\n\n","category":["projecteuler","javascript","beginners","tutorial"]},{"title":"Project Euler Problem 2 Solved with Javascript","pubDate":"Mon, 27 Jan 2020 05:56:17 +0000","link":"https:\/\/dev.to\/codenutt\/project-euler-problem-2-solved-with-javascript-5648","guid":"https:\/\/dev.to\/codenutt\/project-euler-problem-2-solved-with-javascript-5648","description":"<p>Welcome to Round Two of Project Euler! This time we're heading into the land of state management and that guy you've probably heard about: Fibonacci! I'm excited, are you excited?<\/p>\n\n<h1>\n  \n  \n  Video Version\n<\/h1>\n\n<p>If you like to watch rather than read, check out the video that accompanies this article. If not, keep reading!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/wgN5g4pAw04\">\n<\/iframe>\n<\/p>\n\n<h1>\n  \n  \n  Problem 2: Even Fibonacci Numbers\n<\/h1>\n\n<p>Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:<\/p>\n\n<p>1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...<\/p>\n\n<h2>\n  \n  \n  Problem Statement\n<\/h2>\n\n<p>By considering the terms in the Fibonacci sequence that do not exceed the <code>nth<\/code> term, find the <strong>sum<\/strong> of the <strong>even-valued<\/strong> terms.<\/p>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n<h2>\n  \n  \n  Breakdown of the Problem\n<\/h2>\n\n<h3>\n  \n  \n  Fibonacci sequence\n<\/h3>\n\n<p>It's stated in the problem, however, let's discuss what a Fibonacci sequence is a little bit and why it's important.<\/p>\n\n<blockquote>\n<p>The next number is found by adding up the two numbers before it.<\/p>\n<\/blockquote>\n\n<p>When we do this, it creates an interesting spiral, which is found in myriad places in nature.<\/p>\n\n<p><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--V1pA8MnN--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/media3.giphy.com\/media\/5uqc0f9rn3igw\/giphy.gif\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--V1pA8MnN--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/media3.giphy.com\/media\/5uqc0f9rn3igw\/giphy.gif\" alt=\"https:\/\/media3.giphy.com\/media\/5uqc0f9rn3igw\/giphy.gif\"><\/a><\/p>\n\n<p>We could probably talk all day about Fibonacci, but let's get back to code.<\/p>\n\n<h2>\n  \n  \n  Steps\n<\/h2>\n\n<ol>\n<li>Generate Fibonacci sequence\n\n<ol>\n<li>Add our first term(1) + our second term (2)<\/li>\n<li>Add product of our previous numbers to second term<\/li>\n<\/ol>\n\n\n<\/li>\n<li>Check to see if the value is even, if so, add it to a total sum.<\/li>\n<li>Repeat, infinitely...<\/li>\n<\/ol>\n\n<p><a href=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--eURYjwsu--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/thepracticaldev.s3.amazonaws.com\/i\/saf0ihkmikyrdh0jmr4k.gif\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--eURYjwsu--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880\/https:\/\/thepracticaldev.s3.amazonaws.com\/i\/saf0ihkmikyrdh0jmr4k.gif\" alt=\"Fibonacci Sequence\"><\/a><\/p>\n\n<h2>\n  \n  \n  Naive Approach\n<\/h2>\n\n\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">fiboEvenSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">n<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ setup placeholders for our three values<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">fibNumSum<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ product of our two numbers<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">fibCurrent<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ current number<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">fibNext<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ next number<\/span>\n\n      <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=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;=<\/span> <span class=\"nx\">n<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ find next number<\/span>\n        <span class=\"kd\">let<\/span> <span class=\"nx\">fibTotal<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fibCurrent<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">fibNext<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ set first number to second number<\/span>\n        <span class=\"nx\">fibCurrent<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fibNext<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"c1\">\/\/ set second number to total<\/span>\n        <span class=\"nx\">fibNext<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">fibTotal<\/span><span class=\"p\">;<\/span>\n            <span class=\"c1\">\/\/ make sure the value is even<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">fibTotal<\/span> <span class=\"o\">%<\/span> <span class=\"mi\">2<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">fibNumSum<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">fibTotal<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"c1\">\/\/ You can do it!<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">fibNumSum<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nx\">fiboEvenSum<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/44<\/span>\n<\/code><\/pre><\/div>\n\n<h2>\n  \n  \n  Modulo\n<\/h2>\n\n<p>I talked about what modulo is in my first article, but I need to clarify a couple things. When you evaluate a modulo expression, it gives you the remainder of the division of the two numbers. In the case of <code>15 % 4<\/code> , that will give us a remainder of 3 because:<\/p>\n\n<ul>\n<li>4 goes into 15 3 times.<\/li>\n<li>15 - 3 * 4 (12) = 3<\/li>\n<\/ul>\n\n<p>Therefore, 15 % 4 = 3 or 15 \/ 4 = 3 remainder 3<\/p>\n\n<p>I don't know if that explains it well enough...but, if it still doesn't make sense. Check out the video in the resources section below!<\/p>\n<h2>\n  \n  \n  Algorithmic Approach\n<\/h2>\n\n<p>I'm not going to sit here and try and explain someone else's code. However, I found a pretty awesome way of solving this problem via CodeFay.<\/p>\n\n\n<div class=\"ltag-github-readme-tag\">\n  <div class=\"readme-overview\">\n    <h2>\n      <img src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--vJ70wriM--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/practicaldev-herokuapp-com.freetls.fastly.net\/assets\/github-logo-ba8488d21cd8ee1fee097b8410db9deaa41d0ca30b004c0c63de0a479114156f.svg\" alt=\"GitHub logo\">\n      <a href=\"https:\/\/github.com\/CodeFay\">\n        CodeFay\n      <\/a> \/ <a href=\"https:\/\/github.com\/CodeFay\/ProjectEuler100\">\n        ProjectEuler100\n      <\/a>\n    <\/h2>\n    <h3>\n      Project Euler 100 Challenge\n    <\/h3>\n  <\/div>\n  <div class=\"ltag-github-body\">\n    \n<div id=\"readme\" class=\"md\">\n<h1>\nProjectEuler100<\/h1>\n<p>I'm returning to <a href=\"https:\/\/www.freecodecamp.org\/news\/projecteuler100-coding-challenge-competitive-programming\/\" rel=\"nofollow\">FreeCodeCamp<\/a> in 2020 to attempt the <strong>Project Euler 100 Challenge<\/strong>.<\/p>\n<p>Will it be really as hard as Dark Souls?  Probably, but I'm up for the challenge!<\/p>\n<h2>\nSolved Problems:<\/h2>\n<ol>\n<li>\n<strong>Multiples of 3 and 5<\/strong> - Jan 14, 2020<\/li>\n<li>\n<strong>Even Fibonacci Numbers<\/strong> - Jan 17, 2020<\/li>\n<li>\n<strong>Largest prime factor<\/strong> - Jan 18, 2020<\/li>\n<li>\n<strong>Largest palindrome product<\/strong> - Jan 26, 2020<\/li>\n<li>\n<strong>Smallest multiple<\/strong> - Jan 26, 2020<\/li>\n<li>\n<strong>Sum square difference<\/strong> - Jan 26, 2020<\/li>\n<li>\n<strong>10001st prime number<\/strong> - Jan 28, 2020<\/li>\n<li>\n<strong>Largest product in a series<\/strong> - Jan 28, 2020<\/li>\n<li>\n<strong>Special Pythagorean triplet<\/strong> - Jan 28, 2020<\/li>\n<li>\n<strong>Summation of Primes<\/strong> - Jan 28, 2020<\/li>\n<\/ol>\n<\/div>\n\n  <\/div>\n  <div class=\"gh-btn-container\"><a class=\"gh-btn\" href=\"https:\/\/github.com\/CodeFay\/ProjectEuler100\">View on GitHub<\/a><\/div>\n<\/div>\n\n\n\n<p>It's an elegant approach, as well as a faster one. When I tested it against my naive approach, it was generally about 20% faster. I suggest checking it out if you want to see some cool code!<\/p>\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>This problem is fairly straight-forward. What I like about this problem is it gets us thinking about the \"state\" of our app. We define our three values at the top of our function, then manipulate them within the for loop. This reduces what we have to do after we get all the fibonacci values.<\/p>\n\n<p>As always, I'm sure there is room for improvement. If you have recommendations, let me know!<\/p>\n\n<h1>\n  \n  \n  Resources\n<\/h1>\n\n<p><a href=\"https:\/\/www.mathsisfun.com\/numbers\/fibonacci-sequence.html\">Fibonacci Sequence<\/a><\/p>\n\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=pNXwzIohx8c&amp;feature=emb_title\">https:\/\/www.youtube.com\/watch?v=pNXwzIohx8c&amp;feature=emb_title<\/a><\/p>\n\n","category":["javascript","tutorial","beginners","webdev"]},{"title":"Project Euler: Problem 1 with Javascript","pubDate":"Thu, 16 Jan 2020 23:14:26 +0000","link":"https:\/\/dev.to\/codenutt\/project-euler-problem-1-with-javascript-p05","guid":"https:\/\/dev.to\/codenutt\/project-euler-problem-1-with-javascript-p05","description":"<h1>\n  \n  \n  Front Matter\n<\/h1>\n\n<p>Here we are, attempting the Dark Souls of coding challenges. We'll start today with a fairly simple one: getting multiples of 3 and 5.<\/p>\n\n<h1>\n  \n  \n  Problem 1: Multiples of 3 and 5\n<\/h1>\n\n<p>If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.<\/p>\n\n<p>Find the sum of all the multiples of 3 or 5 below the provided parameter value <code>number<\/code>.<\/p>\n\n<h1>\n  \n  \n  Video Version\n<\/h1>\n\n<p>If you like to watch rather than read, check out the video that accompanies this article. If not, keep reading!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/xIQPR-76y-0\">\n<\/iframe>\n<\/p>\n\n<h1>\n  \n  \n  Solution\n<\/h1>\n\n<p>At first glance, this seems more complicated than it actually is.  For the purpose of learning, I am going to be as verbose as possible, then refactor later.<\/p>\n\n<h2>\n  \n  \n  Breakdown of the Problem in Plain English\n<\/h2>\n\n<p>It's important to break down all the elements of the problem, so we fully understand what we are trying to do.<\/p>\n\n<h3>\n  \n  \n  Natural Number\n<\/h3>\n\n<blockquote>\n<p>the positive integers (whole numbers) 1, 2, 3, etc., and sometimes zero as well.<\/p>\n<\/blockquote>\n\n<h3>\n  \n  \n  Multiple of <code>x<\/code>\n<\/h3>\n\n<p>When we say, <\/p>\n\n<blockquote>\n<p>\"is 6 a multiple of 3?\"<\/p>\n<\/blockquote>\n\n<p>we are asking, <\/p>\n\n<blockquote>\n<p>\"is 6 a number that can be calculated by multiplying 3 by a number (in our case whole numbers)\"<\/p>\n<\/blockquote>\n\n<p>In this case, yes, 3 x 2 = 6.<\/p>\n\n<h2>\n  \n  \n  Steps\n<\/h2>\n\n<p>Now that we understand our problem, let's make some logical statements.<\/p>\n\n<ol>\n<li>Given a number, see if it is a multiple of 3<\/li>\n<li>If true, add it to a total number<\/li>\n<li>Given a number, see if it is a multiple of 5<\/li>\n<li>If true, add it to a total number<\/li>\n<\/ol>\n\n<p>Let's break it down in the code. Again, this is very verbose.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">multiplesOf3and5<\/span><span class=\"p\">(<\/span><span class=\"nx\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ establish a global total and set initial value to 0<\/span>\n        <span class=\"kd\">let<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span>\n        <span class=\"c1\">\/\/ loop through all values from 0 to given number   <\/span>\n      <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=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;=<\/span> <span class=\"nx\">number<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ Get remainder of i and 3<\/span>\n            <span class=\"kd\">let<\/span> <span class=\"nx\">remainderFor3<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">%<\/span> <span class=\"mi\">3<\/span><span class=\"p\">;<\/span>\n            <span class=\"c1\">\/\/ Get remainder of i and 5<\/span>\n            <span class=\"kd\">let<\/span> <span class=\"nx\">remainderFor5<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">%<\/span> <span class=\"mi\">5<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"c1\">\/\/ check if remainder for 3 or 5<\/span>\n            <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">remainderFor3<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">remainderFor5<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                <span class=\"c1\">\/\/ If true, that means i is a multiple of 3<\/span>\n                <span class=\"c1\">\/\/ add it to the total<\/span>\n                <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">i<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"c1\">\/\/ return our total number<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">total<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h2>\n  \n  \n  Explanation of Modulo <code>%<\/code>\n<\/h2>\n\n<p>This line here is doing something interesting:<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"nx\">i<\/span> <span class=\"o\">%<\/span> <span class=\"mi\">3<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<p>The operator in the middle is called a Modulus. It returns the remainder of two numbers. We can use it to see if one number is an even multiple of another number.<\/p>\n\n<h2>\n  \n  \n  Refactor\n<\/h2>\n\n<p>We can reduce the code quite a lot, without losing the context of what we are trying to do. Here is my final solution.<br>\n<\/p>\n\n<div class=\"highlight\"><pre class=\"highlight javascript\"><code>    <span class=\"kd\">function<\/span> <span class=\"nx\">multiplesOf3and5<\/span><span class=\"p\">(<\/span><span class=\"nx\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">let<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n      <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=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;=<\/span> <span class=\"nx\">number<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">i<\/span> <span class=\"o\">%<\/span> <span class=\"mi\">3<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">||<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">%<\/span> <span class=\"mi\">5<\/span> <span class=\"o\">==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">total<\/span> <span class=\"o\">+=<\/span> <span class=\"nx\">i<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">total<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>There is always room for improvement, however I like how this is setup. It's simple and doesn't abstract too far from what we are trying to accomplish. I'm certain if I come back to this in two years, I'll still know what's going on.<\/p>\n\n<p>If you'd like to see the code, check out my Github repo with the problems I've completed so far.<\/p>\n\n<p><a href=\"https:\/\/github.com\/DarthOstrich\/projectEuler\">DarthOstrich\/projectEuler<\/a><\/p>\n\n<h1>\n  \n  \n  Resources\n<\/h1>\n\n<p><a href=\"https:\/\/www.freecodecamp.org\/news\/projecteuler100-coding-challenge-competitive-programming\/\">Introducing The #ProjectEuler100 Challenge: the \"Dark Souls\" of Coding Achievements<\/a><\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/pNXwzIohx8c\">\n<\/iframe>\n<\/p>\n\n","category":["javascript","tutorial","beginners","webdev"]},{"title":"What are you using for Project Proposals\/Invoicing?","pubDate":"Sat, 14 Dec 2019 21:19:50 +0000","link":"https:\/\/dev.to\/codenutt\/what-are-you-using-for-project-proposals-invoicing-32k2","guid":"https:\/\/dev.to\/codenutt\/what-are-you-using-for-project-proposals-invoicing-32k2","description":"<h1>\n  \n  \n  Front Matter\n<\/h1>\n\n<p>I've been freelancing for about four years now. I can't count the number of project proposals I've done during that time. That's a lie, I could, but then I have to look through the black hole that is my Google Drive.<\/p>\n\n<h1>\n  \n  \n  My Process\n<\/h1>\n\n<p>To give you an idea of how the process works for starting a new project, it looks a little something like this:<\/p>\n\n<ol>\n<li>Usually get a referral from someone, which will come in the form of an e-mail (normally).<\/li>\n<li>I e-mail said person trying to get a gauge on what type of project it is.<\/li>\n<li>When they respond back, I'll do a bit of research and schedule a call to discuss it more in-depth.<\/li>\n<li>After I close the call, I give myself a couple of days to develop what I call the \"Tech Design\". This translates to a Google Doc full of stuff like:<\/li>\n<\/ol>\n\n<ul>\n<li>Technology I'm going to use (Gatsby, etc.)<\/li>\n<li>Hosting<\/li>\n<li>Schedule Breakdown<\/li>\n<li>Pricing<\/li>\n<\/ul>\n\n<ol>\n<li>When finished, I e-mail the client with the Google doc Link. They'll take a look and I'll get a written agreement by having them acknowledge the terms in via e-mail.<\/li>\n<li>Do the Project!<\/li>\n<li>Invoice via Freshbooks<\/li>\n<li>Wait 10 years for them to pay.<\/li>\n<\/ol>\n\n<h1>\n  \n  \n  Your Process\n<\/h1>\n\n<p>There is always room for improvement. What are you doing for this process? I've got invoicing down, Freshbooks makes it super easy, but I think I can do better with the proposals.<\/p>\n\n<p>Thoughts?<\/p>\n\n","category":["watercooler","discuss","productivity","career"]},{"title":"How I Reduced Load Time by 25% on  Squarespace and Why I Couldn't Get More","pubDate":"Thu, 28 Nov 2019 16:50:01 +0000","link":"https:\/\/dev.to\/codenutt\/how-i-reduced-load-time-by-25-on-squarespace-and-why-i-couldn-t-get-more-7gg","guid":"https:\/\/dev.to\/codenutt\/how-i-reduced-load-time-by-25-on-squarespace-and-why-i-couldn-t-get-more-7gg","description":"<h1>\n  \n  \n  Front Matter\n<\/h1>\n\n<p>Recently, I got a job that required me to debug a Squarespace site to see why it was loading so slow. I figured I'd share what I did to increase the load speed.<\/p>\n\n<h1>\n  \n  \n  Tools\n<\/h1>\n\n<p>I used Google's built-in tool \"Lighthouse\". If you don't know where that is, you can find it in the Dev Tools under \"Audit\".<\/p>\n\n<p><a href=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Flighthouse%2Fimages%2Faudits.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdevelopers.google.com%2Fweb%2Ftools%2Flighthouse%2Fimages%2Faudits.png\" alt=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/images\/audits.png\"><\/a><\/p>\n\n<p><strong>Disclaimer<\/strong>: All load times are evaluated against a simulated Slow 4G connection.<\/p>\n\n<h1>\n  \n  \n  Why Load Time is a Problem\n<\/h1>\n\n<p>While you are running the audit, Google will give you a bunch of reasons to keep your site loading quickly. Essentially, the longer it takes, the less likely people are going to stay on your site. Additionally, Google is possibly planning to add a \"slow badge\" to sites that load slowly. That is really bad for user retention. Check out the article for that <a href=\"https:\/\/www.theverge.com\/2019\/11\/11\/20959865\/google-chrome-slow-sites-badge-system-chrome-dev-summit-2019\" rel=\"noopener noreferrer\">here<\/a>. If you want an even more in-depth article, <a href=\"https:\/\/yoast.com\/does-site-speed-influence-seo\/\" rel=\"noopener noreferrer\">check this out<\/a>.<\/p>\n\n<h1>\n  \n  \n  The First Run\n<\/h1>\n\n<p>If you take a look at the readout below, you can see that the site is loading incredibly slowly (again, this is against a slow 4G).<\/p>\n\n<p><a href=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fgvltxdua7athcvw054zo.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fgvltxdua7athcvw054zo.png\" alt=\"Analytics of a Google Lighthouse Audit\"><\/a><\/p>\n\n<h1>\n  \n  \n  The Issues and Fixes\n<\/h1>\n\n<p>The Audit will give you a list of common problems and fixes. Here's what I got.<\/p>\n\n<h2>\n  \n  \n  Render Blocking scripts\n<\/h2>\n\n<h3>\n  \n  \n  Problem\n<\/h3>\n\n<p>When a page is being loaded, the browser loads things from top to bottom in the HTML file. That means any items in the <code>&lt;head&gt;<\/code> tag will load before the content in the <code>&lt;body&gt;<\/code> is even painted on the screen. In this case, there were 3 Mbs of scripts being loaded; both Javascript and CSS.<\/p>\n\n<p><a href=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fpysz1cg1e3ui03l5z9y6.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fpysz1cg1e3ui03l5z9y6.png\" alt=\"Render blocking warning\"><\/a><\/p>\n\n<h3>\n  \n  \n  Fix\n<\/h3>\n\n<p>I removed all the render-blocking scrips that I could. This included jQuery and power.io.<\/p>\n\n<h3>\n  \n  \n  A Note about Squarespace\n<\/h3>\n\n<p>There are ~6 seconds of load time we can't get back because of how Squarespace is built. They load the universal javascript in the header. There is no way to change this. Refer to <a href=\"https:\/\/forum.squarespace.com\/topic\/149465-critical-jscss-slows-pages-bad-for-seo-and-google-ranking\/?tab=comments#comment-191025\" rel=\"noopener noreferrer\">this forum article<\/a> posted in September for further info.<\/p>\n\n<p>The total size of the \"universal\" bundles are nearly 1 Mb of data.<\/p>\n\n<h2>\n  \n  \n  Incorrectly Sized Images\n<\/h2>\n\n<h3>\n  \n  \n  Problem\n<\/h3>\n\n<p>The site was loading a total of 2.7 Mbs of data for just the images. The key problems were:<\/p>\n\n<ul>\n<li>A large logo in the header. It comes in at 1500px wide, despite the max width being 1200px.<\/li>\n<li>A collection of 4 images in a carousel. Each one is 750px wide.<\/li>\n<li>A banner image that is being hidden as soon as the page loads.<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  Fix\n<\/h3>\n\n<p>There is no fix. The platform handles responsive image resizing automatically. On retina screens, it'll load an image that's 2X the screen size. There isn't much we can do about how the platform is built. We sort of just have to accept that how images are loaded is out of our hands, so to speak.<\/p>\n\n<h1>\n  \n  \n  Enormous Network Payload\n<\/h1>\n\n<p>The payload size on the first run was 5 Mbs! That's huge! Here are a couple of things I did to reduce it to 2.2 Mbs (which is still pretty big in my book).<\/p>\n\n<h2>\n  \n  \n  Page-Specific Code Injection\n<\/h2>\n\n<h3>\n  \n  \n  Problem\n<\/h3>\n\n<p>They had a small script on every page to change the logo image. For whatever reason, they were pulling in the jQuery script on every page to accomplish this. Also, this was happening in the <code>&lt;head&gt;<\/code>.<\/p>\n\n<h3>\n  \n  \n  Fix\n<\/h3>\n\n<p>I created a function in the footer that injects in every page that looks for specific pages they want to have a different logo - sans jQuery.<\/p>\n\n<h2>\n  \n  \n  Banner Image\n<\/h2>\n\n<h3>\n  \n  \n  Problem\n<\/h3>\n\n<p>They were loading in a banner image that they were hiding.<\/p>\n\n<h3>\n  \n  \n  Fix\n<\/h3>\n\n<p>Remove the Banner Image altogether.<\/p>\n\n<h2>\n  \n  \n  Typography\n<\/h2>\n\n<h3>\n  \n  \n  Problem\n<\/h3>\n\n<p>Typography styles were coming from three sources: Typekit (built into Squarespace), <a href=\"http:\/\/typography.com\" rel=\"noopener noreferrer\">Typography.com<\/a> and template style sheets. This meant they were downloading a total of 4 separate typeface families:<\/p>\n\n<ul>\n<li>Europa<\/li>\n<li>Promixa Nova<\/li>\n<li>Gotham<\/li>\n<li>Gotham Screen Smart<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  Fix\n<\/h3>\n\n<p>Upon final render, the only typefaces that were actually being used were the Gotham set. I changed the default styles in the Squarespace dashboard to Arial, because that is a web-font and doesn't have to be downloaded from anywhere.<\/p>\n\n<h1>\n  \n  \n  Summary\n<\/h1>\n\n<p>Basically, after removing as many render-blocking scripts I could and removing any images that didn't need to be loaded, I managed to squeeze an additional 2s load time off the top. Unfortunately, because of how Squarespace is built, there is no way around the additional load time.<\/p>\n\n<p>To be fair to Squarespace though, they do a good job of minifying the scripts. Also, considering how advanced their site builder is, I guess it's a fair tradeoff.<\/p>\n\n<p>Got any other hot tips to reduce load time? Throw them in the comments below!<\/p>\n\n","category":["showdev","javascript","webdev","todayilearned"]},{"title":"I Don't Know Javascript Coercion, Do You?","pubDate":"Sun, 24 Nov 2019 08:46:58 +0000","link":"https:\/\/dev.to\/codenutt\/i-don-t-know-javascript-coercion-do-you-29cp","guid":"https:\/\/dev.to\/codenutt\/i-don-t-know-javascript-coercion-do-you-29cp","description":"<h1>\n  \n  \n  I've made a grave mistake\n<\/h1>\n\n<p>In a video I published a few weeks ago, I made a rather basic mistake.<\/p>\n\n<p>Given the following variables...<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>    <span class=\"kd\">let<\/span> <span class=\"nx\">threeString<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">3<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">let<\/span> <span class=\"nx\">threeNum<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">3<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>What does this expression evaluate to?<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>    <span class=\"nx\">threeString<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">threeNum<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>If you're smarter than I was an hour ago, you'll know that it evaluates to <code>\"33\"<\/code>.<\/p>\n\n<p><a href=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7iacvhazay46q1kjq6sf.jpg\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F7iacvhazay46q1kjq6sf.jpg\" alt=\"Gordon Ramsay - Youre a string mate\"><\/a><\/p>\n\n<h1>\n  \n  \n  Why does it do that?\n<\/h1>\n\n<p>According to ECMAScript, as summarized by <a href=\"https:\/\/www.valentinog.com\/blog\/coercion\/\" rel=\"noopener noreferrer\">Valentino<\/a>:<\/p>\n\n<blockquote>\n<p>If x is String or y is String then return ToString(x) followed by ToString(y)<\/p>\n<\/blockquote>\n\n<p>In other words, if there is an expression with the + operator, and one of the values is a string, it will always coerce the values into a string.<\/p>\n\n<h1>\n  \n  \n  Final Thoughts\n<\/h1>\n\n<p>I like to think I'm not completely dumb. I've been building websites\/web apps in Javascript for about four years now. However, we all make mistakes. Even the most basic ones! Own up to them, and we'll all learn something. I know I did!<\/p>\n\n<p>If you want to see my mistake in action, check out the video below!<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/_3th_0JN-mc\">\n<\/iframe>\n<\/p>\n\n<p>And the follow up video, which I made before this mistake I made was pointed out...<\/p>\n\n<p><iframe width=\"710\" height=\"399\" src=\"https:\/\/www.youtube.com\/embed\/xYYsLyep0Ho\">\n<\/iframe>\n<\/p>\n\n","category":["javascript","tutorial","beginners","webdev"]}]}}