DEV Community: Aaron Wolf

The URL Object

Aaron Wolf — Thu, 10 Oct 2024 12:22:22 +0000

Overview

The URL object in JavaScript provides a way to work with and manipulate URLs easily. It’s particularly useful when you need to construct, parse, or modify URLs within your code.

Many times template strings are used in order to create URLs in JavaScript. Often this is easy and clear enough, but the URL object is a more robust OOP method of dealing with URLs.

Even OpenWeatherMap.org uses template strings in its documentation: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key}

For a URL that is fairly static this is fine, however if you want to make changes to this URL you may want to consider using a URL object.

// Using template strings
const lat = 32.087;
const lon = 34.801;
const apiKey = 'your_api_key';
const url = `https://api.openweathermap.org/data/3.0/onecall?lat=${lat}&lon=${lon}&appid=${apiKey}`;

// Using the URL object
const openWeatherUrl = new URL('https://api.openweathermap.org/data/3.0/onecall');
openWeatherUrl.searchParams.set('lat', lat);
openWeatherUrl.searchParams.set('lon', lon);
openWeatherUrl.searchParams.set('appid', apiKey);

Basic Usage

You can create a new URL object by passing a URL string to its constructor.

In this case (as opposed to above) the entire URL is passed in with various parts:

const url = new URL('https://example.com:8080/path?query=123#section');

Properties

The URL object has several properties that you can use to access parts of the URL:

href: The full URL as a string.
protocol: The protocol (e.g., https:).
hostname: The domain name (e.g., example.com).
port: The port number (e.g., 8080).
pathname: The path following the domain (e.g., /path).
search: The query string, including the ? (e.g., ?query=123).
hash: The fragment identifier, including the # (e.g., #section).
host: The hostname and port combined (e.g., example.com:8080).
origin: The origin of the URL, which is the protocol, hostname, and port.

> const url = new URL('https://example.com:8080/path?query=123#section');
> url.port
'8080'
> url.protocol
'https:'
> url.hostname
'example.com'
> url.pathname
'/path'
> url.search
'?query=123'
> url.hash
'#section'
> url.host
'example.com:8080'

These can also be used to change the different parts of the URL?:

> url.port = 1234
1234
> url.pathname = "differentpath"
'differentpath'
> url.hostname = "example.org"
'example.org'
> url
URL {
  href: 'https://example.org:1234/differentpath?query=123#section',
  origin: 'https://example.org:1234',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'example.org:1234',
  hostname: 'example.org',
  port: '1234',
  pathname: '/differentpath',
  search: '?query=123',
  searchParams: URLSearchParams { 'query' => '123' },
  hash: '#section'
}

Methods

The URL object also has some methods to help modify and interact with the URL.

For instance a URL search parameter is a key and value pair that informs the API server details to serve a user.

url.searchParams: Returns a URLSearchParams object, which provides methods to work with query string parameters. You can:

Get a query parameter: url.searchParams.get('query')
Set a query parameter: url.searchParams.set('query', '456')
Delete a query parameter: url.searchParams.delete('query')

Iterate over query parameters:

url.searchParams.forEach((value, key) => {
  console.log(key, value);
});

toString(): Returns the full URL as a string, reflecting any changes made to the properties or query parameters.

Example with Open Weather Map API

Here are the docs for OpenWeatherMap: https://openweathermap.org/api/one-call-3

Here’s a simple example showing how to create a URL object and manipulate its parts:

// get values to interpolate to URL
const apiKey = process.env.openWeatherApiKey || 0
const [lat, lon] = [32.08721095615897, 34.801588162316506]

const openWeatherUrl = new URL("https://api.openweathermap.org")

openWeatherUrl.pathname = "data/3.0/onecall"
openWeatherUrl.searchParams.set('lat',lat)
openWeatherUrl.searchParams.set('lon',lon)

// from the docs
openWeatherUrl.searchParams.set('exclude', 'hourly')

openWeatherUrl.searchParams.set('appid', apiKey)

console.log(openWeatherUrl)

output:

URL {
  href: 'https://api.openweathermap.org/data/3.0/onecall?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  origin: 'https://api.openweathermap.org',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'api.openweathermap.org',
  hostname: 'api.openweathermap.org',
  port: '',
  pathname: '/data/3.0/onecall',
  search: '?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  searchParams: URLSearchParams {
    'lat' => '32.08721095615897',
    'lon' => '34.801588162316506',
    'exclude' => 'hourly',
    'appid' => '0' },
  hash: ''
}

Summary

The URL object in JavaScript provides a structured way to work with URLs, allowing for easy manipulation and construction of complex URLs. While template strings are simple and effective for static URLs, URL objects are ideal for cases where URLs are dynamic or require frequent modifications.

Photo by Anne Nygård on Unsplash

async / await

Aaron Wolf — Wed, 09 Oct 2024 15:51:55 +0000

`async` / `await`

async / await is a newer way of writing asynchronous code compared to promises. The main advantages of async/await are improved readability and the avoidance of promise chaining. Promises can become long, hard to read, and may contain deeply nested callbacks that can be difficult to debug.

Example

Recall our fetch from before.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('All done'));

Using async/await, the code can be refactored to look like this:

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  } finally {
    console.log('All done');
  }
}

fetchData();

While it may be a few more lines of code, this version is easier to read because it resembles a normal synchronous function. Additionally, if the functions inside the .then() statements were more complex, readability and debuggability would be even more impacted. The async/await example is far clearer.

Example 2: Ordering food from a restaurant

Structure of `async`/`await`

An async/await function has two essential parts: async and await. The async keyword is added before a function declaration, and await is used when an asynchronous task begins.

Let’s illustrate this with an example of ordering food from a restaurant:

// Simulate the order process with async/await
async function foodOrder() {
  console.log("Ordering food...");
  await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds for food to be prepared
  return "Your food is ready!";
}

// Simulate the eating process
function eatFood(order) {
  console.log(order); // This logs "Your food is ready!"
  console.log("Enjoying the meal!");
}

// Simulate continuing the conversation
function continueConversation() {
  console.log("While waiting, you continue chatting with friends...");
}

async function orderFood() {
  console.log("You've arrived at the restaurant.");
  const order = await foodOrder(); // Place the order and wait for it to be ready
  continueConversation(); // Chat while waiting
  eatFood(order); // Eat the food once it arrives
}

orderFood();

The output will be

You've arrived at the restaurant.
Ordering food...
While waiting, you continue chatting with friends...
Your food is ready!
Enjoying the meal!

JavaScript Promises & Fetch

Aaron Wolf — Wed, 09 Oct 2024 09:59:52 +0000

Promises

Restaurants

A promise in JavaScript is just a pending task. It’s like ordering food at a restaurant: when you place your order, the server makes a promise to bring the food you ordered. Once the food is brought to the table the promise has been fulfilled. If the food you ordered can’t be served because the kitchen is out of a key ingredient, then you can catch a meal somewhere else.

This is all asynchronous. When you sit down at the table, you might be chatting with a friend or scrolling on your phone. You pause what you were doing so that you can give your order to the server, then return to doing what you were doing beforehand.

JavaScript promises work similarly. Since JavaScript is single-threaded, promises allow the JavaScript engine to move on to other tasks while it waits for certain operations to complete.

JavaScript

A promise is a specific type of object. All promises begin in a pending state. The callback function inside the promise, called an executor, defines when to resolve or reject the promise.

Creating a promise:

const order = new Promise((resolve, reject) => {
  if ( foodDelivered) {
    resolve('eat food');
  } else {
    reject('find another restaurant');
  }
})

Using a promise

order
  // wait for the asynchronous value to be fulfilled
  .then(value => console.log(value))
  // handle rejection
  .catch(error => console.log(error))
  .finally(() => console.log('all done'));

Fetch

fetch is a built-in function in JavaScript that returns a promise. It makes an HTTP request and allows you to handle the response asynchronously with .then() and .catch().

Using fetch()

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))
  .finally(() => console.log('all done');

The Call Stack and Event Loop

The call stack manages synchronous tasks, keeping track of the order in which they execute. This is fairly straightforward: tasks are executed in the order they're written.

However, asynchronous tasks are handled by the event loop. The event loop allows asynchronous code to be executed out of order, letting the JavaScript engine continue working on other tasks without waiting.

Example

How will this execute?

console.log("console log first!");
setTimeout( _ => console.log("set timeout second!"), 0);
Promise.resolve().then(() => console.log("promise third"));
console.log("console log last!!!");

You might expect that it would execute in order, but it doesn’t. The JavaScript event loop processes these instructions differently.
The result is actually this:

> console log first!
> console log last!!!
> promise third
> set timeout second!

Why?

The event loop rearranges the execution priority:

Synchronous tasks (like console.log("console log first!") and console.log("console log last!!!")) are executed immediately, in the order they appear.
Microtasks (such as Promise callbacks) are given the next priority and are executed before any other asynchronous tasks.
Macrotasks (like setTimeout) are handled last, even if the timeout is set to zero.

This allows the JavaScript engine to work asynchronously, performing other tasks without waiting for all operations to complete immediately.

Cover Photo by Andrew Petrov on Unsplash

Apple Announces PQ3

Aaron Wolf — Wed, 28 Feb 2024 13:51:49 +0000

Since I just finished my series on encryption I thought this news was interesting.

Apple just announced its new encryption protocol for iMessage called PQ3. This new protocol was created in order to future proof itself against quantum computing and its impending ability to break our current encryption methods. PQ3 is similar to the Signal protocol and is apparently even more secure. As with Signal it appears to be based on Diffie-Hellman and RSA.

Here is Apple's overview, and here is a security analysis of how it works, but a lot of that is even beyond me.

Encryption Part 4: Hashes

Aaron Wolf — Mon, 29 Jan 2024 12:17:59 +0000

This is the final section of my series on encryption... at least for now. Maybe I'll think of some other topics to cover.

You can clone my encryption demo repo and run the code from this article on your own machine.

Hashing

Hashing is a one way function that's used in encryption scenarios where the goal is secure storage, data integrity, and verification. The original use that led to the creation of hashing functions was digital signatures. It's basically a function that creates a summary of the whole, but the whole cannot be extrapolated from the hash.

Any website you've logged into with a password should be storing your password as a hash, meaning the maintainers of said website couldn't extrapolate your password even if they wanted to. It's just saved as a hash which is represented by a random string. When you log into the website your password is sent securely (over HTTPS) from your computer to the server where it is hashed and compared against the server's hash of the password. If they match, you get authenticated, if not, try again.

Hashing can also work to verify data. If you've ever downloaded a Linux .iso and the instructions tell you to run sha256sum <linux_distro_of_your_choice>.iso, the output will be a hash and it should match what the Linux website says, otherwise someone may have tampered with it or it could be corrupt.

Hashing algorithms

There are many different hashing algorithms that can be used, but most of them follow the same basic process. It is a mathematical function that takes a particular input (a password for instance) and converts it through some mathematical means into a digest, also sometimes referred to as tags or just hashes.

There are a few commonalities that good hashing algorithms share:

It's deterministic: This means that an input will always result in the same output.
Fixed length: The input can be as large as the user wants, however, the output will always be a fixed length. For instance sah256sum always produces a hash that is 256 bits.
It's fast, but also not too fast: It needs to be fast for performance, but if it's too fast that indicates that it's not performing enough computation to create a good hash.
The avalanche principal: If even a single bit of data has changed, no matter where in the file, the resulting hash will be drastically different.
Collision resistant: Two inputs never create the same output. While there are an incredible number of possible hashes out there, there are still only a finite number of them. Therefore in the natural course of using a hash function it's possible that two files can create the same hash. However the function should be collision resistant enough that intentionally creating two files that generate the same hash is unlikely and virtually impossible. If this was possible, forging documents would be easy and that's bad. Due to their extensive use, and known collision resistance issues, there are a few hashing algorithms that are considered broken including SHA1 and MD5.

Let's see SHA-1 in action

SHA stands for Secure Hash Algorithm, even though, ironically, it's no longer secure. What it does is it takes any size input and returns a 160 bit binary sequence.

The message is padded to ensure its length is a multiple of 512 bits. Padding involves appending bits until it's a multiple of 512.
SHA-1 begins with five initial hash values of 32 bits each.
Each 512-bit block is broken down into sixteen 32-bit words.
These sixteen 32-bit words are expanded into eighty 32-bit words using certain operations.
SHA-1 uses a main loop that iterates 80 times for each block. In each iteration, a compression function is applied, which includes bitwise operations (AND, OR, XOR), conditional operations, and circular left shifts.
After processing each 512-bit block, the five hash values are updated. This involves adding the values computed in the main loop to the current hash values. For the first block, the initial hash values are used. For subsequent blocks, the updated hash values from the previous block are used.
After all blocks have been processed, the final hash value is produced by concatenating the five updated hash values.

Python for SHA-1

Let's write some Python to create a SHA-1 hash. Note that as stated above SHA-1 is no longer considered safe. Don't use it in production!!!

Using the hashlib library it's easy to generate a hash from a number of different algorithms. Feel free to try them all. Creating a hash function is beyond the scope of this write up.

import hashlib

def sha1_hash(input_string):
    # Create a SHA-1 hash object
    hash_object = hashlib.sha1()

    hash_object.update(input_string.encode())

    # Get the hexadecimal representation of the hash
    hex_digest = hash_object.hexdigest()

    return hex_digest

input_string = input('Enter a string to hash: ')
result = sha1_hash(input_string)

print(f"The SHA-1 hash of '{input_string}' is: {result}")

Encryption Part 3: RSA Encryption

Aaron Wolf — Wed, 24 Jan 2024 06:35:36 +0000

RSA encryption

note: You can clone this repo and use it on your own machine.

RSA Encryption Overview

RSA was invented by NORAD in the early 1970's but was deemed top secret. A few years later in 1977, Ron Rivest, Adi Shamir and Leonard Adleman independantly invented the exact same process for encryption and called it RSA. RSA is the most used software in the world to date and every internet user has used RSA at some point whether they knew it or not.

It shares many mathematical similarities with Diffie-Hellman encryption, but it's conceptually a little different. Instead of thinking about public and private keys, RSA can be thought of as sending an unlocked padlock. It would be like someone who wants to receive a message sending an unlocked padlock to the sender who then locks his message and sends it back for decryption.

The problem RSA solves compared to Diffie-Hellman is that of key storage. When using Diffie-Hellman every key needs to be saved separately. This can be unwieldy for a large organizaion like a bank with many customers- the bank would need a different key for each customer. The solution to this is RSA! The bank can send the same lock, that they alone have keys for, out to many customers who can send encrypted messages back.

Common Uses of RSA encryption

Some common uses of RSA encryption are:

The Signal protocol: An open source protocol for sending secure messages. Used by programs like Signal and WhatsApp. Though the signal protocol also uses a special version of Diffie-Hellman on top of RSA.
HTTPS: The encrypted connection between a computer and a server from the World Wide Web uses SSL or TLS which is based on RSA.
VPN: Like HTTPS, connecting to a VPN uses the SSL or TLS protocols.
Encrypted File Systems: Many files and file systems are encrypted using RSA.

RSA Encryption Process

The entire process is based on Euler's theorem: $nm^{φ(n)} \equiv 1 \mod n$ , where $φ (n)$ is the product of two large prime numbers.

Key Generation

Select Two Prime Numbers: Choose two large prime numbers, p and q.
Compute the Modulus n: Calculate n = p * q. The value of n is used as the modulus for both the public and private keys.
Calculate the Totient (phi $φ$ ): Compute Euler's totient function, φ(n) = (p-1) * (q-1).
Choose the Public Exponent e: Select an integer e such that 1 < e < φ(n) and e is coprime with φ(n). Often, e = 65537.
Determine the Private Exponent d: Calculate d as the modular multiplicative inverse of e modulo φ(n).

Encryption Process

Public Key: The public key consists of the modulus n and the public exponent e.
Encrypting a Message: Convert the message into an integer m (e.g., via ASCII). Then, compute the ciphertext c using $c ≡ m^e (mod n)$ .

Decryption Process

Private Key: The private key is made of the modulus n and the private exponent d.
Decrypting a Message: Decrypt the message by computing $m ≡ c^{d} (mod n)$ using the private key.

Security

RSA's security relies on the difficulty of factoring the product of two large prime numbers.
The security improves with larger key sizes but at the cost of slower encryption and decryption.

Let's get coding: Helper Functions

These functions are meant for demonstration, not performance. This is just to show how the process of RSA, but this would never be used in production. In modern applications this process is completely automated.

# Finds factors and determines if prime.

def factors(number):
    number = int(number)
    factors = set()

    # Check for divisibility by 2 first to handle even numbers quickly
    if number % 2 == 0:
        factors.update({2, number // 2})

    # Check for odd divisors only, up to the square root of the number
    for i in range(3, int(number**0.5) + 1, 2):
        if number % i == 0:
            factors.update({i, number // i})

    # Add 1 and the number itself to the factors
    factors.update({1, number})

    # A prime number has exactly two factors: 1 and itself
    return {'factors': factors, 'is_prime': len(factors) == 2}



# Determines greatest common divisor of 2 numbers

def gcd(a, b):
    while b:
        a, b = b, a % b
    return a



# encode a string into an array of each character's numerical value

def encode_string(string):
    char_array = []
    for char in string:
        char_array.append(ord(char))
    return char_array



# decode an array of numerical values to their corresponding character

def decode_string(arr):
    decoded_arr = []
    for i in arr:
        decoded_arr.append(chr(i))
    return "".join(decoded_arr)



# Calculate if numbers are co-prime (they have no common factors except 1)

def are_coprime(number1, number2):
    number1_factors = factors(number1)['factors']
    number2_factors = factors(number2)['factors']

    common_factors = number1_factors.intersection(number2_factors)

    # if the intersection of common factors is only 1 return True
    return common_factors == {1}

Encryption Functions

Selecting the public key

$e$ should be an integer that is not only greater than 1 but also less than $φ (n)$ , where $n = pq$ (the product of two distinct prime numbers $p$ and $q$ ).

$e$ and $φ (n)$ should be coprime, meaning they should have no common factors other than 1. This ensures that $e$ has a multiplicative inverse $m o d φ (n)$ .

The private exponent d is the modular multiplicative inverse of e modulo ϕ(n).
This means d is the number that satisfies the equation
$\ modϕ(n)$ .

# calulate phi (φ) - the totient

def calculate_phi(p, q):
    if factors(p)['is_prime'] and factors(q)['is_prime']:
        return (p - 1) * (q - 1)

    raise ValueError('Not prime numbers')



# Calculate e - the public exponent

def find_suitable_e(totient):
    # Start with 65537 - A common value for `e` in RSA
    e = 65537

    # Check if e is less than totient and coprime with the totient
    # If not, decrement by 2 (to keep e as an odd number) and check again
    while e >= totient or not are_coprime(e, totient):
        e -= 2
        if e <= 2:
            raise ValueError("Could not find an appropriate 'e' value.")

    return e


# Encrypts each letter of the message with the exponent and modulus
def encrypt(message, e, n):
    if isinstance(message, list):
        encrypted_list = []
        for i in message:
            encrypted_list.append(pow(i, e, n))
        return encrypted_list
    else:
        return []



# Decrypts each letter of the message given d - the private key - and n - the modulus

def decrypt(message, d, n):
    decrypted = []
    for i in message:
        decrypted.append(pow(i, d, n))

    return decrypted



# Calculate d: the private key
def calculate_d(phi_n, e):
    return pow(e, -1, phi_n)

Watch RSA in action

# Alice picks 2 prime numbers of similar size to compute `n`

while True:
    p1 = int(input('Pick your first prime: '))
    p2 = int(input('Pick your second prime: '))

    p1_is_prime = factors(p1)['is_prime']
    p2_is_prime = factors(p2)['is_prime']

    if p1_is_prime and p2_is_prime:
        print(f"\nAlice's primes are {p1} and {p2}")
        break
    elif not p1_is_prime and not p2_is_prime:
        print(f'{p1} and {p2} are both not prime')
    elif not p1_is_prime:
        print(f'{p1} is not prime.')
    elif not p2_is_prime:
        print(f'{p2} is not prime.')



# Calculate n as the product of p1 and p2

n = p1 * p2

print(f"Alice's n value is {p1} x {p2} = {n}")



# Calculate the totient - φ(n)

totient = calculate_phi(p1, p2)

print(f'φ(n) = ({p1} - 1) x ({p2} - 1) = {totient}')



# Calculate exponent e, such that it is odd and coprime with φ(n)

e = exponent(totient)

print(f'The exponent value is {e}')



# Calculate the private key `d`. Alice keeps this as her secret key.

d = calculate_d(totient, e)
print(f"Alice's private decryption key is {d}")

Alice sends `n` and `e`. Bob uses these numbers to encrypt

Alice sends to Bob her values for n and e. This is like sending an open lock that Bob will use to lock up his message. He does this by calculating $m^{e} mod(n)$ . Where m is the numerical value of his message.

# Bob's message to Alice
message = input('Type a message to send: ')

encoded_message = encode_string(message)
print(f'Encoded but not encrypted message is:\n{encoded_message}\n')

encrypted_message = encrypt(encoded_message, e, n)
print(f'Encoded and encrypted message is:\n {encrypted_message}')

Send the encrypted message

encrypted_message can now be sent from Bob to Alice without an eavesdropper (Eve) making any sense of the message. In practice this only works when large values of p and q are used, otherwise computers can still quite easily brute force the encryption.

Alice uses her private key `d` to decrypt the message

Since d is the multiplicative inverse of e in respect to φ(n), decrypting the message is easy. Each letter is decrypted with the function $i^{d} mod (n)$ , where i is the encrypted numerical value of the letter, d is our private key, and n is the product of our two primes.

# Alice decrypts the message using `d`

decrypted_message = decrypt(encrypted_message, d, n)

print(f"The decrypted encoded message is the same as above\n{encoded_message} = {decrypted_message}\n")


decoded_message = decode_string(decrypted_message)
print(f"The plain text value is: {decoded_message}")

Next topic to tackle: Hashing

Encryption Part 2: Diffie-Hellman & Public Key Cryptography

Aaron Wolf — Thu, 28 Dec 2023 19:38:01 +0000

Intro

This is part of our ongoing series about encryption. Part 1 was boring, this is where it gets fun!

History

The most advanced method of encryption during WWII (the enigma machine) was broken by a guy who built a computer (Alan Turing).

In the decades following WWII the US was in a cold war with the USSR. Computers were being built in order to gain intelligence and monitor what the Soviets were doing. NORAD (part of the US and Canada's military complex) created the first networked computer system and they wanted secure communication so that no bad actors could eavesdrop on secret military communication.

Diffie Hellman

In 1976 Whitfield Diffie and Martin Hellman developed a method of key exchange where two parties could share public keys for encryption and decryption but nobody else would be able to see any messages because each party would also have a private keys

The Diffie-Hellman key exchange was the first ever devised asymmetric cipher. This means that a secret message can be sent from one party to another without the need to share the keys.

IMPORTANT NOTE: The basics of this methodology are still used today in many forms of communication, including SSH. Never EVER share your private key with anybody!

How Does It Work Conceptually?

Up until Diffie-Hellman all encryption was done with a symmetric key exchange. This means that the sender and receiver had to share an agreed upon key before they can send messages to one another. But what if the 2 parties have never met? Or what if they're far away?

The solution is a public key exchange. This is called asymmetric key exchange because each party has a different key. But how?

Each party has a private key and a public key. The private key is never shared. Both parties agree (publicly) on a prime modulus and a generator to the modulus. The prime modulus is just a large prime number and the generator is a number that when raised to the power off all numbers up to the prime number p (1, 2, 3, ... , p-1 , p), the solution set will include all numbers up to p (1, 2, 3, ... , p-1 , p). This allows for the same character to be encrypted to different values.

It's confusing- I know.

But when the public keys are exchanged the individuals can calculate their private keys raised to the power of their partner's public key and everything unravels to decrypt itself!

Khan Academy has a great video explaining it with paint.

How Does the Math Work?

The Diffie-Hellman key exchange algorithm is based on the difficulty of the discrete logarithm problem in modular arithmetic. The basic steps of the protocol involve:

Two parties agree on a large prime number p and a base g, where g is a primitive root modulo p.
Each party selects a private key (a secret number), let's say a and b, and computes their respective public keys as $A = g^{a} mod(p)$ and $B = g^{b} mod(p)$ .
They then exchange their public keys.
Each party raises the received public key to the power of their own private key to compute the shared secret: $s = B^{a} mod(p)$ and $s = A^{b} mod(p)$ .

Due to the properties of modular exponentiation, both parties arrive at the same shared secret.

Demonstration

This is a MarkDown version of a Jupyter Notebook that I created for this demonstration. Feel free to clone the repository and play with the key exchange yourself.

Helper Functions

These are not the most performant functions but that's not their intention. They are here so that the user can gain an understanding of how the encryption takes place.

First we need a function that tells us if a number is prime or not. This is because our modulus must be a prime number

# checks if number is prime or not

def is_prime(number):
    factors = []
    for i in range(2, int(number**0.5)+1):
        if (number/i)%1 == 0:
            factors.append(i)

    if len(factors) > 0:
        return False
    else:
        return True

Given a prime number $p$, the following function returns an array of all numbers that are primitive roots or generators of $p$. A primitive root is a number $a$ such that if you raise $a$ to all of the powers $(1, 2, 3, ... , p)$ the results will contain of the numbers $(1, 2, 3, ... , p)$, though not necessarily in order.

# returns array of generators of a prime number

def calculate_generator(prime):
    if is_prime(prime) == False:
        return False

    generators = []

    for i in range(2, prime):
        results = []
        for j in range(2, prime):
            results.append(pow(i, j, prime))

        if len(set(results)) == len(results):
            generators.append(i)

    return generators

Given a private key (usually a random number), the public key is determined by the following arithmetic function.
$$public _ key = generator^{private _ key} (mod\ p)$$

# creates public key

def create_pub_key(generator, private_key, prime):
    # pow takes (base, exp, mod=None) 
    # is equivalent to base**exp % mod
    return pow(generator, private_key, prime)

Encoding is not encryption. It simply converts the letter to its computer numerical value. Any computer can make this conversion, so it's not scrambled in any way. This function takes a string as an argument and returns an array of the encoded characters.

# encode a string into an array of each character's numerical value

def encode_string(string):
    char_array = []
    for char in string:
        char_array.append(ord(char))
    return char_array

Decoding is the opposite of encoding. This function is the opposite of the previous one.

# decode an array of numerical values to their corresponding character

def decode_string(arr):
    decoded_arr = []
    for i in arr:
        decoded_arr.append(chr(i))
    return "".join(decoded_arr)

Given a encoded array, a shared "super key", and a prime, we can encrypt the message. This is not technically part of the Diffie-Hellman process. We use the following mathematical function to encrypt each letter in the array, though others may be used.
$$num + super _ key (mod\ p)$$

# encrypts message

def encrypt_message(super_key, message_array, prime):
    encrypted_array = []
    for num in message_array:
        encrypted_array.append(num + super_key % prime)
    return encrypted_array

Decrypting the message is the inverse function:
$$num - super _ key (mod\ p)$$

# decrypts message

def decrypt_message(super_key, encrypted_array, prime):
    decrypted_message = []
    for num in encrypted_array:
        decrypted_message.append(num - super_key % prime)
    return decrypted_message

Implementing Diffie-Hellman

Now that we have all of our helper functions we can implement Diffie-Hellman. Obviously, this would be done from two different machines if it was sent over the internet (i.e. SSH).

Let's get 2 volunteers

p1 = input("Person 1's name: ")
p2 = input("Person 2's name: ")

Choose Numbers

We need to do is choose a publicly known prime number, and a generator of that prime. In the video the prime was 17 and the generator was 3.

prime = int(input("choose a shared prime number: "))

while is_prime(prime) == False:
    prime = int(input("that's not prime, try again: "))

gen = int(input(f"select a shared generator from the list {calculate_generator(prime)}: "))

Choose a private key then autogenerate the public key
$$public _ key = g^{private _ key} (mod\ p)$$

p1private_key = int(input(f"{p1} select a private key: "))
p1public_key = create_pub_key(gen, p1private_key, prime)
print(f"{p1}'s public key: {p1public_key}")

p2private_key = int(input(f"{p2} select a private key: "))
p2public_key = create_pub_key(gen, p2private_key, prime)
print(f"{p2}'s public key: {p2public_key}")

Review so far:

Numbers that are known to everyone

print(f"prime number {prime}")
print(f"generator of {prime}: {gen}")
print(f"{p1}'s public key {p1public_key}")
print(f"{p2}'s public key {p2public_key}")

Numbers only known to their owners

print(f"{p1}'s private key {p1private_key}")
print(f"{p2}'s private key {p2private_key}")

The Super Key

The super key is the super-secret key that both parties calculate on their own but with different numbers. They should be equal otherwise this won't work. In the video the super key was 10

super_key = pow(p2public_key, p1private_key, prime)
super_key2 = pow(p1public_key, p2private_key, prime)

if super_key != super_key2:
    print("Oops, something went wrong...")

print(f"super key: {super_key}")

print(super_key)

Sending a message

Step 1: encode the message into the computer numeric values

message = input(f"{p1}, what message do you want to send to {p2}? ")
message_array = encode_string(message)
print(message_array)

Step 2: encrypt message

encrypted = encrypt_message(super_key, message_array, prime)
print(encrypted)

Step 3: decrypt message

decrypted = decrypt_message(super_key2, encrypted, prime)
print(decode_string(decrypted))

Next Step

We learn how RSA encryption works!!!

Encryption Part 1: Introduction to Encryption

Aaron Wolf — Wed, 01 Mar 2023 18:05:20 +0000

Intro

This will be a series on Encryption.

It was my turn to give presentation to my work colleagues at our weekly meetings. Instead of talking about the usual webdev / JavaScript / Framework of the week, I spoke about the fundamentals of cryptography (it made me nostalgic for grad school). I think it's good and important to have an understanding of the basics of how our wonderful internet operates.

This will be split up into several posts. This first one is just an introduction on the topic.

What is encryption?

Scrambling a message so that only the people who should read a message can read a message.

Or if you want the Google definition:

en•cryp•tion /inˈkripSH(ə)n,enˈkripSH(ə)n/
noun
the process of converting information or data into a code, especially to prevent unauthorized access.
"I use encryption to protect sensitive information transmitted online"

That's about it.

When was encryption first used?

The first known use of encryption was during Roman times. It's claimed that Julius Caesar used a shift cipher (now known as a Caesar Cipher) with a shift of 3 to encode significant military messages.

How does a Caesar (Shift) cipher work?

All we do is shift the letters the number of the encryption key. So if our shift was 4, each letter on the top row of the chart of your message would get replaced by the letter on the bottom.

a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	p	q	r	s	t	u	v	w	x	y	z
E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z	A	B	C	D

The message "i like python" would get encrypted to "M PMOI TCXLSR". It's even easier to do with a printable encryption wheel.

There are TONS of tutorials on how to write a Caesar Cipher in various languages on Dev, so I don't feel a need to do it. We'll get into code in Part 2.

Security

Is a Caesar Cipher secure?

NO.

Don't use it unless you're just passing notes in class (even then it may not be a good idea. A Caesar Cipher can be cracked by a basic linguistic statistical analysis. Meaning look for the letters in the encrypted message that are used the most and they most likely correspond to the letters that are most commonly used in a given language ("a" and "e" in English).

Another way is to just do a brute force attack. You could write a program that tries all 26 shifts and see which one isn't gibberish.

Symmetric Ciphers & Asymmetric Ciphers

A Caesar Cipher is known as a symmetric cipher because the key to unlocking it is the same as the key to unlocking it. Also, both parties need to know the key before using it. There are plenty of other examples of Symmetric Ciphers-- the most famous (infamous?) of which was the enigma machine that the Germans used during WWII and was cracked by Alan Turing.

Asymmetric ciphers are a whole 'nother can of worms. Look out for part 2!

Switching From Linux to Mac

Aaron Wolf — Tue, 29 Nov 2022 10:50:44 +0000

I Switched.

This summer I switched from a System76 Linux laptop to a MacBook Pro M1. Which is better? I can't answer say, but here are some observations (good and bad)

In general I'm surprised by how similar Mac and Linux are in practice. Most of my "Linux" stuff on Mac is done through SSH to my home server. I still use the terminal on Mac a lot for web development, but all of that stuff is the same. Since MacOS is Unix based it's really similar to Linux.

Set Up

When I got my Macbook I had to go into some "deep" settings to allow sudo, and it took a little time to get my Mac working the way I like, it took a lot of Googling to find where the settings I wanted were. In contrast, I automated most of my Linux setup with a script. I also find the settings in every distro I've ever used to be easier to navigate than what's in MacOS. With all of Apple's rhetoric about security, I was shocked that full disk encryption was not the default with MacOS.

The Physical Machine

Mac build quality is exceptional. I wish there was a Linux option that came remotely close to this. I don't think there are any Windows PCs that even come close. I used to actually use Linux on a Mac a few years ago back in the Intel days. I've also successfully installed Ubuntu Server on a VM on my M1.

(Perceived) Performance

I didn't do any performance tests, but it seems Mac is MUCH faster and overall performant. The battery lasts a long time, the memory usage is more efficient, and the laptop is extremely quiet (I think the fan has gone on once since I got it).

Rebooting

This might be a distro thing, but I was rebooting my Linux laptop (Mint 20.2) a lot more than my Mac. I think I'd use Debian if I went back to Linux. My current uptime on MacOS is 24 days. It wants me to reboot for an upgrade; I'll do it eventually, but it's running really nicely.

FOSS

Mac sucks with Free Open Source Software (FOSS). I knew this going in, but I didn't realize how bad it was. There is no free equivalent to even Gnome Sudoku. Most things are paid for or ad supported on the App Store, even Sudoku 😡
https://wiki.gnome.org/Apps/Sudoku

Command Line

I mentioned touched on this in the similarity of MacOS and Linux. brew is similar to apt install (or whatever package manager you use). I just wish more software was available through brew. Navigating the commandline is almost the same as in Linux and the filesystem is similar enough that it doesn't take much to figure out.

The Looks

Speaking of software, software on Mac is a lot more polished LOOKING. This says nothing of functionality (could be worse, same, or better vs Linux). I've been enjoying Stage Manager when my laptop isn't hooked up to my ultrawide monitor.

Trackpad Gestures

Trackpad gestures on Mac is excellent. I know that gestures are in development in many Linux distros. I've used libinputgestures on Linux. It gets the job done, but it's not as smooth.
https://t.co/FNnVvLogeq

Scrolling

For some reason in MacOS trackpad scrolling is the same setting as mouse wheel scrolling. I like to have natural scrolling on my trackpad but regular on my mouse. Can't do that without 3rd party software. Why are these two settings connected? They're not in most Linux DEs.

The Battery

I mentioned the battery in Performance and software in FOSS, but they overlap a bit. Both MacOS and POP!_OS (when installed on System76's in house machines) allow to limit the battery charging when plugged in. This can save the battery from the stress of trickle charging for long periods of time and extend the life of the battery. I installed Linux Mint on my S76 machine so I don't know how well it works, but it doesn't work at all on MacOS. I installed fairly expensive software on my Mac. Not happy about that.

Big Brother

I've always been concerned about my private data and security. Main stream Linux distributions don't really have an issue with this. However, especially after the iOS debacle with privacy, I wonder how much of my personal information is actually being shared with Apple.

In Conclusion

I like both platforms. My overall impression is that- for me- I like the overall experience of Linux, but I like the polish of MacOS. I'll probably dual-boot when Linux becomes more available on ARM.

Temporal Date API

Aaron Wolf — Sun, 11 Sep 2022 11:55:49 +0000

Intro

This post is about my experience with the new Temporal API. We all know that dates in JavaScript suck. Temporal is the API that we will come to succeed the legacy date API in JavaScript.

At the moment (no pun intended), Temporal is still in stage 3 (out of 4) of development. This means that it should not be used in development, but if you're curious on how to use it you can still use the Temporal polyfill.

The reason why I'm writing this- despite there being a plethora of other tutorials- is because I haven't seen others showcase how Temporal might be used in the real world. However, this is not a comprehensive overview of the entire API.

The Paradigm Shift

In order to understand Temporal dates one must think about dates differently. In Legacy JavaScript dates are ultimately wrappers for epoch milliseconds. While Temporal dates can do this, they are not necessarily this. This means that you can have a Temporal Date object (or a time object) that is completely divorced from epoch milliseconds.

Most Common Use Cases (for me at least)

As far as I understand the naming convention, anything that begins with Plain is disconnected from epoch milliseconds.

PlainDate

One can create a plain date like so:

input:

// today can be an ISO string or an object
const today = '2022-09-10'
// or 
// const today = { year: 2022, month: 9, day: 10 }
const temporalToday = Temporal.PlainDate.from(today)

temporalToday is an object with the following characteristics:

{
  calendar: Calendar {
    id: 'iso8601'},
  day: 10,
  dayOfWeek: 6,
  dayOfYear: 253,
  daysInMonth: 30,
  daysInWeek: 7,
  daysInYear: 365,
  era: undefined,
  eraYear: undefined,
  inLeapYear: false,
  month: 9,
  monthCode: "M09",
  monthsInYear: 12,
  weekOfYear: 36,
  year: 2022
}

You can see that this provides a lot more information that simply the year, month, and date. Also, it's implied that the preferred calendar is iso8601, but there are other calendars that can be used, such as the Jewish or Chinese calendars.

PlainTime

Similar to PlainDate if the following is instantiated:

const time = '13:55:14'
const plainTimeNow = Temporal.PlainTime.from(time)

The following object will be returned:

{
  calendar: Calendar {
    id: 'iso8601'},
  hour: 13,
  microsecond: 0,
  millisecond: 0,
  minute: 55,
  nanosecond: 0,
  second: 14
}

PlainDateTime

Like PlainDate and PlainTime, this returns an object, but with the attributes of both of them together. Remember that the input must be in ISO format or an object.

const dateTime = '2022-09-10T13:55:14'
// or
// const dateTime = {
//   year: 2022,
//   month: 9,
//   day: 10,
//   hour: 13,
//   minute: 55,
//   second: 14
// }

const dateTimeNow = Temporal.PlainDateTime.from(dateTime)

{
  ...
  day: 10
  dayOfWeek: 6
  dayOfYear: 253,
  daysInMonth: 30,
  daysInWeek: 7,
  daysInYear: 365,
  era: undefined,
  eraYear: undefined,
  hour: 13,
  inLeapYear: false,
  microsecond: 0,
  millisecond: 0,
  minute: 55,
  month: 9,
  monthCode: "M09",
  monthsInYear: 12,
  nanosecond: 0,
  second: 14,
  weekOfYear: 36,
  year: 2022
}

This is pretty self explanatory once the previous 2 sections are understood.

ZonedDateTime

Notice that ZonedDateTime isn't preceded by the work "plain". This is because there is a full time and location, and therefore epoch milliseconds can be calculated.

Note that only an object or epoch nanoseconds can be passed into ZonedDateTime. I don't have a sample of using epoch nanoseconds since it's outside of my use case.

const hereAndNow = {
  year: 2020,
  month: 9,
  day: 10,
  hour: 13,
  minute: 55,
  second: 14,
  timeZone: 'America/New_York'
}
const zonedDateTime = Temporal.ZonedDateTime.from(hereAndNow)

This will produce:

{
  day: 10,
  dayOfWeek: 4,
  dayOfYear: 254,
  daysInMonth: 30,
  daysInWeek: 7,
  daysInYear: 366,
  epochMicroseconds: 1599760514000000n,
  epochMilliseconds: 1599760514000,
  epochNanoseconds: 1599760514000000000n,
  epochSeconds: 1599760514,
  era: undefined,
  eraYear: undefined,
  hour: 13,
  hoursInDay: 24,
  inLeapYear: true,
  microsecond: 0,
  millisecond: 0,
  minute: 55,
  month: 9,
  monthCode: "M09",
  monthsInYear: 12,
  nanosecond: 0,
  offset: "-04:00",
  offsetNanoseconds: -14400000000000,
  second: 14,
  timeZone: {
    id: "America/New_York",
  },
  weekOfYear: 37,
  year: 2020,
}

Look at all those attributes available to us! Notice that the epochMilliseconds are there along with epochMircoseconds and others.

This makes saving this information to the database extremely easy.

Instant

Instant can be instantiated from either a date string, or a number. The number can be epoch milliseconds, nanoseconds, or microseconds. Since I work with epoch milliseconds, that's what I'll show. Assume my timezone is UTC right now.

const todayString = '2022-09-10T13:55Z'
const todayMilliseconds = 1662818100000

Note: There is an added Z at the end of the string date to denote the timezone.

There's also a slight difference to how one interacts with the two different types of dates.

Note: Objects cannot be passed in as an argument the way we did above with the Plain Temporal objects.

const fromString = Temporal.Instant.from(todayString)
const fromMilliseconds = 
  Temporal.Instant.fromEpochMilliseconds(todayMilliseconds)

Both of these are the same date so they will output the same information.

{
  epochMicroseconds: 1662818100000000n
  epochMilliseconds: 1662818100000
  epochNanoseconds: 1662818100000000000n
  epochSeconds: 1662818100
}

Coercion

The biggest frustration I had was figuring out how to coerce a Plain object into an Instant and vice versa. This section is the reason I'm writing this piece.

The problem I encountered was how do I read epochMilliseconds and coerce them into other Temporal types?

The answer! with and to.

Let's say I had a value in the db called createdAt (really clever, I know) which is stored as a UTC timestamp. How could this be coerced into a Temporal object (PlainTime, PlainDate, or PlainDateTime)?

The first step is to convert that into a ZonedDateTime. But before doing that a timezone is required. For this I'm going to use my local timezone.

const myTZ = Temporal.timezone.from('America/New_York')
const createdAt = 1662818100000
const createdAtInstant = 
  Temporal.Instant.fromEpochMilliseconds(createdAt)
const zonedCreatedAt = createdAtInstant.toZonedDateTime({
  timeZone: tz,
  calendar: 'iso8601'
})

It's a bit much, but now zonedCreatedAt is a Temporal ZonedDateTime created from an instant that was created from an epoch millisecond timestamp.

If you wanted to convert the above to another Temporal type toPlainDate and toPlainTime can be used on zonedCreatedAt.

Conclusion

This was a bit of a primer. If you go through the documentation there are other ways to do some of the things I showed above and there are more details to know.

Some cool little hacks I've learned.

Aaron Wolf — Thu, 10 Feb 2022 11:20:23 +0000

Intro

This is going to be an ongoing "documentation" of cool little hacks that I've learned. Each entry will consist of what I did originally and what the better version is.

Hack 1: Using `and` instead of conditional (React)

Context:

While iterating through a list of phone numbers, show <PhoneIcon /> next to only the first phone number.

Original code: Using a ternary operator

{phoneNumbers.map((phoneNumber, i) => (
  <div>
    {i === 0 ? <PhoneIcon /> : ''}
    {phoneNumber}
  </div>
)

Better: Using and or statement

contact.phones?.map((phoneNumber, i) => (
  <div>
    {!i && (<PhoneIcon />)}
    {phoneNumber}
  </div>
)

Explanation:

This works because the truthiness value of 0 is false. So while iterating through the phone numbers, if the index is 0 we can conditionally show the <PhoneIcon /> with !i && (<PhoneIcon />)

Hack 2: Joining an array

Context:

Sometimes there is an object with empty values, and I don't want this object to display if the values are empty. The problem is, empty values can be either null, or empty strings ''.

Example:

{ firstName: null,
  lastName: null,
  phone: '',
  location: null,
  favoriteColor: ''
}

Original code:

const emptyChecker = (obj) => {
  const nulls = Object.values(obj).filter(val => val === null)
  const empties = Object.values(obj).filter(val => val === '')
  // checks length of nulls && empties against length of the whole
  return nulls.concat(empties).length === Object.values(obj).length
}

Iterate through the values of the object and if they're null add them to an array. Do it again, but with empty strings. Concat the 2 arrays and compare the length to the original.

Better:

const emptyChecker = (obj) => {
  const empties = Object.values(obj).filter(val => !val)
    // checks length of nulls && empties against length of the whole
  return empties.length === Object.values(obj).length
}

Explanation:

This works because instead of iterating through the object values twice we convert the values to booleans as they're being iterated over. This works because null has a truthiness value of false as does an empty string ''. Therefore .filter(val => !val) only adds false values to the array and then we can compare the length to to the original.

Hack 3: Dealing with objects conditionally.

Context:

Say you have a function that edits an object. It could be something like an onChange that needs to change the state of your application.

Original code:

I have the following code to update the contact. This is exaggerated code to prove a point.

const [contact, setContact] = {
  name: 'Aaron',
  job: 'developer',
  address: '123 fourth st.'
}

const onChange = key => e => {
  const val = e.target.value
  if (key === 'name') {
    setContact(prevState => ({...prevState, 'name': val})
  } else if (key === 'occupation') {
    setContact(prevState => ({...prevState, 'job': val})
  } else if (key === 'address') {
    setContact(prevState => ({...prevState, 'address': val})
  }
}

Better Way:

const onChange = key => e => {
  const val = e.target.value
  setContact(prevState => ({...prevState, [key]: val})
}

Drag and Drop with React (with no libraries) revised

Aaron Wolf — Thu, 30 Dec 2021 12:59:20 +0000

Intro

In this tutorial I will show how to make a Drag and Drop component from scratch with no 3rd party libraries using React.

I already made a post on Drag and Drop in React, so why make a new one?

Well, many of us learn new things and think we have a good understanding of it. But then we learn more and realize that there was more to know. So I made a new Drag and Drop that uses better methodologies. Enjoy.

Important info

There exists the event handler e.dataTransfer which helps with drag and drop functionality, but as we're using React I find using state to be simpler.
Make sure to check out the Code Sandbox. I may add a few things that aren't reflected below, but the code below is complete.
You might know a better way to do this! If you think you can improve the code please comment.

Drag and Drop in HTML5

There are a few new elements that we will be using thought we're not using all of the HTML5 Drag and Drop elements.

draggable makes a div draggable (instead of highlighting when you click and drag)
onDragStart fires ONCE when you begin to drag
onDragEnter fires ONCE when the dragged div enters another.
onDragOver fires CONTINUOUSLY when dragging over a div
onDrop fires when the mouse click is released

The final 4 of these we will pass to JavaScript to give it the DND logic.

Getting Started.

Let's make a some groups to drag between and some items to be dragged around.

Dnd.js



import React, { useState } from "react";
import "./Dnd.scss";

export default function Dnd() {

  // my groups to be dragged between

  const groups = ["group1", "group2", "group3", "noDrop"];

  // My items to be dragged around

  const initialItems = [
    { id: 1, group: "group1", value: "drag 1" },
    { id: 2, group: "group1", value: "drag 2" },
    { id: 3, group: "group1", value: "drag 3" }
  ];

  return (
    <>

      // Creating the group divs 

      <div className="groups">
        {groups.map((group) => (
          <div className="group">
            <h1 className="title">{group}</h1>
            <div>

              // Creating our items to drag and drop

              {items
                .filter((item) => item.group === group)
                .map((item) => (
                  <div
                    key={item.id}
                    id={item.id}
                    className="item"

                    // THIS MAKES THE ITEM DRAGGABLE!!!

                    draggable
                  >
                     // item title
                    {item.value}
                  </div>
                ))}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

Dnd.scss



.groups {
  display: flex;
  margin: 5px;
  padding: 5px;
  flex-wrap: wrap;


  .group {
    margin: 2px;
    padding: 20px;
    min-height: 16rem;
    background-color: green;

    .title{
      color: white;
      padding: 0;
      margin-top: 0;
    }
  }
}


.item {
  background-color: yellow;
  color: blue;
  margin: 5px;
  padding: 5px;
  border: 2px green;
  cursor: grab;
}

This creates something that looks like this:

Now we'll add the events and the event handlers. Make sure to read the comments in the code as that's where the explanations are. I think this is simpler than describing everything outside of the code.

Hint: The comments are easier to read in the Code Sandbox.

Dnd.js



import React, { useState } from "react";
import "./Dnd.scss";

export default function Dnd() {
  // Initial groups to drag between
  const groups = ["group1", "group2", "group3", "noDrop"];
  // Initial items to be dragged 
  const initialItems = [
    { id: 1, group: "group1", value: "drag 1" },
    { id: 2, group: "group1", value: "drag 2" },
    { id: 3, group: "group1", value: "drag 3" }
  ];
  // Sets the state of the items. I may add an "add" function later
  // Can be used to add items
  const [items, setItems] = useState(initialItems);
  // Data about a thing's id, origin, and destination
  const [dragData, setDragData] = useState({});
  // Are we hovering over the noDrop div?
  const [noDrop, setNoDrop] = useState("");

  // onDragStart we setDragData.
  // useState instead of e.dataTransfer so we can transfer more data
  const handleDragStart = (e, id, group) => {
    setDragData({ id: id, initialGroup: group });
  };

  // If we enter the noDrop zone the state will be updated
  // Used for styling.
  const handleDragEnter = (e, group) => {
    if (group === "noDrop") {
      setNoDrop("noDrop");
    }
  };

  // DND will not work without this.
  const handleDragOver = (e) => {
    e.preventDefault();
  };

  // setNoDrop to nothing to return styling to normal
  const handleDragLeave = (e) => {
    setNoDrop("");
  };

  // 1. makes copy of items (newItems)
  // 2. changes category of the item to its new group
  // 3. setItem to our NewItems
  const changeCategory = (itemId, group) => {
    const newItems = [...items];
    newItems[itemId - 1].group = group;
    setItems([...newItems]);
  };

  // 1. setNoDrop in case item was dropped in noDrop
  // 2. gets the item id
  // 3. doesn't allow drop in noDrop
  // 4. changeCategory (see above)
  const handleDrop = (e, group) => {
    setNoDrop("");
    const selected = dragData.id;
    if (group === "noDrop") {
      console.log("nuh uh");
    } else {
      changeCategory(selected, group);
    }
  };

  return (
    <>
      <div className="groups">
        {/* iterate over groups */}
        {groups.map((group) => (
          <div
            // change styling if dragging into noDrop zone
            className={`${
              group === "noDrop" && noDrop === "noDrop" ? noDrop : "group"
            }`}
            // event handlers
            onDragEnter={(e) => handleDragEnter(e, group)}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={(e) => handleDrop(e, group)}
            key={group}
          >
            <h1 className="title">{group}</h1>
            <div>
              {/* iterate over items */}
              {items
                .filter((item) => item.group === group)
                .map((item) => (
                  <div
                    key={item.id}
                    id={item.id}
                    // change style if dragged over noDrop
                    className={`${
                      group === "noDrop" && noDrop === "noDrop"
                        ? "notAllowed"
                        : "item"
                    }`}
                    // MAKES THE ITEM DRAGGABLE!!!!
                    draggable
                    // event handler
                    onDragStart={(e) => handleDragStart(e, item.id, group)}
                  >
                    {/* The name of each item */}
                    {item.value}
                  </div>
                ))}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

Dnd.scss



.groups {

  display: flex;

  margin: 5px;

  padding: 5px;

  flex-wrap: wrap;

.group {

    margin: 2px;

    padding: 20px;

    min-height: 16rem;

    background-color: green;

<span class="nc">.title</span><span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>



}

  .noDrop {

    margin: 2px;

    padding: 20px;

    min-height: 16rem;

    background-color: red;

    cursor: not-allowed !important;

<span class="nc">.title</span><span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>



}

}

.item {

  background-color: yellow;

  color: blue;

  margin: 5px;

  padding: 5px;

  border: 2px green;

  cursor: grab;

}

.notAllowed {

  background-color: yellow;

  color: blue;

  margin: 5px;

  padding: 5px;

  border: 2px green;

  cursor: not-allowed;

}

This is what it looks like

Conclusion

This is the basic gist of it. If you need something simple that works this is it, otherwise feel free to install a library.

Watch it in action! See the Code Sandbox

DEV Community: Aaron Wolf

The URL Object

Overview

Basic Usage

Properties

Methods

Example with Open Weather Map API

Summary

async / await

async / await

Example

Example 2: Ordering food from a restaurant

Structure of async/await

JavaScript Promises & Fetch

Promises

Restaurants

JavaScript

Creating a promise:

Using a promise

Fetch

Using fetch()

The Call Stack and Event Loop

Example

Why?

Apple Announces PQ3

Encryption Part 4: Hashes

Hashing

Hashing algorithms

Let's see SHA-1 in action

Python for SHA-1

Encryption Part 3: RSA Encryption

RSA encryption

RSA Encryption Overview

Common Uses of RSA encryption

RSA Encryption Process

Key Generation

Encryption Process

Decryption Process

Security

Let's get coding: Helper Functions

Encryption Functions

Selecting the public key

Watch RSA in action

Alice sends n and e. Bob uses these numbers to encrypt

Send the encrypted message

Alice uses her private key d to decrypt the message

Encryption Part 2: Diffie-Hellman & Public Key Cryptography

Intro

History

Diffie Hellman

How Does It Work Conceptually?

How Does the Math Work?

Demonstration

Helper Functions

Implementing Diffie-Hellman

Let's get 2 volunteers

Choose Numbers

Review so far:

Numbers that are known to everyone

Numbers only known to their owners

The Super Key

Sending a message

Step 1: encode the message into the computer numeric values

Step 2: encrypt message

Step 3: decrypt message

Next Step

Encryption Part 1: Introduction to Encryption

Intro

What is encryption?

When was encryption first used?

How does a Caesar (Shift) cipher work?

Security

Symmetric Ciphers & Asymmetric Ciphers

Switching From Linux to Mac

I Switched.

Set Up

The Physical Machine

(Perceived) Performance

Rebooting

FOSS

`async` / `await`

Structure of `async`/`await`

Alice sends `n` and `e`. Bob uses these numbers to encrypt

Alice uses her private key `d` to decrypt the message

Hack 1: Using `and` instead of conditional (React)