DEV Community: Damien Sedgwick

Napp: Don't Get Caught Sleeping On Your Stack

Damien Sedgwick — Mon, 08 Apr 2024 12:29:55 +0000

What if I told you, that you did not need React, NextJS, Vue, Angular or any of the majorly popular frontend frameworks to build a dynamic web application?

I am going to assume, that unless you have been living under a rock, most of you would have heard of HTMX by now. If you have not heard of it, do you even dev bro?

Anyway, to get to the point, and the meat of this post, I want to stretch the limits of what is possible when building a web application without one of the big JavaScript names or web frameworks.

I did however recognise, there would be various steps I would need to complete for every project I was about to embark on the journey of building.

So I came up with 'Napp' - Which is an abbreviation of Nano App, a term I am using to describe a web application that has a very small footprint and I decided that like any good developer, I would procrastinate building an actual project and first build a project generator.

Napp bootstraps a new application for you by creating a project, necessary files and connects them all up so you can dive straight into building your application.

It has no opinion on how you structure your project, whether you want 50 directories or just 3. It enables you to get a new project, utilising Go, HTMX and SQLite put together in around 60 seconds or so, which is Blazingly Fast - So Prime!

The idea is, for me at least, I want to be able to focus on building whatever it is I have convinced myself is going to make me wealthy af vs having to decide if my directories should have an index.ts to re-export my exports or not.

So, I have just generated 2 projects, ready to develop a a little further and I have them both deployed and using a persisted SQLite database so that I can prototype my idea, and start collecting user feedback.

If you are interested in learning more here are some links:

I am unsure on if there is anything more I am going to add to the generator at this point. Maybe I will put user auth back in there and have a user flow ready to go. I will however being doing a deployment post pretty soon to show how I got them deployed nice and quickly using Fly.io

When you are writing code, do you "align the happy path to the left"?

Damien Sedgwick — Wed, 20 Mar 2024 17:42:06 +0000

The two code snippets in this post (which are images to help highlight the indent columns) are identical in terms of desired outcome, but they could not be any more different in terms of readability, cognitive load and maintainability.

Unnecessarily nested code is not something new to myself, but this idea of aligning the happy path to the left, is a new way of thinking about it for me.

Let's first look at some deeply nested code where the happy path is not aligned to the left. You will see there are 4 columns to reason about when trying to understand the potential outcomes.

But why is it important?

The amount of time we spending reading code is far greater than the amount of time we spending writing code. So we should be doing all we can to enable ourselves to be able to quickly scan down one column to be able to see the expected execution flow.

So let's look at the same code, but with the happy path aligned to the left.

Try aligning your happy path to the left in your next project and see how much easier it is to read your code.

Finally, the code snippets were taken from the book: 100 Go Mistakes and How to Avoid Them by Teiva Harsanyi - I recommend checking it out.

ChatGPT - Complex Coding Challenges: The End

Damien Sedgwick — Sun, 26 Mar 2023 18:09:17 +0000

Sadly, after spending some time trying to get ChatGPT to solve Making a spiral today, a 3 KYU rank kata on Codewars.

I decided to call it a day because I was not able to achieve the desired outcome.

Initially I thought starting with JavaScript would be the smart option as it has seemed to do better historically with this language. However, that was not the case!

If you would like to see a similar type of challenge to the examples given in this series, leave a comment and let me know what!

ChatGPT - Complex Coding Challenges: 4 KYU

Damien Sedgwick — Mon, 20 Mar 2023 20:47:51 +0000

Hello folks!

So I know from personal experience, this is where the coding problems start to become a little more difficult!

Lets check out the following problem:

Write a function called sumIntervals/sum_intervals that accepts an array of intervals, and returns the sum of all the interval lengths. Overlapping intervals should only be counted once.

Intervals
Intervals are represented by a pair of integers in the form of an array. The first value of the interval will always be less than the second value. Interval example: [1, 5] is an interval from 1 to 5. The length of this interval is 4.

Overlapping Intervals
List containing overlapping intervals:

[
   [1, 4],
   [7, 10],
   [3, 5]
]
The sum of the lengths of these intervals is 7. Since [1, 4] and [3, 5] overlap, we can treat the interval as [1, 5], which has a length of 4.

Examples:
sumIntervals( [
   [1, 2],
   [6, 10],
   [11, 15]
] ) => 9

sumIntervals( [
   [1, 4],
   [7, 10],
   [3, 5]
] ) => 7

sumIntervals( [
   [1, 5],
   [10, 20],
   [1, 6],
   [16, 19],
   [5, 11]
] ) => 19

sumIntervals( [
   [0, 20],
   [-100000000, 10],
   [30, 40]
] ) => 100000030

Tests with large intervals
Your algorithm should be able to handle large intervals. All tested intervals are subsets of the range [-1000000000, 1000000000].

As you can see, this challenge has quite the intro! As always I will paste this into ChatGPT whilst asking it to solve the probably whilst being as accurate as possible and not to make any mistakes.

Solving it in C

Attempt #1

#include <stdlib.h>
#include <stdbool.h>

struct interval {
    int first;
    int second;
};

int sum_intervals(const struct interval *v, size_t n)
{
    const int MAX = 2000000000;
    const int OFFSET = 1000000000;

    // create a bitmap to store the coverage of each position
    bool *coverage = calloc(MAX, sizeof(bool));
    if (!coverage) {
        return -1; // error: unable to allocate memory
    }

    // iterate over the intervals, setting their coverage in the bitmap
    for (size_t i = 0; i < n; i++) {
        int start = v[i].first + OFFSET;
        int end = v[i].second + OFFSET;
        for (int j = start; j < end; j++) {
            coverage[j] = true;
        }
    }

    // iterate over the bitmap, counting the covered positions
    int count = 0;
    for (int i = 0; i < MAX; i++) {
        if (coverage[i]) {
            count++;
        }
    }

    // release the memory allocated for the coverage bitmap
    free(coverage);

    return count;
}

Attempt #2

#include <stdbool.h>
#include <stdlib.h>

struct interval {
    int first;
    int second;
};

int sum_intervals(const struct interval *v, size_t n)
{
    const int MAX = 200000001;
    bool *coverage = calloc(MAX, sizeof(bool));
    if (!coverage) {
        return -1; // error: unable to allocate memory
    }

    for (size_t i = 0; i < n; i++) {
        int start = v[i].first + 100000000;
        int end = v[i].second + 100000000;
        for (int j = start; j < end; j++) {
            coverage[j] = true;
        }
    }

    int count = 0;
    for (int i = 0; i < MAX; i++) {
        if (coverage[i]) {
            count++;
        }
    }

    free(coverage);

    return count;
}

Attempt #3

#include <stdbool.h>
#include <stdlib.h>

struct interval {
    int first;
    int second;
};

int sum_intervals(const struct interval *v, size_t n) {
    // find the maximum and minimum values of the intervals
    int max_val = v[0].second;
    int min_val = v[0].first;
    for (size_t i = 1; i < n; i++) {
        if (v[i].second > max_val) {
            max_val = v[i].second;
        }
        if (v[i].first < min_val) {
            min_val = v[i].first;
        }
    }

    // allocate an array to store the coverage of each position
    bool *coverage = calloc(max_val - min_val, sizeof(bool));
    if (!coverage) {
        return -1; // error: unable to allocate memory
    }

    // iterate over the intervals, adding their coverage to the array
    for (size_t i = 0; i < n; i++) {
        int start = v[i].first;
        int end = v[i].second;
        for (int j = start - min_val; j < end - min_val; j++) {
            coverage[j] = true;
        }
    }

    // iterate over the array, counting the covered positions
    int count = 0;
    for (int i = 0; i < max_val - min_val; i++) {
        if (coverage[i]) {
            count++;
        }
    }

    // release the memory allocated for the coverage array
    free(coverage);

    return count;
}

Sadly, ChatGPT was not able to solve this particular problem using C with the information I had provided.

Solving it in Haskell

Attempt #1

module SumOfIntervals (sumOfIntervals) where

import Data.List (sort)

sumOfIntervals :: [(Int, Int)] -> Int
sumOfIntervals xs = go $ sort $ concatMap (\(a, b) -> [a..b-1]) xs
    where go [] = 0
          go [x] = 1
          go (x:y:xs)
            | y == x+1 = go (y:xs)
            | otherwise = 1 + go (y:xs)

Attempt #2

module SumOfIntervals (sumOfIntervals) where

import Data.List (sort)

sumOfIntervals :: [(Int, Int)] -> Int
sumOfIntervals intervals = sum $ map length $ mergeOverlapping intervals

mergeOverlapping :: [(Int, Int)] -> [(Int, Int)]
mergeOverlapping intervals = foldr merge [] (sort intervals)
  where merge x [] = [x]
        merge x ((y1,y2):ys) | x1 <= y2 = merge (y1,max x2 y2) ys
                             | otherwise = x:(y1,y2):ys
          where (x1,x2) = x

Attempt #3

module SumOfIntervals (sumOfIntervals) where

import Data.List (sort)

sumOfIntervals :: [(Int, Int)] -> Int
sumOfIntervals = sum . map length . mergeOverlappingIntervals . sortIntervals
  where
    sortIntervals = sort . map sortInterval
    sortInterval (x, y) = if x <= y then (x, y) else (y, x)

    mergeOverlappingIntervals [] = []
    mergeOverlappingIntervals [x] = [x]
    mergeOverlappingIntervals ((x1, y1):(x2, y2):xs)
      | y1 >= x2 = mergeOverlappingIntervals ((x1, max y1 y2):xs)
      | otherwise = (x1, y1) : mergeOverlappingIntervals ((x2, y2):xs)

Again, sadly, ChatGPT was not able to solve this particular problem using Haskell with the information I had provided.

Time for our lord and saviour, JavaScript

Solving it in JavaScript

Attempt #1

function sumIntervals(intervals) {
  // Initialize an empty array to store the merged intervals
  let mergedIntervals = [];

  // Sort the intervals by their start values
  intervals.sort((a, b) => a[0] - b[0]);

  // Merge the intervals
  for (let i = 0; i < intervals.length; i++) {
    let currentInterval = intervals[i];

    // If the mergedIntervals array is empty or if the current interval doesn't overlap with the last interval in the array, add it to the mergedIntervals array
    if (mergedIntervals.length === 0 || currentInterval[0] > mergedIntervals[mergedIntervals.length - 1][1]) {
      mergedIntervals.push(currentInterval);
    }

    // If the current interval overlaps with the last interval in the mergedIntervals array, merge them by updating the end value of the last interval in the array
    else if (currentInterval[1] > mergedIntervals[mergedIntervals.length - 1][1]) {
      mergedIntervals[mergedIntervals.length - 1][1] = currentInterval[1];
    }
  }

  // Calculate the sum of the interval lengths
  let sum = 0;
  for (let i = 0; i < mergedIntervals.length; i++) {
    sum += mergedIntervals[i][1] - mergedIntervals[i][0];
  }

  return sum;
}

Would you Adam and Eve it, we have a first time solution with JavaScript! The above code passed without any issues or complications!

I truly thought this was going to be the last article in this series but we live to fight another day! Next time, rank 3 KYU.

Catch you then.

ChatGPT - Complex Coding Challenges: 5 KYU

Damien Sedgwick — Mon, 13 Mar 2023 18:28:22 +0000

Good afternoon!

Let's get busy putting ChatGPT through it's AI acrobatics shall we!

The problem we are going to be looking at today is the following:

Write a function, which takes a non-negative integer (seconds) as input and returns the time in a human-readable format (HH:MM:SS)

HH = hours, padded to 2 digits, range: 00 - 99
MM = minutes, padded to 2 digits, range: 00 - 59
SS = seconds, padded to 2 digits, range: 00 - 59
The maximum time never exceeds 359999 (99:59:59)

You can find some examples in the test fixtures.

Now as the fixtures will likely be different for each language we are going to use today, I will not bother sharing them but for the purpose of this exercise, each time I ask ChatGPT to solve the puzzle, I will provide it the fixtures.

Solving it in Haskell

humanReadable :: Int -> String
humanReadable seconds =
  let hours = seconds `div` 3600
      minutes = (seconds `div` 60) `mod` 60
      secs = seconds `mod` 60
  in pad hours ++ ":" ++ pad minutes ++ ":" ++ pad secs
  where pad n = if n < 10 then "0" ++ show n else show n

I am going to be honest, I wasn't expecting this to pass first time but it did! Solid work there from our pair programming AI.

Solving it in JavaScript

function humanReadable(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;

  return pad(hours) + ':' + pad(minutes) + ':' + pad(secs);
}

function pad(num) {
  return (num < 10 ? '0' : '') + num;
}

Another first time success for JavaScript in this instance, let's move on and see what we can C, C, C

Solving it in C

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdbool.h>

void do_test(unsigned seconds, const char *expected);

void human_readable(unsigned seconds, char* output) {
    unsigned hours = seconds / 3600;
    unsigned minutes = (seconds / 60) % 60;
    unsigned secs = seconds % 60;

    snprintf(output, 9, "%02u:%02u:%02u", hours, minutes, secs);
}

void do_test(unsigned seconds, const char *expected) {
    char actual[9];
    human_readable(seconds, actual);
    cr_assert_str_eq(actual, expected);
}

Above is the first attempt, I wrote the question exactly the same as I had the previous two times but here we hit our first failure.

This code did not pass so I went back and asked ChatGPT to try again and provided it with the following function stub:

char *human_readable_time (unsigned seconds, char *time_string)
{
    *time_string = '\0'; // write to time_string
    return time_string; // return it
}

A few seconds later I had a new solution to try:

#include <stdio.h>

char *human_readable_time(unsigned seconds, char *time_string) {
    int hours = seconds / 3600;
    int minutes = (seconds / 60) % 60;
    int remaining_seconds = seconds % 60;
    sprintf(time_string, "%02d:%02d:%02d", hours, minutes, remaining_seconds);
    return time_string;
}

This solution passed and all was well!

I appreciate that these may not be the most exciting of articles I am writing at the moment but we are doing the software community a great service in conducting some pretty trivial scientific research!

Catch you all on the next one!

ChatGPT - Complex Coding Challenges: 6 KYU

Damien Sedgwick — Tue, 07 Mar 2023 20:16:13 +0000

Hello and welcome back to this series where we put ChatGPT through its paces!

We have a slight change in direction this time around because we have swapped out SQL with Haskell.

So before we start, here is the challenge Array.diff

The instructions and description is as follows:

Your goal in this kata is to implement a difference function, which subtracts one list from another and returns the result.

It should remove all values from list a, which are present in list b keeping their order.

arrayDiff([1,2],[1]) == [2]

If a value is present in b, all of its occurrences must be removed from the other:

arrayDiff([1,2,2,2,3],[2]) == [1,3]

Lets get started.

Solving it in JavaScript

function arrayDiff(a, b) {
  return a.filter((value) => !b.includes(value));
}

A very concise and simple solution, that passes all tests.

Solving it in C

#include <stdlib.h>

int* array_diff(const int* arr1, size_t n1, const int* arr2, size_t n2, size_t* z) {
    int* result = malloc(n1 * sizeof(int));
    size_t count = 0;
    for (size_t i = 0; i < n1; i++) {
        int found = 0;
        for (size_t j = 0; j < n2; j++) {
            if (arr1[i] == arr2[j]) {
                found = 1;
                break;
            }
        }
        if (!found) {
            result[count++] = arr1[i];
        }
    }
    *z = count;
    return realloc(result, count * sizeof(int));
}

The solution for C is very verbose in comparison, however, it too passes all of the tests.

Solving it in Haskell

module Difference where

difference :: Eq a => [a] -> [a] -> [a]
difference a b = filter (`notElem` b) a

Another more concise solution and more passed tests!

It feels like it has been a bit easier this time around even though the level of difficulty has been increased.

I wonder if it is due to my questioning getting better and more refined or if something else is at play here.

ChatGPT - Complex Coding Challenges: 7 KYU

Damien Sedgwick — Fri, 03 Mar 2023 23:37:24 +0000

Hello there!

Today we are back with the second article of this series in which we put ChatGPT to the test and without me waffling on any further, lets take a look at the challenge.

Here is the challenge Sum of odd numbers

Followed by the instructions and examples:

Given the triangle of consecutive odd numbers:

             1
          3     5
       7     9    11
   13    15    17    19
21    23    25    27    29
...
Calculate the sum of the numbers in the nth row of this triangle (starting at index 1) e.g.: (Input --> Output)

1 -->  1
2 --> 3 + 5 = 8

Not a great deal to go off of, but simple enough that ChatGPT should not struggle... I think.

Solving it in JavaScript

function rowSumOddNumbers(n) {
     // Calculate the starting number for the nth row
  let start = (n * (n - 1)) + 1;

  // Calculate the sum of the numbers in the nth row
  let sum = 0;

  for (let i = 0; i < n; i++) {
    sum += start + (2 * i);
  }

  return sum;
}

Running the above code makes all tests pass!

Solving it in C

#include <inttypes.h>

uint64_t rowSumOddNumbers(uint32_t n) {
    uint64_t start_num = 1, sum = 0;

    // Calculate the starting number of the nth row
    for (uint32_t i = 1; i < n; i++) {
        start_num += 2 * i;
    }

    // Calculate the sum of the numbers in the nth row
    for (uint32_t i = 0; i < n; i++) {
        sum += start_num + 2 * i;
    }

    return sum;
}

It took 2 attempts for the C implementation to be correct however I think the issue was not starting a new prompt with ChatGPT

Solving it in SQL

SELECT SUM(nums.num) as sum_of_row
FROM 
  (SELECT ((n-1)*(n-1)+1) as num 
   FROM nums WHERE n = [input row number]) as nums
UNION ALL
SELECT SUM(nums.num) as sum_of_row
FROM 
  (SELECT ((n-1)*(n-1)+1) as num 
   FROM nums WHERE n = [input row number]) as nums
  JOIN 
  (SELECT ((n-1)*(n-1)+1) as num 
   FROM nums WHERE n = [input row number]-1) as nums_prev
  ON nums_prev.num < nums.num AND nums_prev.num % 2 = 1

After many attempts, I could not get ChatGPT to understand what it needed to do in order to pass this challenge.

Even before testing the SQL solution I have a feeling it is wrong because it is writing very verbose solutions to what I feel should be quite trivial at this point.

Maybe we will continue with SQL, maybe not. It depends on whether or not I figure out this current challenge!

ChatGPT - Complex Coding Challenges: 8 KYU

Damien Sedgwick — Wed, 01 Mar 2023 17:29:53 +0000

Time for the first challenge in this series!

Well actually, the first challenge was picking a language to use for this little experiment.

As I could not decide between choosing something familiar or something I do not know, I have decided to choose 3 languages for each task!

So we have JavaScript, C and SQL and each challenge will be attempted using all 3 of these.

Talking of our first challenge, here it is: Century From Year

This challenge has the following description.

Introduction
The first century spans from the year 1 up to and including the year 100, the second century - from the year 101 up to and including the year 200, etc.

Task
Given a year, return the century it is in.

Examples
1705 --> 18
1900 --> 19
1601 --> 17
2000 --> 20

Note: this kata uses strict construction as shown in the description and the examples, you can read more about it here

So let's put ChatGPT to work!

Solving it in JavaScript

Given the following code challenge:

Introduction
The first century spans from the year 1 up to and including the year 100, the second century - from the year 101 up to and including the year 200, etc.

Task
Given a year, return the century it is in.

Examples
1705 --> 18
1900 --> 19
1601 --> 17
2000 --> 20

Can you show me how to solve this using JavaScript

To which ChatGPT replied with:

function century(year) {
  // Check if the year is exactly divisible by 100
  if (year % 100 === 0) {
    // If yes, return the century by dividing the year by 100
    return year / 100;
  } else {
    // If not, round up the year to the nearest century using Math.ceil() and divide by 100
    return Math.ceil(year / 100);
  }
}

Which if I paste into Codewars, actually passes first time!

Not bad.

Solving it in C

I then asked if it could rewrite this so that it would work in C and it responded with the following code:

#include <stdio.h>
#include <math.h>

int century(int year) {
  // Check if the year is exactly divisible by 100
  if (year % 100 == 0) {
    // If yes, return the century by dividing the year by 100
    return year / 100;
  } else {
    // If not, round up the year to the nearest century using ceil() and divide by 100
    return ceil((double)year / 100);
  }
}

This passed all of the tests, also on its first attempt!

Solving it in SQL

CREATE FUNCTION century (year INT)
RETURNS INT
BEGIN
  -- Check if the year is exactly divisible by 100
  IF year % 100 = 0 THEN
    -- If yes, return the century by dividing the year by 100
    RETURN year / 100;
  ELSE
    -- If not, round up the year to the nearest century using CEILING() and divide by 100
    RETURN CEILING(year / 100.0);
  END IF;
END;

The above is the first attempt at solving this challenge using SQL and it failed the tests.

So that these challenges do not go on forever, I am going to limit each language to a maximum of 3 tries. 2 more to go in that case!

I then asked:

That solution returned a lot of syntax errors. I have pasted some of them below, do you think you could try and write a solution again using SQL.

PG::SyntaxError: ERROR:  syntax error at or near "BEGIN"
LINE 3: BEGIN
        ^
PG::SyntaxError: ERROR:  syntax error at or near "BEGIN"
LINE 3: BEGIN
        ^

If it helps, here are the test cases

items = DB[:years]

basic_tests = [
  [1705, 18],
  [1900, 19],
  [1601, 17],
  [2000, 20],
  [356, 4],
  [89, 1]
]

basic_tests.each do |x|
  items.insert(:yr => x[0])
end

results = run_sql.to_a

describe :basic_tests do
  basic_tests.each_with_index do |x, i|
    it "Test for year #{x[0]}" do
      expect(results[i][:century]).to eq x[1]
    end
  end
end

To which it replied with the following:

CREATE OR REPLACE FUNCTION century (year INT)
RETURNS INT AS $$
BEGIN
  -- Check if the year is exactly divisible by 100
  IF year % 100 = 0 THEN
    -- If yes, return the century by dividing the year by 100
    RETURN year / 100;
  ELSE
    -- If not, round up the year to the nearest century using CEILING() and divide by 100
    RETURN CEILING(year / 100.0);
  END IF;
END;
$$ LANGUAGE plpgsql;

Which also failed, down to are last attempt.

I told ChatGPT the following:

That also failed every single test case. Here is the error, can you try again with this information:

./spec/query_spec.rb:20:in `block (3 levels) in <top (required)>': undefined method `[]' for nil:NilClass (NoMethodError)

It then gave me this:

CREATE OR REPLACE FUNCTION century (year INT)
RETURNS INT AS $$
BEGIN
  -- Check if the year is exactly divisible by 100
  IF year % 100 = 0 THEN
    -- If yes, return the century by dividing the year by 100
    RETURN year / 100;
  ELSE
    -- If not, round up the year to the nearest century using CEILING() and divide by 100
    RETURN CEILING(year / 100.0);
  END IF;
END;
$$ LANGUAGE plpgsql;

Which sadly also failed.

Moving forward I think it may be the case that we only use JavaScript and C as it is not looking great for SQL at this moment in time!

I do wonder if the SQL dialect (Is that a thing) was correct and if that was indeed the issue but upon checking, it was for Postgres which ChatGPT seemed to have figured out.

Any tips on improving the SQL guidance would be appreciated and I would try again to use SQL in this little experiment.

A few moments later

After a discussion with a friend, it would seem that ChatGTP could easily solve the problem.

The issue was that I was asking in one continuous thread which meant it was trying to take a function written in C and write it in SQL.

When asking from scratch, it gave the following code:

SELECT CEILING(yr/100.0) AS century
FROM years

Which actually passes.

So SQL is back in the game and going forward, each language will be a fresh start in terms of questioning ChatGPT.

Using ChatGPT To Solve Complex Coding Challenges

Damien Sedgwick — Wed, 01 Mar 2023 14:11:01 +0000

This is the start of a new series where I am going to put ChatGPT through its paces as a pair programming assistant.

Except I am going to be the worst programming partner ever!

I am going to be using the platform codewars for the each of the coding challenges.

Starting at the easiest level (8 KYU), I am going to take the instructional text, examples and any other information provided and paste it in to ChatGPT.

I am then going ask for it to solve the problem. Relaying any errors encountered and providing further prompts until it passes the coding challenge.

This post is little more than an introduction but keep an eye out for the next post in the series that will be out in the next day or so!

Remove Duplicate Elements From An Array In JavaScript / TypeScript

Damien Sedgwick — Sun, 26 Feb 2023 20:16:15 +0000

I realise it has been a minute since I have last posted anything and in an attempt to try and get myself posting again, I have a very quick tip to share with you all for removing duplicated elements from an array in JavaScript or TypeScript.

Check it out!

const duplicates = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5];

const dedupe = <T>(arr: T[]) => Array.from(new Set(arr));

const unique = dedupe(array);

console.log(unique) // [1, 2, 3, 4, 5]

That's it! How incredibly simple right?

Now because we have used generics, our unique array will be benefit from some lovely type inference!

What do you think?

Let me know if you have any quick and easy methods to achieve the above.

NB. Generics are unique to TypeScript if you are unaware. This means you would want to remove them if you are just using JavaScript.

How To Generate A 'Blazing Fast' .gitignore File

Damien Sedgwick — Thu, 24 Nov 2022 10:10:03 +0000

This article is a bit of a shameless plug (aren't they all), it is to promote a little command line utility that I created that enables the user to generate a .gitignore file from the terminal.

Why is this useful?

This could largely be a 'me' problem, but it really annoys me when I have created a new project and pushed it to Github, to only go and see unwanted files or directories in my lovely new repository.

In comes Toptal's .gitignore generator. This is a super handy way of creating .gitignore files for a wide range of use cases.

I have been using the above website for quite a while and whilst I find it easy, it does annoy me that I have to visit the browser, enter the terms and then copy / pasta them into a .gitignore file.

The solution

The solution is a small command line utility built with Rust.

It is very simple.

All you have to do is enter the command gig (naming things is hard) and the program will prompt you for some space separated terms.

It then goes off and fetches the generated .gitignore file and places it within the current directory.

If you would like to check it out or take it for a spin, here are the links:

Source

Latest Releases

Getting Started With Next, Firebase & Tailwind

Damien Sedgwick — Wed, 05 Oct 2022 15:05:56 +0000

Today we are going to be walking through setting up a NextJS project with protected routes using Firebase Authentication and TailwindCSS for styling.

The full code for this can be found in this repository where you can clone the repository down or use some of the code as you please.

Lets start by creating a new project using Next and Typescript by running the following command:

npx create-next-app@latest --ts

Next we are going to install all of the dependencies for the project:

npm i firebase
npm i -D tailwindcss postcss autoprefixer

Now that we have installed the dependencies, we want to delete all of the default scaffolding that comes with the project.

All we want to be left with is src/pages/_app.tsx, src/pages/index.tsx and src/styles/index.css which we have placed within a src directory.

We also want to strip the previous code out of index.tsx so that it no longer relies on any of the resources we have deleted. It should look like this:



import type { NextPage } from 'next'

const Home: NextPage = () => {
  return (
      <div>
        <h1>Hello, World!</h1>
      </div>
  )
}

export default Home

Time to setup Firebase and Tailwind.

Firebase

For Firebase, we want to navigate to the Firebase Console where we will want to click on add project.

This will walk you through creating a new project.

Once this has been done, we want to enable registration / logging in with a email and password.

Navigate to the project home by clicking the little home icon on the left hand side.

You should be presented with a page that has the following at the top:

Click authentication, then navigate to Sign-in Method and select Email and Password, toggle this provider on.

Great! Our users will now be able to register and login to our application.

The last step for configuring Firebase at this point is to click the little settings cog icon and navigate to your project settings.

From here, if we scroll down, we will come across some code that looks like the following:



// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "<application-secret>",
  authDomain: "<application-secret>",
  projectId: "<application-secret>",
  storageBucket: "<application-secret>",
  messagingSenderId: "<application-secret>",
  appId: "<application-secret>"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

Now we want to change this so that it takes advantage of using our .env.local file.

Replace the above example with the following and paste it in to a new file src/utils/firebase.ts



import { initializeApp } from "firebase/app";
import { getAuth } from "@firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

Then in our .env.local file, paste the following code:



NEXT_PUBLIC_FIREBASE_API_KEY="your-secret"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="your-secret"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="your-secret"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="your-secret"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="your-secret"
NEXT_PUBLIC_FIREBASE_APP_ID="your-secret"

That is all we need to do at the moment for setting up Firebase!

Tailwind

For Tailwind, we want to run the following command:

npx tailwindcss init -p

This will create a couple of files for us, the only one we need to worry about at the moment is tailwind.config.js

Navigate to this file and paste the following code in:



/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Great! Now we just want to add the @tailwind directives to our global css file (index.css) so it should look like the following:



@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, #__next {
    height: 100%;
}

We should now have access to tailwind throughout our project which will enable us to style our application quickly, and easily.

Now that we have everything (more or less) setup, we are going to talk about the flow behind protected routes and how we are going to securing them.

NextJS uses file based routing. This means that by default, all pages created, will be publicly visible.

We want to prevent this in our application and we are going to do this by creating a new component called ProtectedRoute.tsx and that will look like this:



import React, { ReactNode, useEffect } from "react";
import { useRouter } from "next/router";
import { useAuth } from "context/AuthContext";

interface ProtectedRouteProps {
  children: ReactNode;
}

const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
  const { user } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!user) {
      router.push("/login");
    }
  }, [router, user]);

  return <>{user ? children : null}</>;
};

export default ProtectedRoute;

We are then going to take this component and use it within our _app.tsx like so:



import type { AppProps } from "next/app";
import { useRouter } from "next/router";
import "styles/globals.css";
import { AuthProvider } from "context/AuthContext";
import ProtectedRoute from "components/ProtectedRoute";

const protectedRoutes = ["/dashboard"];

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  return (
    <AuthProvider>
      {protectedRoutes.includes(router.pathname) ? (
        <ProtectedRoute>
          <Component {...pageProps} />
        </ProtectedRoute>
      ) : (
        <Component {...pageProps} />
      )}
    </AuthProvider>
  );
}

export default MyApp;

So what we have done here is created an array of route paths that should be protected, then checked to see if the path being navigated to is included in that array.

If it is included, we render the default <Component {...pageProps} /> provided by NextJS within our ProtectedRoute /> component which will then check for a user.

If there is an active session for this user within Firebase, they will be allowed to navigate to the protected route.

Otherwise they will be redirected to the login page where they can login or register if they do not have an account.

So now that we have a mechanism in place for protecting our routes, we want to enable it and you might have noticed this line within our <ProtectedRoute /> component: const { user } = useAuth() - Lets explore that further.

We need a way to manage user sessions, or at least track them because Firebase will actually manage them in some length for us.

We are going to create a new file called src/context/AuthContext.tsx and paste the following code in:



import {
  createContext,
  ReactNode,
  useContext,
  useState,
  useEffect,
} from "react";
import {
  createUserWithEmailAndPassword,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut,
  UserCredential,
} from "@firebase/auth";
import { auth } from "utils/firebase";

const AuthContext = createContext<{
  user: {
    uid: string;
    email: string | null;
    displayName: string | null;
  } | null;
  loading: boolean;
  login: (email: string, password: string) => Promise<UserCredential>;
  logout: () => Promise<void>;
  register: (email: string, password: string) => Promise<UserCredential>;
}>({
  user: null,
  loading: true,
  login: (email: string, password: string) =>
    signInWithEmailAndPassword(auth, email, password),
  logout: () => Promise.resolve(),
  register: (email, password) =>
    createUserWithEmailAndPassword(auth, email, password),
});

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [loading, setLoading] = useState<boolean>(true);
  const [user, setUser] = useState<{
    uid: string;
    email: string | null;
    displayName: string | null;
  } | null>(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        setUser({
          uid: user.uid,
          email: user.email,
          displayName: user.displayName,
        });
      } else {
        setUser(null);
      }

      setLoading(false);
    });

    return () => unsubscribe();
  }, []);

  const login = (email: string, password: string) => {
    return signInWithEmailAndPassword(auth, email, password);
  };

  const logout = async () => {
    setUser(null);

    return await signOut(auth);
  };

  const register = (email: string, password: string) => {
    return createUserWithEmailAndPassword(auth, email, password);
  };

  return (
    <AuthContext.Provider value={{ loading, user, login, logout, register }}>
      {loading ? null : children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);

  if (context === undefined) {
    throw new Error("useCount must be used within a CountProvider");
  }

  return context;
};

There is quite a lot of code to digest in that snippet but I will do my best to summarise what is happening above.

We create a new context object using createContext and we declare the shape of our context data within the kissing crocodiles <> followed by an object for default values.
We then create an AuthProvider which will allow us to track state and we create a few functions that can be passed into our context so that we can use them elsewhere.
Finally wrap our context in a custom hook called useAuth and export it.

There is an important bit to point out in the above snippet however and that is the code within our useEffect.

This is important because this is what we will use to track whether there is an active Firebase user or not.

Believe it or not, that is pretty much all you need to setup Firebase auth and protected routes within a NextJS application.

Building out the rest of the application

As I mentioned earlier, you can find all of the code in this repository but we still have some work to do yet before we can fully test our new application.

Firstly, we want to create a <Layout /> and <Header /> component so that we can share some styles and navigation links throughout the application.

I will post the code for those below:



// src/layout/index.tsx
import { ReactNode } from "react";
import { Header } from "components/Header";

interface LayoutProps {
  children: ReactNode;
}

export const Layout = ({ children }: LayoutProps) => {
  return (
    <div>
      <Header />
      {children}
    </div>
  );
};

and



// src/components/Header.tsx
import Link from "next/link";
import { useAuth } from "context/AuthContext";
import { useRouter } from "next/router";

export const Header = () => {
  const { user, logout } = useAuth();
  const router = useRouter();

  return (
    <div className="py-4  border-b-2 border-gray-900">
      <header className="container mx-auto flex flex-row items-center justify-between">
        <h1 className="px-4">
          <Link href="/">
            <a>NFT</a>
          </Link>
        </h1>

        <ul className="flex flex-row items-center justify-between">
          <li className="px-4">
            <Link href="/">
              <a>Home</a>
            </Link>
          </li>

          <li className="px-4">
            <Link href="/dashboard">
              <a>Dashboard</a>
            </Link>
          </li>
          <li className="px-4 border-l-2 border-gray-900">
            {user ? (
              <button
                type="button"
                onClick={async () => {
                  try {
                    await logout();
                    await router.push("/login");
                  } catch (error) {
                    console.log(error);
                  }
                }}
              >
                Logout
              </button>
            ) : (
              <Link href="/login">
                <a>Login</a>
              </Link>
            )}
          </li>
        </ul>
      </header>
    </div>
  );
};

Beautiful! That will make navigation easier and the header styling consistent.

The last thing we need to do is create all of our pages for which we can use the following commands:

cd src && mkdir dashboard login register

and whilst still in our src directory:

touch dashboard/index.tsx login/index.tsx register/index.tsx

The code for each page is below:



// src/dashboard/index.tsx
import type { NextPage } from "next";
import { Layout } from "layout";

const Dashboard: NextPage = () => {
  return (
    <Layout>
      <main className="p-4">
        <div className="container mx-auto">
          <h1 className="text-2xl text-center">Your Dashboard</h1>
          <p className="mt-4 text-lg text-center">
            ⚠️⚠️ This should be a protected route and only accessible when there
            is a user ⚠️⚠️
          </p>
        </div>
      </main>
    </Layout>
  );
};

export default Dashboard;



// src/login/index.tsx
import { useState } from "react";
import type { NextPage } from "next";
import Link from "next/link";
import { Layout } from "layout";
import { useRouter } from "next/router";
import { useAuth } from "../../context/AuthContext";

const Login: NextPage = () => {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  const { login } = useAuth();
  const router = useRouter();

  return (
    <Layout>
      <main className="p-4">
        <div className="container mx-auto">
          <h1 className="text-2xl text-center">Login To Your Account</h1>
          <form
            className="w-3/4 max-w-md mt-4 mx-auto"
            onSubmit={async (e) => {
              e.preventDefault();

              try {
                await login(email, password);
                await router.push("/dashboard");
              } catch (error) {
                console.log(error);
              }
            }}
          >
            <div className="mb-4">
              <label htmlFor="email" />
              <input
                className="w-full p-2 border-2 border-gray-900"
                name="email"
                type="text"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className="mb-4">
              <label htmlFor="password" />
              <input
                className="w-full p-2 border-2 border-gray-900"
                name="password"
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <div className="mb-4">
              <button
                className="w-full py-2 px-6 text-gray-50 bg-gray-900"
                type="submit"
              >
                Login
              </button>
            </div>
          </form>

          <p className="text-center">
            Need an account?{" "}
            <Link href="/register">
              <a>Register</a>
            </Link>
          </p>
        </div>
      </main>
    </Layout>
  );
};

export default Login;



// src/register/index.tsx
import { useState } from "react";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import { Layout } from "layout";
import { useAuth } from "context/AuthContext";

const Register: NextPage = () => {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  const { register } = useAuth();
  const router = useRouter();

  return (
    <Layout>
      <main className="p-4">
        <div className="container mx-auto">
          <h1 className="text-2xl text-center">Register Your Account</h1>
          <form
            className="w-3/4 max-w-md mt-4 mx-auto"
            onSubmit={async (e) => {
              e.preventDefault();

              try {
                await register(email, password);
                await router.push("/dashboard");
              } catch (error) {
                console.log(error);
              }
            }}
          >
            <div className="mb-4">
              <label htmlFor="email" />
              <input
                className="w-full p-2 border-2 border-gray-900"
                name="email"
                type="text"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className="mb-4">
              <label htmlFor="password" />
              <input
                className="w-full p-2 border-2 border-gray-900"
                name="password"
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>

            <div className="mb-4">
              <button
                className="w-full py-2 px-6 text-gray-50 bg-gray-900"
                type="submit"
              >
                Register
              </button>
            </div>
          </form>
        </div>
      </main>
    </Layout>
  );
};

export default Register;

Excellent! That should be everything we need!

If we quickly comeback to those additional functions we wrote, we can see that we are now using them in each of the forms to register or login and within the header to logout.

Now, if we have done everything correctly (and I haven't missed anything) we should now be able to run npm run dev to start our local dev server.

Navigating to dashboard by clicking on the link should redirect you to the login page.

As you do not yet have an account, click the link to register and fill in your details.

Upon successful creation, the application should now login and redirect you to the dashboard.

That is everything! I hope you've found this article helpful!

You can refresh, close the tab and open it again and your session will still be active!