DEV Community: Jae Jeong

Using WiFi as Sonar: How AI Can "See" Through Signals

Jae Jeong — Fri, 25 Oct 2024 17:26:28 +0000

AI and WiFi Sonar: How Machine Learning Can Sense Our Environment

Imagine a world where your WiFi does more than just connect devices. It could actually "see" through walls, detect movements, monitor your breathing, and interact with you—all without cameras or extra sensors. This isn’t science fiction. Researchers are actively exploring how AI can leverage WiFi signals like sonar, using them to map out surroundings and detect changes in real-time.

Let’s break down how this works, where it’s headed, and why it could be the next big thing in smart tech.

How WiFi Sonar Works

WiFi sonar works a bit like radar. Every time your WiFi signal encounters an object—a wall, furniture, or a person—it bounces back or shifts. These changes, even if subtle, create patterns. Using AI, we can analyze these patterns to detect movement, recognize gestures, and even pick up on tiny details like a person’s breathing rate.

The steps are pretty straightforward:

WiFi Transmission: A router or device emits WiFi signals that spread across a space.
Signal Interference: When the signal hits something, its characteristics change slightly.
Data Collection: Receivers collect the altered signal data.
AI Analysis: Machine learning processes these patterns, interpreting changes to map the environment and detect activity.

By analyzing the subtle ways signals shift, AI can detect presence, track movements, and "see" basic shapes in the environment.

Practical Applications of WiFi Sonar

WiFi sonar tech opens up possibilities in several areas. Here’s a look at some real-world applications researchers are working on:

Smart Home Automation: Imagine a home where lights adjust as people move through rooms, or appliances respond to simple gestures, all without cameras or touch sensors.
Health Monitoring: WiFi signals can be sensitive enough to detect breathing patterns, potentially helping track sleep quality or detect abnormal breathing, all without wearable devices.
Security and Surveillance: WiFi sonar can sense movement, providing a privacy-friendly way to monitor spaces without the need for cameras.
Gesture Control: In the future, we might control WiFi-connected devices by gesturing instead of pressing buttons or using remotes.

Pros and Cons of WiFi as Sonar

WiFi sonar has some impressive perks, but it also faces a few technical challenges:

Benefits

Non-Intrusive: Since WiFi is already around us, there’s no need for extra hardware.
Privacy-First: Unlike cameras, WiFi sonar doesn’t capture images, which could make it less invasive for certain uses.
Flexible Detection: WiFi can "see" in any lighting or weather conditions, making it reliable in diverse environments.

Challenges

Interference Issues: WiFi signals are prone to interference, which can mess with accuracy.
Lower Resolution: WiFi’s signal resolution isn’t as sharp as, say, radar, so the “image” quality is limited.
Privacy Concerns: Although image-free, WiFi sonar can still detect people’s presence and movements, which might raise ethical concerns.

The Role of AI in WiFi Sonar

AI makes WiFi sonar possible. Machine learning algorithms can detect patterns in signal changes, and over time, AI models can learn to distinguish subtle shifts for improved accuracy. By training on different environments and scenarios, AI becomes capable of recognizing movements, interpreting gestures, and even distinguishing individuals based on movement patterns.

As WiFi standards continue to improve (like WiFi 6 and 7 with higher frequencies and faster speeds), the potential for WiFi-based sonar tech to be highly accurate is growing.

What’s Next for WiFi Sonar?

WiFi sonar has major potential in the near future, especially for healthcare, security, and home automation. That said, as this technology develops, there are some big discussions to have around privacy and security. Striking a balance will be crucial, especially as tech increasingly integrates into our homes and personal spaces.

WiFi-based sonar tech, combined with AI, shows us just how versatile the technology we already use every day can be. As AI gets better at reading these signals, WiFi might not just connect us but actually "see" the spaces we live in—opening up a new world of possibilities for safe, private, and smart interactions with our environments.

Securing Passwords in User Authentication

Jae Jeong — Fri, 04 Oct 2024 01:46:01 +0000

Introduction

When passwords are saved as plaintext, there is a huge risk of the password being exposed in a data breach. In order to make it difficult for hackers from obtaining such data, password hashes and salting are concepts used in securing passwords.

Password Hashes

A password hash is a string of fixed length that is generated by a hash function from a password. Hashing transforms a given password into a unique representation that is stored in place of a plaintext password. Hashing is a one-way operation which makes it difficult for hackers to reverse-engineer the original password. An analogy for the hashing process is making a smoothie. All the ingredients can be blended into a smoothie, but the process cannot be reversed to obtain fruits from a smoothie.

Salting

A salt is a random string added to the password before it is hashed. Each password has a unique salt. Salting prevents attackers from using precomputed hash tables (also known as rainbow tables) to crack passwords. This means that even if two users have the same password, their hashed passwords will be different because each has a unique salt.

Bcrypt

Bcrypt is a popular library that is used to secure user passwords. It utilizes hashing and salting through a cryptographic algorithm to scramble a user's password into a unique string. Whenever a user logs in, the inputted password is re-hashed with the unique salt and compared to the stored password.

Using Bcrypt in Python

import bcrypt

# Hash Function
def hash_password(password):
    # Generate a salt
    salt = bcrypt.gensalt()

    # Hash the password with the salt
    hashed_password = bcrypt.hashpw(password.encode("utf-8"), salt)

    return hashed_password

# Example Usage
password = "password"
hashed = hash_password(password)
print(hashed)
# returns $2b$12$zN6GSrAJGHu5ERqjHQUBOugzdHwLpR7jOiTwGE.G0LEv8.OxBNREm

Conclusion

Plaintext passwords are a huge risk in data breaches. Password hashing and salting are crucial in maintaining user security. Bcrypt is a popular library used to secure passwords. Other popular libraries include scrypt or Argon2.

Intro to Regular Expressions

Jae Jeong — Thu, 12 Sep 2024 17:19:43 +0000

Introduction

Regular expressions, or regex, are sequences of characters that define a search pattern that is primarily used for pattern matching within strings. They are commonly used in validating, searching, replacing, or extracting specific patterns from strings. Common uses are finding or matching strings that match a required format like phone numbers, email addresses, or dates.

Character Classes

Character Class	Syntax	Description
Character Set	[ABC]	Matches any character in the set
Negated Set	[^ABC]	Matches any character not in the set
Range	[A-Z]	Matches any characters in between the two specified characters, inclusively
Dot	.	Matches any characters except line breaks
Word	\w	Matches any word character (alphanumeric & underscore) Equivalent to [A-Za-z0-9_]
Not Word	\W	Matches any characters that are not a word character
Digit	\d	Matches any number (0-9)
Digit	\D	Matches any character that is not a number

Anchors

Anchor	Syntax	Description
Beginning	^	Matches the beginning of the string
End	$	Matches the end of the string
Word Boundary	\b	Matches a word boundary position between a word character and non-word character
Not Word Boundary	\B	Matches any position that is not a word boundary

Reserved Characters

In regular expressions, some characters, (+ * ? ^ $ \ . [ ] { } ( ) | /) are reserved for specific purposes, as seen above. To represent these characters as a literal character, they should be preceded by a backslash ().

Quantifiers & Alternation

	Syntax	Description
Plus	+	Matches 1 or more of the preceding token
Star	*	Matches 0 or more of the preceding token
Quantifier	{1,3}	Matches the specified quantity of the preceding token. {1,3} will match 1 to 3 and {3} will match exactly 3. {3,} will match 3 or more.
Optional	?	Matches 0 or 1 of the preceding token
Lazy	?	Makes the preceding quantifier lazy, making it match as few characters as possible
Alternation	\|	Matches the expression before or after the \|

Examples

Example	Syntax
Phone Number	^(\d{3})\s?\d{3}[-\s]?\d{4}$
Email Address	^\w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$
Date (MM/DD/YY)	^(0[1-9]\|1[0-2])/(0[1-9]\|[12]\d\|3[01])/(\d{2})$

Intro to Regular Expressions

Jae Jeong — Thu, 12 Sep 2024 17:19:43 +0000

Introduction

Character Classes

Character Class | Syntax | Description
--- |: --- :| ---
Character Set | [ABC] | Matches any character in the set
Negated Set | [^ABC] | Matches any character not in the set
Range | [A-Z] | Matches any characters in between the two specified characters, inclusively
Dot | . | Matches any characters except line breaks
Word | \w | Matches any word character (alphanumeric & underscore) Equivalent to [A-Za-z0-9_]
Not Word | \W | Matches any characters that are not a word character
Digit | \d | Matches any number (0-9)
Digit | \D | Matches any character that is not a number

Anchors

Anchor	Syntax	Description
Beginning	^	Matches the beginning of the string
End	$	Matches the end of the string
Word Boundary	\b	Matches a word boundary position between a word character and non-word character
Not Word Boundary	\B	Matches any position that is not a word boundary

Reserved Characters

Quantifiers & Alternation

	Syntax	Description
Plus	+	Matches 1 or more of the preceding token
Star	*	Matches 0 or more of the preceding token
Quantifier	{1,3}	Matches the specified quantity of the preceding token. {1,3} will match 1 to 3 and {3} will match exactly 3. {3,} will match 3 or more.
Optional	?	Matches 0 or 1 of the preceding token
Lazy	?	Makes the preceding quantifier lazy, making it match as few characters as possible
Alternation	\|	Matches the expression before or after the \|

Examples

Example	Syntax
Phone Number	^(\d{3})\s?\d{3}[-\s]?\d{4}$
Email Address	^\w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$
Date (MM/DD/YY)	^(0[1-9]\|1[0-2])/(0[1-9]\|[12]\d\|3[01])/(\d{2})$

Intro to React

Jae Jeong — Tue, 13 Aug 2024 20:59:53 +0000

What is react?

Developed by Facebook, React is an open-source library built completely out of JavaScript and commonly used to build single-page applications out of components.

Key Features of React

Component-Based

React applications are built out of smaller components that each handle a different part or function of the application. A header component would handle the header portion of a webpage, a form component would handle a form used in the webpage, and a list component would handle list elements in a list.
This method of modular coding allows developers to easily identify specific components and their functionalities. It also allows easier navigation through the code and makes it easier to find bugs, since they are isolated in these components.

JSX

JSX is a syntax extension used in React to produce code that looks like HMTL in JavaScript. This allows developers to easily visualize the structure of a component.

Example Code 1:

import React from "react"

export function App() {
return (
    <div>
        <h1>Title</h1>
        <p>Description</p>
        <img src="img_url" alt="alt_text" />
    </div>
    )
}

Declarative Programming

In declarative programming, a desired result or outcome is described and the process of producing that result or outcome is left to the program. Whereas in imperative programming, explicit directions are given to the program to produce the desired result or outcome.
An analogy that describes the difference between the two approaches would be ordering a mojito at a bar. An imperative approach would be to give the bartender step-by-step instructions such as:

Add five mint leaves to cocktail shaker and muddle.
Add 2oz of white rum, 1oz lime juice, 1/2 simple syrup, and ice.
Shake, and then strain into a glass.
Top with a splash of club soda and garnish with mint leaf.

Whereas the declarative approach would be to ask the bartender for a mojito and leaving the process of creating the mojito to the bartender.

In vanilla JavaScript, imperative programming is commonly used. Explicit instructions must be given in order to manipulate the DOM.

Example Code 2:

const container = document.createElement("div");

const titleH1 = document.createElement("h1");
titleH1.textContent = "Title";

const descriptionP = document.createElement("p");
descriptionP.textContent = "Description";

const img = document.createElement("img");
img.src = "img_url";
img.alt = "alt_text";

container.append(titleH1, descriptionP, img);

Whereas, in Example Code 1, the code describes the final result that is desired and leaves the process of obtaining that result to the program.

Virtual DOM

Since the DOM is manipulated manually in vanilla JavaScript, updates can be less efficient and therefore slow down the application. Whereas in React, changes are first made to a copy of the DOM called the virtual DOM. The differences between the real DOM and the virtual DOM are then found and only those components are updated. This allows faster updates since only updated portions of the web application are changed.

One-Way Data Flow

Data in React flows in one direction, from parent components to child components. The data is sent down in the form of properties, or props.

// Parent.jsx
import React from "react";
import Child from "./Child";

export function Parent() {
const greeting = "Hello World!";
    return (
        <div>
            <Child message={greeting} />
        </div>
    )
}

// Child.jsx 

export function Child(props) {
    console.log(props.message); // returns "Hello World!"
    return (
        <h1>{props.message}</h1>
    )
}

Conclusion

React allows developers to build applications out of smaller pieces of code in the form of components. This component-based programming and the use of JSX syntax increases the readability of the structure of the application. The use of a virtual DOM allows for efficient changes in the web application by only reloading parts of the DOM that were changed instead of the entire DOM.

JavaScript Arrays

Jae Jeong — Thu, 01 Aug 2024 23:22:21 +0000

What are arrays?

Arrays are a data structure that stores an ordered collection of elements. In JavaScript, arrays are classified as a special type of object and can store numbers, strings, objects, or other arrays. Elements in an array are enclosed in square brackets [ ] and use a zero-based index. A zero-based index means that the first element of an array will have an index of 0, the second element will have an index of 1, and so on.

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"

How can arrays be modified or manipulated?

Index of the Element in an Array

A new element can be added to an array by assigning a value to an empty index.

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]

Elements in an array can be modified by reassigning a new value to an existing index.

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

Array Methods

Arrays can also be modified or manipulated with array methods such as 'push', 'pop', 'unshift', 'shift', 'slice', and 'splice'.

'push()'

The 'push' method takes one or more elements as arguments, adds the elements to the end of the array, and returns the length of the modified array.

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]

'pop()'

The 'pop' method takes no arguments, removes the last element of the array, and returns the removed element.

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

'unshift()'

The 'unshift' method takes one or more elements as arguments, adds the elements to the beginning of the array, and returns the length of the modified array.

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]

'shift()'

The 'shift' method takes no arguments, removes the first element of an array, and returns the removed element.

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'slice()'

The 'slice' method takes two optional arguments (startIndex, endIndex) and returns a new array with the elements from the startIndex to, but not including, the endIndex of the original array.
If the startIndex is omitted, 0 is used.
If the endIndex is omitted, the array length is used. Negative index numbers can be used to count back from the end of the array.

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'splice()'

The 'splice' method takes one or more arguments (startIndex, deleteCount, element1, element2, ...) and returns a new array containing all the removed elements. From the startIndex, the deleteCount number of elements are deleted and the following element arguments will be added to the array beginning from the startIndex. If deleteCount is omitted, all elements from startIndex to the end of the array are deleted. If element arguments are omitted, no elements are added.

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]

Since 'push', 'pop', 'unshift', 'shift, and 'splice' modify the original array, they are classified as destructive methods. The 'slice' method leaves the original array intact, so it is classified as non-destructive.

Spread Operator '...'

To add elements to or copy an array non-destructively, the spread operator can be used. The spread operator spreads an array into its elements.

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]

Without the spread operator, the original array would be nested within the new array.

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];

Iterative Array Methods

Iterative array methods call a provided function on each element in an array and returns a value or new array. The provided function is called with three arguments: the current element, the index of the current element, and the original array that the method was called on.

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}

Some examples of iterative array methods are: 'find', 'filter', 'map', and 'reduce'.

'find()'

The 'find' method takes a function as an argument and returns the first element in the array that satisfies the conditions of the function.

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;

'filter()'

The 'filter' method is the similar to the 'find' method, but instead returns an array of all the elements that satisfy the conditions of the given function.

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];

'map()'

The 'map' method returns a new array with the results of calling the function on each element in the original array.

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]

'reduce()'

The 'reduce' method takes a function and an initial value as an argument. The provided function receives four arguments: the accumulator, current value, current index, and the original array. The initial value provided is the value of the accumulator for the first element of the array. The result of the function for each element is used as the value of the accumulator for the next element in the array. If an initial value is not provided, the accumulator is set to the first element of the array and the callback function is called starting from the second element.

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc + number), 0);
// returns 15