DEV Community: Adam O'Reilly

JavaScript: What the **** is Recursion?

Adam O'Reilly — Wed, 06 Jul 2022 09:32:35 +0000

Introduction

JavaScript functions are one of the fundamental building blocks to JavaScript programming. A function is simply defined as a block of code designed to perform a certain task. Generally speaking, a function normally takes in an input and returns an output. One type of function is a recursive function.

So what exactly is recursion?

In computer science, recursion is the process of a function that calls itself from within its own code. This concept is used throughout many programming languages including JavaScript. We can think of this as an alternative to iterating (for/while loops). General rule of thumb is that we use recursion to make our code more readable however, it can sometimes be less efficient than iterating. An example as to where recursion can be helpful is that it can be used for searching and sorting algorithms such as traversing through a binary search tree

The 4 steps of recursion:

A recursive function is made up of 4 steps.

Identify the base case, this will avoid “Stack Overflow” (explained below)
Identify the recursive cases
Return where appropriate
Write procedures for each case that bring you closer to your base case

function recursiveFunc(n) {
  if(n === 3) { // Base Case
    return n // Return when base case has been met
  }
  console.log(n)
  return recursiveFunc(n + 1) // Recrusive Case
}

Each time a recursive function is called, the function itself is added to the call stack. These functions will then be popped off the call stack when the base case has been met. If we do not implement a base case, our recursive functions will infinitely be called and these functions will continue to be added to our call stack until our memory limit has been reached and our application crashes. This is known as “Stack overflow”.

Why use it?

Sometimes we encounter a problem that is too complex to solve directly. We use recursion by breaking up the problem in to smaller, repetitive pieces. We can solve these smaller pieces and then build back up a solution to the entire problem.

For example, when working with tree data structures, it can be useful to use recursion to traverse when you are unsure of how deep the tree is and how many loops you will need to traverse throughout it.

Recursion vs iteratively(looping)

As I explained above, recursion can be used as an alternative to looping. Recursion can always be implemented as a loop but in some situations, it is simpler to use recursion. A big benefit of using recursion is that it is more elegant than using a for loop making it easier to read and debug. It is important to note that iterating is faster and recursion can be a worse option to use if space complexity is important to you.

As shown in the example below, we are implementing a function for a Fibonacci sequence using both a for loop and a recursive method. From these examples, we can see why a recursion function is a better approach to take as it is less cluttered and easier to read.

 function fibonacciIterative(n) {
  let array = [0, 1]
  for (let i =2; i < n +1; i++) {
    array.push(array[i - 1] + array[i - 2])
  }
  return array[n]
}

function fibonacciRecursive(n) {
  if(n < 2) {
    return n
  }
  return fibonacciRecursive(n - 1) + fibonacciRecursive(n - 2)
}

Conclusion:

Recursion itself can be a bit of a pain to wrap your head around but take the time to research and get comfortable with it as it really has some amazing benefits to using it.

Pros:

Readability
DRY

Cons:

Space complexity
Risk of stack overflow
Confusing concept to new developers, may cause issues if using it in your code base

Links

linkedIn — https://linkedin.com/in/adam-o-reilly-js
portfolio - https://www.adamoreilly.com/

The beauty of Google Analytics

Adam O'Reilly — Wed, 22 Jun 2022 10:47:04 +0000

Why?

I recently completed and deployed my first portfolio site. After this, I sat back and thought about how cool it would be to be able keep track of page views in order to see how many people where clicking into my site. After searching through reddit posts and blogs, I kept seeing mention of Google Analytics.

What is Google analytics?

Google analytics is a free analytics tool that allows you to analyse in great detail about your websites traffic. By gathering this data, we can:

See the total number of users to the site
See the split between new and previously viewed users
The average number of pages a user views in your website
The average for how long a user spends on your site
Which countries/cities a user used to view your website
Which operating system/browser a user used to view your website

Requirements

Your NextJs project

A google analytics account
Google analytics measurement ID (can be found in admin/data streams/the stream you just set up

Step 1

Inside your .env located in the root folder, we can add our Google ID as shown below. You could skip this step by inserting the Google ID directly into the code in step 2 but I prefer to put ID such as this in an .env file for protection.

Step 2

Create a _document.js file in the root directory. This will be where we place the monitoring code for google analytics. Copy and paste the code below to your file.

import Document, { Html, Head, Main, NextScript } from 'next/document';

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="en-US">
        <Head>
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
            `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default CustomDocument;

Step 3

Now on to the final step, testing. At this point you can deploy your project and head over the Google analytics website. Unfortunately it takes Google analytics 24–48 hours to populate the data, however, we can take a look the Real-time tab which will give you an insight to the active users on your site over the past 5 minutes.

Real-time overview of current users viewing the website

After the waiting period when the data has been collected you will be able to select the Audience tab and into Overview where you can see the breakdown of your websites traffic over a selected period of time.

Overview of user traffic over two days

Conclusion

Congratulations, you have now setup your project with Google analytics. At this point you should now begin to see the power of GA and how you can now use this data to monitor the overall traffic and see the strengths and weaknesses of your website.

Links

Google Analytics — https://analytics.google.com
NextJs — https://nextjs.org/
linkedIn — https://linkedin.com/in/adam-o-reilly-js
portfolio - https://www.adamoreilly.com/

The beauty of Sanity

Adam O'Reilly — Wed, 08 Jun 2022 08:21:10 +0000

One of the most exciting aspects of web development is the seemingly endless amounts of tools that are at your fingertips. I always use the opportunity of starting a new project to explore different libraries, frameworks, platforms and tools that I have not used before.

A project that I decided to recently undertake was to build my own E-commerce application. For the frontend, I decided to use NextJS. NextJs comes with some amazing features that can optimise the websites performance and makes it easier/quicker to create a website as NextJS is built upon the React library. I also decided to use TailwindCSS to style my application due to its ease of use and the ability to create beautifully styled components.

While researching E-commerce sites, I came across Sanity. After reading through the Sanity documentation and watching a few videos on it, I was blown away at the capabilities of this platform. By using Sanity, I no longer needed to create a backend server using Express like I normally would have. I did not need to connect to a database such as MongoDb or Postgres. I didn’t need to create API’s in order to send and retrieve data from my database. Where it might have taken me a few days to create this backend, I managed to incorporate Sanity to my application in a couple of hours. It massively cut down my workload which is a huge plus in my books.

What is Sanity??

For those of you who don’t know, Sanity is a headless CMS, basically a platform for structured content that allows you to store data for your website/applications. Being that it is ‘Headless’, simply means you can plug it into any frontend framework of your choice. The best feature that comes with Sanity is the Sanity Studio. The Sanity Studio is a dashboard that allows you the manage your content that is then used to display on your website.

Example of Sanity studio

After connecting Sanity to your application, you can create a schema that will be the structure of your data. For example, in my E-commerce application, I need to display a product that will be for sale. In my Schema, I defined this product, giving it information such as a title, an image, a price, a description and a list of features etc. After creating this schema, I can go over to the Sanity Studio. Once here, I can create a new product where I will be met with the input fields that I defined inside my Schema.

Once this product has been created, I can head back over to my application and using a very simple query, can retrieve this data from Sanity and display it on my website.

Data retrieved from Sanity and displayed on website

Conclusion

Sanity is a fantastic and easy to use platform for both developers and admins of your website/application. After the completion of my E-commerce application, I am happy to say that I enjoyed my time using Sanity and will definitely be recommending it and using it again myself in the future.

Links

Sanity — https://www.sanity.io/

NextJs — https://nextjs.org/

E-commerce website — https://rye-river-electronics.vercel.app/

linkedIn — linkedin.com/in/adam-o-reilly-js