Stanley Eric | Astro Blog

Eric Stanley
30 Dec, 2019

JavaScript: Array Manipulation

JavaScript offers different ways to manipulate arrays. However, there are methods that changes the original array and other methods that don’t. The methods that changes original array is called MUTATION. Let’s take a look at most common methods to manipulate arrays in JavaScript Now, that we know that there are methods that mutates the original array, it’s considered best practice to assign the array to const, if you know that the array that you use is not going to get mutated. It’s wise to use let otherwise. It is not a mandate that you need to use const to declare an array that will not be mutated, however, it’s easy for your colleague to understand that the array which is declared as const is not going to get changed anywhere in the code; which is why it’s considered best practice As usual, if you wanna try the examples in this post, I recommend codepen.io, but you are free to make your own choice. The most common interactions that we usually have with arrays areAdd item to array Remove item from array Update and item in the arrayAll the above mentioned actions can be done by both mutating and non-mutating methods. Instead of explaining each of the methods subjectively, I felt it would be better understood with a table. Here we go! testArray: [a, b, c, d, e, f, g, h, i];Code Original Array Processed Array Returned Val Is Mutated Action MethodtestArray.push('j') [a,b,c,d,e,f,g,h,i] [a,b,c,d,e,f,g,h,i,j] 10 true add push()testArray.unshift('z') [a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] 11 true add unshift()testArray.concat('k') [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j,k] false add concat()['y', ...testArray, 'l'] [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] [y,z,a,b,c,d,e,f,g,h,i,j,l] false add ...testArray.pop() [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i] j true remove pop()testArray.shift() [z,a,b,c,d,e,f,g,h,i] [a,b,c,d,e,f,g,h,i] z true remove shift()testArray.splice(0, 2) [a,b,c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [a,b] true remove splice()testArray.filter(a => a!== 'c') [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [d,e,f,g,h,i] false remove filter()testArray.slice(1, 6) [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [d,e,f,g,h] false remove slice()testArray.slice(2) [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [e,f,g,h,i] false remove slice()testArray.splice(2, 1,30, 31) [c,d,e,f,g,h,i] [c,d,30,31,f,g,h,i] [e] true update splice()testArray.map(x => x ==='d' ? 29 : x) [c,d,30,31,f,g,h,i] [c,d,30,31,f,g,h,i] [c,29,30,31,f,g,h,i] false update map()I hope the above table is self-explanatory, however if you need to check the values of the testArray with real code, feel free to visit programmatic output where the exact same table is derived programmatically. Codepen pin link

Cookie Policy

Ever wondered why do websites have no decline option in their cookie policy popup? Well, lets’ see. Today, almost all sites in the internet uses cookies that is stored temporarily in the system cache to ease authentication of the same user in the same system. I’m talking about well-established sites that makes some use of the information in your local machine (THE COOKIE!). Why do I need it? As per GDPR, every website that tracks their visitors should have the visitors consent to use their data to better manage what they need. So if you are tracking your website users and making decisions based on their user data, then ‘YES’, you have to force the user to accept your cookie policy. Do I need it? Before we get into the fun part, we gotta understand what this cookie policy can do. Let’s say you own a blogging portal with ‘Disqus’ comment system enabled. Obviously, any visitor need to have a ‘Disqus’ account in order to comment. This means, like it or not ‘Disqus’ can track your visitors on which sites they visit and which site they comment and maybe manipulate your data based on their need. Now, let’s get into the fun part. As long as you plan to use your visitor’s data and manipulate something from it, you gotta have the cookie policy in your site. However, what do you think you can do with your visitor’s data? As soon as that question is asked, we start to think big! Maybe we can find users locations. “Ok, then what?” If you are just planning or started a blog for yourself like me, all we have is our petty subscription list, which is a list of email ids’ that will be almost empty for atleast couple of months! What can possibly be done with that except sending emails about new posts, which again seldom occurs? Therefore, my view of adding a cookie policy is, if you are just starting a blog; just make sure that you are not adding any tracking 3rd party code that tracks your blogs visitor. That means, in case of WordPress websites, the plug-ins that you use in your site may need you to register in order to use it, but not for your visitors. That is it. You have a long way to go before you even think about adding the cookie policy. Just focus on adding new and useful posts. After all, who wants to accept a policy that has no choices?

Eric Stanley
15 Nov, 2019

How to start blogging

Now this being an obscure topic, I will try to be as different as possible. First things first, you guessed it right. Bluehost. Every post that I found about how to start a blog has section to create Bluehost account and use their service. I am not going to make any suggestions here, but I would say make your own research before buying a hosting space. Most of us tend to believe that the service that the product owner provides is directly proportional to the service that they provide and most of the times, it is true. Let’s see an example here. Service provider X bills $2.00 per month and service provider Y bills $1.60 per month. Now without knowing anything about either X or Y, if someone asks which one is better (without considering the cost), we would say X is better. Now, the outcome of the above scenario is either X might actually be better or maybe not. The point is, you are going to create a blogging portal for yourself or for your niche and you are not going to build a website like google. That means during the initial days, all you need is a single digit simultaneous user-handling server, which you will be hitting all alone. And, by the time you reach a significant user base, you will be matured enough to handle hosting changes. We don’t have to overthink here. Some would prefer cheap and some would prefer quality. I would let you decide on that. Though, this site is not a WordPress site, I would recommend non-technical users to go-ahead with any hosting provided which installs WordPress. Now, one of the mistakes that I did was looking free resources everywhere, until I realized that I would lose my interest as long as something is free. Coz’ as long as you know that something is free and you can get it anytime you wanted and you have nothing to lose, chances of losing interest are more likely to come true. What I’m trying to say is, just buy a paid WordPress theme that you like. Don’t go for free themes. Now, some people might argue that the above statement (or everything) is not true and I agree to that. I have seen sites (sub-domains) in blogspot.com and wordpress.com having more visitors than individually/business owned sites. I gotta say, “They are great bloggers”. This post is just for the ones that are trying to do something good and no intent to become great! Now, if you are still reading this. It’s time for you to start writing.

How to stay a blogger

Staying a blogger is always gonna be hard business. After revamping my blog site, I reviewed most if the interesting and well-established personal blogger sites and guess what, they are not staying a blogger consistently. It’s quite obvious that once you plan to start a blog, you put some good efforts into it and it’s no surprise. I have seen blogs where there were close to 80 posts in a month 10 years ago and hardy any posts in a month now. And I say that is no accident. It’s just the way life goes. Everyone has other work to do apart from blogging unless you earn quite enough from your blog posts. So, my first point about how to stay a blogger is plan not to. Yes. You read it right. Coz’ if you are creating your own blog, you are more likely to lose interest in due time and that’s totally human. That’s why I plan to create posts only when I have time and spend enough time to create one before publishing. That way I know that I am doing this only coz’ I’m interested in writing and not expecting anything more. Now, there is always a different opinion from different people and I respect that. If you think you can plan your life so perfectly, that even after a decade your plan still stays the same, I probably prefer anyone like that, not reading this blog! Having said that, my primary objective now with this post of mine is basically NOT to prove a point and that’s the way the cookie crumbles 🙂

Higher order functions

I recently started learning JavaScript and I tumbled upon a concept called Higher Order Functions (HOF). There are quite a lot of documents in the internet that explains what an HOF is, and here is my thought. Before explaining what an HOF is, let’s see how a function looks like in JavaScript. Functions in JavaScript is not different from functions in any other programming languages, which means, I assume that you kinda know how a function generally looks like. Below is a function snippet in JavaScript. function myTestFunction() { alert("Thanks for clicking") }Now, that we know how a function looks like in JavaScript, let’s continue on knowing what HOF is and how is it different from a normal function. HOF is a concept in JavaScript where a function (say x) is passed as an argument to another function (say y) OR the calling function (say z) returns a function (say x) after execution Let’s take the above function for example (#1), and pass it into another function document.addEventListener("click", myTestFunction) function myTestFunction() { alert("Thanks for clicking") }Now, document.addEventListener is called whenever an event in the first parameter is triggered in the document, and the second parameter is a function that gets executed whenever the event is triggered In other words, the above function can also be written as document.addEventListener("click", function myTestFunction() { alert("Thanks for clicking") })And this works perfectly fine. So, if this works perfectly fine, why would I need to write another function and call it within the addEventListener instead of writing directly within the listener. The answer is, the function can be reused now, if it’s outside the listener. Kinda makes sense? Let’s take another step and look at another example (#2) which is a little more complex. function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)document.write(doubleMe(45) + " ") document.write(tripleMe(45) + " ") document.write(quadrupleMe(45) + " ")As you can see, the createMultiplier function returns a function here which can be used in different places. Let’s take a look at how the code looks without HOF function multiply(x, multiplier) { return x * multiplier }let doubleMe = multiply(45, 2) let tripleMe = multiply(45, 3) let quadrupleMe = multiply(45, 4)document.write(doubleMe + " ") document.write(tripleMe + " ") document.write(quadrupleMe + " ")Looks like, the code without HOF is still less number of lines and effective too! Until now, even I was not sure about the use of HOF. But let’s take 1 more step from here. Let’s parameterize the multiplier (#3) With HOF function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let nums = [41, 42, 43, 44, 45, 46]let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)for (i = 0; i < nums.length; i++) { document.write(doubleMe(nums[i]) + " ") document.write(tripleMe(nums[i]) + " ") document.write(quadrupleMe(nums[i]) + " ") }Without HOF function multiply(x, multiplier) { return x * multiplier }let nums = [41, 42, 43, 44, 45, 46]for (i = 0; i < nums.length; i++) { let doubleMe = multiply(nums[i], 2) let tripleMe = multiply(nums[i], 3) let quadrupleMe = multiply(nums[i], 4) document.write(doubleMe + " ") document.write(tripleMe + " ") document.write(quadrupleMe + " ") }As you can see, the numbers 2, 3 and 4 are constants and we are not making any changes to those parameters within the loop. However, we cannot move them outside of the for loop since the resultant value is dependent on this constant. Whereas, in the code with HOF, we have moved the constants successfully outside of the loop. Now, why do we do that? Does it impact the performance? The answer in this case is, the code looks a little bit neat and NO it does not affect the performance. Here’s another example of HOF in JavaScript let myColors = ["red", "orange", "yellow", "green"] myColors.forEach(saySomethingNice) function saySomethingNice(color) { document.write("The color " + color + " is a great color. ") }The forEach method in the array object automatically loops thro’ every element in the array without using a loop, which means less code to do the same work. The code in example #3 looks like this now! function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let nums = [41, 42, 43, 44, 45, 46]let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)nums.forEach(num => { document.write(doubleMe(num) + " ") document.write(tripleMe(num) + " ") document.write(quadrupleMe(num) + " ") })In my personal terms, if you are a novice JS developer and if you copy and paste a code in JavaScript which you feel that it’s hard to understand, but still works the way you wanted it to, you are probably looking into a HOF. That’s my personal view of HOF though! Ending Note: The latest JavaScript ES6 standard, has tackled a lot of limitations that the ES5 standard had, and HOF is one of those.