DEV Community: Jesse Price

Demystifying Big O Notation.

Jesse Price — Sun, 24 Nov 2024 21:27:15 +0000

Understanding how efficient your code is just by looking at it can be tricky. Thankfully, the brilliant minds before us have come up with a neat trick: Big O notation. This fancy little concept helps us measure how much time and space an algorithm will consume based on its input.

So, why should we care? Well, as engineers, our job boils down to two things: solving problems that have never been solved before, or solving problems that have been solved but in a more efficient way. Knowing Big O helps us make smarter decisions about which algorithms to use. It’s like having a cheat sheet for predicting how much time and memory your code will need, depending on the input size. Sounds good, right? Let’s break it down with a simple example: O(n), also known as linear time complexity.

O(n) — A Linear Approach

Take a look at this function:

const arr = [1, 3, 5, 5, 4, 6, 12, ...];
const addAllArrayElements = (arr) =>{
  let sum = 0;
  for(let i=0; i < arr.length; i++){
    sum += arr[i];
  }
  return sum;
}

Here we have a simple function that takes an array of numbers and adds them all together. Now, let’s talk Big O. The for loop in this example runs once for each element in the array, which means the time taken grows directly with the size of the array. If there are n elements in the array, the function runs n times. Hence, we call this O(n)—linear time complexity.

Sure, you might point out that adding a value to the sum variable takes some time too. And you’re right! But in Big O terms, we ignore those small details (like constants) because they don’t significantly change how the function behaves as the input size grows.

As you can see, the execution time increases linearly with the input size. This is great when working with small arrays, but if the input grows, you might want to rethink your approach.

The Power of Loops

Let’s move on to a slightly more complicated example. The key to recognizing Big O complexity lies in loops—they’re the most reliable indicator of how an algorithm scales with input size. Here's a new example:

const arr = [1, 3, 5, 5, 4, 6, 12, ...];
const addAllArrayElementsTwice = (arr) =>{
  let sum = 0;
  for(let i=0; i < arr.length; i++){
    sum += arr[i];
  }
  for(let i=0; i < arr.length; i++){
    sum += arr[i];
  }
  return sum;
}

In this case, we’re looping through the array twice. One loop adds all the elements, and the second one adds them all over again. So what’s the time complexity here? O(2n). But before you get excited thinking you’ve figured it out—hold up! We don’t care about constants in Big O. That means O(2n) is effectively just O(n).

Here’s a good tip: when analyzing an algorithm, think of the process as a whole. Even though we have two loops, it’s still linear, so the time complexity stays O(n).

Nested Loops — O(n²)

Now, let’s crank things up a bit. What happens if we add another nested loop inside the first one?

const arr = [1, 3, 5, 5, 4, 6, 12, ...];
const addAllArrayElementsTwice = (arr) =>{
  let sum = 0;
  for(let i=0; i < arr.length; i++){
    sum += arr[i];
    for(let j=0; j < arr.length; j++){
      sum += arr[j];
    }
  }
  return sum;
}

Here, the function does something interesting: for each element in the array, it loops through the array again and adds every element to the sum. This gives us O(n²) time complexity, also known as quadratic time complexity. The outer loop runs n times, and for each outer loop iteration, the inner loop runs n times. So, the total work done grows quadratically with the size of the input.

Want to make it worse? Add another nested loop and you’re looking at O(n³). The more nested loops, the higher the exponent.

Other Common Time Complexities

There are plenty of other important complexities you’ll encounter as you dive deeper into algorithms. Some of the most common include:

O(log n): This is usually seen in algorithms that divide the input in half at each step, like binary search.
O(n log n): You’ll often see this complexity in efficient sorting algorithms like Merge Sort or Quick Sort, where the input is divided into smaller chunks (log n) and then processed linearly (n).

Here's a quick reference to visualize the different complexities:

Wrapping It Up

Big O is a powerful tool for understanding how an algorithm behaves as the input grows. It allows us to make smarter decisions about which algorithms to use based on how they perform with large datasets. Whether it’s O(n), O(n²), or something more complex, knowing the time complexity can help us choose the right approach for solving problems.

Keep an eye on loops and nesting, and soon you’ll start seeing how Big O helps you predict algorithm performance with just a quick glance and make sure to explore more on your own when it comes to Big O Notation

A Guide To Custom Animations in Tailwind Css.

Jesse Price — Fri, 13 Sep 2024 06:30:20 +0000

Defining Animations in Tailwind CSS

To incorporate animations into your Tailwind CSS setup, you'll need to extend the theme in your tailwind.config.js file. Here’s how you can do it:

1. Extend Tailwind’s Configuration

You can add custom animations and keyframes to your Tailwind configuration like this:

// tailwind.config.ts
module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
        'fade-in': 'fadeIn 2s ease-out',
        'bounce-slow': 'bounce 2s infinite'
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        bounce: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-1rem)' }
        }
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

2. Apply Animations in Your TypeScript Components

Once you’ve defined your animations, you can use them in your Next.js components. Here’s an example of how to apply these animations:

// pages/index.tsx
import React from 'react';

const Home: React.FC = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-4xl font-bold mb-4 animate-fade-in">Welcome to My Next.js App</h1>
      <div className="animate-spin-slow">
        <img src="/spinner.svg" alt="Loading" />
      </div>
      <button className="mt-4 px-6 py-3 bg-blue-500 text-white rounded-lg animate-bounce-slow">
        Click Me
      </button>
    </div>
  );
};

export default Home;

By following these steps, you can create smooth and engaging animations for your web applications using Tailwind CSS.

Adding Dynamic Sitemaps to Next.js App Router Projects.

Jesse Price — Fri, 30 Aug 2024 02:00:28 +0000

Next.js 14 provided us with a simple way to take advantage of server side rendering and server actions. While this is one of my favorite additions to the modern framework, it does come with some adjustments that need to be made in the typical workflow. Thankfully, adding a dynamic sitemap is quite simple.

You may be asking why we aren't using the suggested method to dynamic sitemaps from Next.js. Well, If you are using server actions and the page where you are showing the blog post is using server side rendering, when you go to submit your sitemap to the google search console, you will find that google will not be able to fetch it. This is due to the sitemap being exclusive to the server. Furthermore, if you check on your deployed applications route for your sitemap, you may again find that your sitemap isn't showing like it does in your development environment. This is how I solved this issue.

Modern web applications built with Next.js require a dynamic approach to sitemaps. A sitemap helps search engines understand the structure and importance of your site's pages. While small applications with few pages might manage with a manual sitemap, larger applications with frequently updated content, like this website, require a programmatic solution to keep the sitemap updated.

First, install Next-sitemap.

npm i next-sitemap

Next, in your Next.js app create a new file app/server-sitemap.xml/route.ts:

import { getAllPosts } from '@/actions/actions'
import { getServerSideSitemap } from 'next-sitemap'

export async function GET(request: Request) {
  // Method to source urls from cms
  const urls = await getAllPosts()

  const post = urls?.map((post:any) =>{
    return{
        loc: `https://www.example.com/blog/${post?.slug}`,
        lastmod: post?.updatedAt.toISOString()
    }
  })
  return getServerSideSitemap([
    {
      loc: `https://example.com`,
      lastmod: new Date().toISOString(),
      // changefreq
      // priority
    },
    ...post
  ])
}

I have a server action set up

getAllPosts()

that returns all of the blog posts. This could be your pictures or products, really whatever you want. You could also grab this from your api if you aren't using server actions.

Then we just map over each post, and add the url of each post and when it was last modified to an array I named post.

Finally we return the sitemap with the base url, then we spread each of the post objects in with it.

Now, if your project is running, head to

http://localhost:3000/server-sitemap.xml

and you should see your sitemap.

Conclusion

Writing web applications in Next.js with server side rendering paired with server actions will be my approach to development for the near future. Given the dynamic approach to using really any framework, it's important to keep in mind that solving problems like adding a sitemap may require a little bit more effort than using built-in features.

If you are interested in learning more aspects of SEO like keyword metadata, more reading is available on adding SEO to a Next.js project.